CGI & HTML forms

Preview:

DESCRIPTION

CGI & HTML forms. -05-. CGI. Common Gateway Interface. A web server is only a pipe between user-agents. and content – it does not generate content. CGI. Common Gateway Interface. A web server is only a pipe between user-agents. and content – it does not generate content. - PowerPoint PPT Presentation

Citation preview

CGI & HTML forms

-05-

CGI

Common Gateway Interface A web server is only a pipe between user-agents and content – it does not generate content

CGI

Common Gateway Interface A web server is only a pipe between user-agents and content – it does not generate content Works well with static content (e.g. html files)

CGI

Common Gateway Interface A web server is only a pipe between user-agents and content – it does not generate content Works well with static content, but what about dynamic content?

CGI

Common Gateway Interface A web server is only a pipe between user-agents and content – it does not generate content Works well with static content, but what about dynamic content? A web server needs to delegate content generation to third party applications

CGI

Common Gateway Interface A web server is only a pipe between user-agents and content – it does not generate content Works well with static content, but what about dynamic content? A web server needs to delegate content generation to third party applications Common Gateway Interface is a standard protocol which defines how to delegate content generation from a web server to a console application

CGI

Common Gateway Interface If dynamic content generation is required, the web server invokes console applications as commands

CGI

Common Gateway Interface If dynamic content generation is required, the web

These console applications are often called CGI scripts

Although they can be written in any programming language, scripting languages are often used

server invokes console applications as commands

CGI

Common Gateway Interface If dynamic content generation is required, the web

These console applications are often called CGI scripts

Although they can be written in any programming language, scripting languages are often used

server invokes console applications as commands

For example: wikipediaUser makes a requests for an entry

The web server activates a script which transforms the source of the entry into an HTML document and sends the result to the user

CGI

Common Gateway Interface How do you tell a server to invoke an application rather than send back its source code/binary form?

CGI

Common Gateway Interface

The CGI scripts are placed in a special directory recognized by the web server

How do you tell a server to invoke an application rather than send back its source code/binary form?

CGI

Common Gateway Interface

The CGI scripts are placed in a special directory recognized by the web server

Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content

How do you tell a server to invoke an application rather than send back its source code/binary form?

CGI

Common Gateway Interface

The CGI scripts are placed in a special directory recognized by the web server

Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content

Usually the directory is called cgi-bin under the web server’s path

How do you tell a server to invoke an application rather than send back its source code/binary form?

CGI

Common Gateway Interface

The CGI scripts are placed in a special directory recognized by the web server

Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content

Usually the directory is called cgi-bin under the web server’s path

For security reasons only webmasters can update this directory or make it active

How do you tell a server to invoke an application rather than send back its source code/binary form?

CGI

CGI specification

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

The web server sets the environment variables with proper information

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

The web server sets the environment variables with proper information

If there is additional content (e.g. a PUT method), then it is passed using stdin

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

The web server sets the environment variables with proper information

If there is additional content (e.g. a PUT method), then it is passed using stdin

CGI sets rules for the CGI script output and how it needs to be handled by the web server

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

The web server sets the environment variables with proper information

If there is additional content (e.g. a PUT method), then it is passed using stdin

CGI sets rules for the CGI script output and how

The response is written to stdout

it needs to be handled by the web server

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI specification

The web server sets the environment variables with proper information

If there is additional content (e.g. a PUT method), then it is passed using stdin

CGI sets rules for the CGI script output and how

The response is written to stdout

There are two types of response: NPH and CGI

it needs to be handled by the web server

CGI

CGI mechanism

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway

CGI

CGI mechanism

The web server acts like an application gateway as follows:

1. Receives the request from a client

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway as follows:

1. Receives the request from a client

2. Selects a CGI script to handle the request

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway as follows:

1. Receives the request from a client

2. Selects a CGI script to handle the request

3. Converts the client’s request to a CGI request and sets the environment variables

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway as follows:

1. Receives the request from a client

2. Selects a CGI script to handle the request

3. Converts the client’s request to a CGI request and sets the environment variables

4. Executes the script (request data might not be immediately available through stdin)

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway as follows:

1. Receives the request from a client

2. Selects a CGI script to handle the request

3. Converts the client’s request to a CGI request and sets the environment variables

4. Executes the script (request data might not be immediately available through stdin)

5. Converts the CGI response into a response to the client

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway

CGI Script execution

Web server CGI script

CGI Request

Response

User

Request

CGI Response

CGI

CGI mechanism

The web server acts like an application gateway

The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction)

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway

The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction)

The web server has to conform to the client’s request protocol, even if the CGI script fails to

CGI Script execution

CGI

CGI mechanism

The web server acts like an application gateway

The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction)

The web server has to conform to the client’s request protocol, even if the CGI script fails to

If authentication is involved, the script can be invoked only if access is granted

CGI Script execution

CGI

CGI mechanism CGI Script selection

CGI

CGI mechanism

The CGI script is selected based on the request URI

CGI Script selection

CGI

CGI mechanism

The CGI script is selected based on the request URI

The script may match the whole or a leading part of the hierarchical part

CGI Script selection

CGI

CGI mechanism

The CGI script is selected based on the request URI

The script may match the whole or a leading part of the hierarchical part

The remainder of the path, if any, is a resource or sub-resource identifier to be interpreted by the script

CGI Script selection

CGI

CGI mechanism

The CGI script is selected based on the request URI

The script may match the whole or a leading part of the hierarchical part

The remainder of the path, if any, is a resource or sub-resource identifier to be interpreted by the script

Several paths may be associated with the same script

CGI Script selection

CGI

CGI Request

CGI

CGI Request

The variables contain data about the request passed from the server to the script

Meta-variables passed as environment variables

CGI

CGI Request

The variables contain data about the request passed from the server to the script

They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only

Meta-variables passed as environment variables

CGI

CGI Request

The variables contain data about the request passed from the server to the script

They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only

Usually they appear as capitals with underscores (e.g. PATH_INFO)

Meta-variables passed as environment variables

CGI

CGI Request

The variables contain data about the request passed from the server to the script

They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only

Usually they appear as capitals with underscores (e.g. PATH_INFO)

A missing environment variable is equivalent to a zero-length (NULL) value; it is impossible to tell if the value is NULL or missing

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Variables set for every request

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Variables set for every request

SERVER_SOFTWAREThe name and version of the web server

SERVER_NAMEThe server's hostname or IP address

GATEWAY_INTERFACEThe revision of the CGI specification to which this server complies (e.g. CGI/1.1)

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Request specific variables

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Request specific variables

SERVER_PROTOCOLThe name and revision of the protocol this request came in with (e.g. HTTP/1.1)

SERVER_PORTThe port number to which the request was sent

REQUEST_METHODThe method with which the request was made (e.g. POST)

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Request specific variables

REMOTE_ADDRThe IP address of the client

REMOTE_HOSTThe hostname of the client the request

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Request specific variables

PATH_INFOIdentifies the resource or sub-resource derived from the portion of the URI path hierarchy following the part that identifies the script itself

PATH_TRANSLATEDThe server provides a translated version of PATH_INFO, which takes the path and does any virtual-to-physical mapping to it

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

Request specific variables

QUERY_STRINGThe part of the request URI which follows the first ?

This string is added either by an HTML form with a GET method or by an HTML anchor

This string is encoded in the standard URL format – spaces are replaced by “+” and special characters are encoded with %xx (hex value)

for example: “ur/ a%&” “ur%2F+a%25%26”

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

HTTP_* variables

The web server may choose to pass some of the headers it received to the script

Meta-variables passed as environment variables

CGI

CGI Request

Some variables are set for every request, some don’t

HTTP_* variables

The web server may choose to pass some of the headers it received to the script

Each such header is passed through an environment variable which name is composed in the following way: starts with “HTTP_” and then the HTTP header name, converted to upper case with occurrences of “-” replaced with “_”

for example: HTTP_USER_AGENTHTTP_ACCEPT

Meta-variables passed as environment variables

CGI

CGI Request

The request data (for methods PUT and POST) is passed in stdin

Message body

CGI

CGI Request

The request data (for methods PUT and POST) is passed in stdin

The script should expect to read data from stdin only if the variable CONTENT_LENGTH is not NULL; do not expect end-of-file after reading CONTENT_LENGTH bytes

CONTENT_TYPE should be supplied as well

Message body

CGI

CGI vs. NPH Response

CGI

CGI vs. NPH Response

These are scripts to which the server passes all responsibility for response processing

The script’s output is sent to the client unmodified

NPH (non-parsed header) Response

CGI

CGI vs. NPH Response

These are scripts to which the server passes all responsibility for response processing

The script’s output is sent to the client unmodified

NPH (non-parsed header) Response

The response generated by the client is handled by the web server before being sent to the client

Some special action by the web server might be required

CGI Response

CGI

CGI Response

The response has a message-header and a message-body, separated by a blank line (just like HTTP)

The message-header contains one or more header fields

The body may be NULL

General structure

CGI

CGI Response

The response has a message-header and a message-body, separated by a blank line (just like HTTP)

The message-header contains one or more header fields

The body may be NULL

General structure

CGI; Extension; Protocol

Three different types of a response header

CGI

CGI Response

The response has a message-header and a message-body, separated by a blank line (just like HTTP)

The message-header contains one or more header fields

The body may be NULL

General structure

CGI; Extension; Protocol

Interpreted by the server; At least one CGI header must be present

Three different types of a response header

CGI

CGI Response

The response has a message-header and a message-body, separated by a blank line (just like HTTP)

The message-header contains one or more header fields

The body may be NULL

General structure

CGI; Extension; Protocol

Included in the response returned to the client

Three different types of a response header

CGI

CGI Response

Content-Type; Location; Status

CGI headers

CGI

CGI Response

Content-Type; Location; Status

The content type of the message body (if exists)

Syntax: Content-Type: <media-type>

Example: Content-Type: text/html

CGI headers

CGI

CGI Response

Content-Type; Location; Status

This is used to specify to the server that the script is returning a reference to a document rather than an actual document

Syntax: Location: URI | <local absolute path>

Example: Location: http://www.amazon.comLocation: /images/logo.gif

CGI headers

CGI

CGI Response

Content-Type; Location; Status

Used to indicate to the server what status code it should use in the response message

Syntax: Status: <3-digit code>

Example: Status: 200

CGI headers

CGI

CGI Response

Content-Type; Location; Status

CGI headers

Response typesDocument response; Local redirect; Client redirect

CGI

CGI Response

Content-Type; Location; Status

CGI headers

Response typesDocument response; Local redirect; Client redirect

The CGI script returns a document to the user

The script MUST include a Content-Type header field

The script might return a Status header; if omitted, the web server assumes 200 OK

CGI

CGI Response

Content-Type; Location; Status

CGI headers

Response typesDocument response; Local redirect; Client redirect

A local redirection is indicated to the web server by providing a Location header with local URL

The server MUST generate the response that it would have produced in response to a request containing the local URL

The script MUST NOT return any other header fields or a message-body

CGI

CGI Response

Content-Type; Location; Status

CGI headers

Response typesDocument response; Local redirect; Client redirect

A client redirection is indicated to the web server by providing a Location header with absolute URL

The server MUST generate a 302 Found HTTP response

The script MUST not provide any other header fields, except for server-defined Extension headers

CGI

CGI Response

The script might generate a data attachment

The server MUST read all the data provided by the script, until the script sends the end-of-file symbol

Message body

CGI

CGI summary A web server is only a pipe between user-agents and content – it does not generate content Works well with static content, but what about dynamic content? A web server needs to delegate content generation to third party applications Common Gateway Interface is a standard protocol which defines how to delegate content generation from a web server to a console application

(e.g. search query) is passed to the command

CGI defines how information about the request

CGI

CGI summary

The web server sets the environment variables with proper information

If there is additional content (e.g. a PUT method), then it is passed using stdin

CGI sets rules for the CGI script output and how

The response is written to stdout

There are two types of response: NPH and CGI

it needs to be handled by the web server

CGI scripts generate content based on data

CGI

Input for CGI scripts

It might be meta-data, such as user-agent or user’s

CGI scripts generate content based on data

CGI

Input for CGI scripts

IP address; no user interaction required

It might be meta-data, such as user-agent or user’s

CGI scripts generate content based on data

CGI

Input for CGI scripts

It is possible to have user interaction which yields user generated data

IP address; no user interaction required

It might be meta-data, such as user-agent or user’s

CGI scripts generate content based on data

CGI

Input for CGI scripts

It is possible to have user interaction which yields user generated data

IP address; no user interaction required

HTML forms – a convenient way to generate user input

For example, shipping information or credit card details

A form is created by using the <form> element

CGI

HTML forms

A form is created by using the <form> element A form is an area that contains form controls

CGI

HTML forms

Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)

A form is created by using the <form> element A form is an area that contains form controls

CGI

HTML forms

Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)

Users set the values of form controls and submitControl modification is achieved though entering text, selecting menu items, etc…

A form is created by using the <form> element A form is an area that contains form controls

CGI

HTML forms

Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)

Users set the values of form controls and submitControl modification is achieved though entering text, selecting menu items, etc…

Then, the form is submitted to an agent (e.g. a web server) for processing

It is a block-level element A form is an area that contains form controls

CGI

The <form> element

It contains: normal content, markup, controls, and labels

HTML forms

Example (html)<form action=“http://somesite.com/prog/adduser” method=“post”>

Username: <input type="text" name=“user” /> <br />

E-mail: <input type="text" name=“email” /> <br />

<input type=“checkbox” name=“skip”> Skip intro <br />

<input type=“submit” value=“Enter” />

</form>

The <form> element

HTML forms

Example (browser)

The <form> element

It is a block-level element A form is an area that contains form controls

CGI

The <form> element

It contains: normal content, markup, controls, and labels

The layout of the form depends on its contents

It is a block-level element A form is an area that contains form controls

CGI

The <form> element

It contains: normal content, markup, controls, and labels

The layout of the form depends on its contents Two important attributes

action Specifies the resource URI which is used to process the form data

It is a block-level element A form is an area that contains form controls

CGI

The <form> element

It contains: normal content, markup, controls, and labels

The layout of the form depends on its contents Two important attributes

action Specifies the resource URI which is used to process the form data

method Specifies which HTTP method will be used to submit the form data

HTML forms

Example (html)<form action=“http://somesite.com/prog/adduser” method=“post”>

Username: <input type="text" name=“user” /> <br />

E-mail: <input type="text" name=“email” /> <br />

<input type=“checkbox” name=“skip”> Skip intro <br />

<input type=“submit” value=“Enter” />

</form>

The <form> element

Users interact with forms through named controls

CGI

Form controls

Each control has a control name

Users interact with forms through named controls

CGI

Form controls

Each control has a control name

Each control has an initial value and a current value (strings); at first the current value is set to the initial value and is then modified through user interaction

If a form is reset, the current value of each control becomes the initial value again

HTML forms

Example (html)<form action=“http://somesite.com/prog/adduser” method=“post”>

Username: <input type="text" name=“user” /> <br />

E-mail: <input type="text" name=“email” /> <br />

<input type=“checkbox” name=“skip”> Skip intro <br />

<input type=“submit” value=“Enter” />

</form>

The <form> element

Users interact with forms through named controls

CGI

Form controls

Each control has a control name

Each control has an initial value and a current value (strings); at first the current value is set to the initial value and is then modified through user interaction

If a form is reset, the current value of each control becomes the initial value again

Control types: buttons, checkboxes, radio buttons, menus, text input, files select, hidden controls

On submit, the form data is processed in steps

CGI

Form submission

1. Identify successful controls

2. Build a form data set

3. Encode the form data set

4. Submit the encoded form data set

On submit, the form data is processed in steps

CGI

Form submission

1. Identify successful controls

2. Build a form data set

3. Encode the form data set

4. Submit the encoded form data set

A successful control is valid for submission

It must have a control name and a current value

It cannot be disabled

On submit, the form data is processed in steps

CGI

Form submission

1. Identify successful controls

2. Build a form data set

3. Encode the form data set

4. Submit the encoded form data set

A data set is a sequence of control-name/current-value pairs

Only successful controls are paired

On submit, the form data is processed in steps

CGI

Form submission

1. Identify successful controls

2. Build a form data set

3. Encode the form data set

4. Submit the encoded form data set

The data is encoded

The default encoding is URL encoding

On submit, the form data is processed in steps

CGI

Form submission

1. Identify successful controls

2. Build a form data set

3. Encode the form data set

4. Submit the encoded form data set

The data is sent to the processing resource

The resource is identified by the action attribute

The method used is identified by the method attribute

If method=“GET”

CGI

Form submission

The user agent constructs a URI by taking the value of action, appending a “?” to it, and then appending the form data set

The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes

If method=“GET”

CGI

Form submission

The user agent constructs a URI by taking the value of action, appending a “?” to it, and then appending the form data set

The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes

If method=“POST”Instead of appending the encoded form data set to the URI, it is sent as the body of the message

Content-Length is set to the length of the data set, and Content-Type is set to application/x-www-form-urlencoded

A form is created by using the <form> element A form is an area that contains form controls

CGI

HTML forms summary

Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)

Users set the values of form controls and submitControl modification is achieved though entering text, selecting menu items, etc…

Then, the form is submitted to an agent (e.g. a web server) for processing