diff --git a/files/en-us/web/http/authentication/index.md b/files/en-us/web/http/authentication/index.md index 1683831a4718293..2b1971e5dc0d5b2 100644 --- a/files/en-us/web/http/authentication/index.md +++ b/files/en-us/web/http/authentication/index.md @@ -54,7 +54,7 @@ The {{HTTPHeader("WWW-Authenticate")}} and {{HTTPHeader("Proxy-Authenticate")}} The syntax for these headers is the following: -```html +``` WWW-Authenticate: realm= Proxy-Authenticate: realm= ``` @@ -65,7 +65,7 @@ Here, `` is the authentication scheme ("Basic" is the most common scheme a The {{HTTPHeader("Authorization")}} and {{HTTPHeader("Proxy-Authorization")}} request headers contain the credentials to authenticate a user agent with a (proxy) server. Here, the `` is needed again followed by the credentials, which can be encoded or encrypted depending on which authentication scheme is used. -```html +``` Authorization: Proxy-Authorization: ``` @@ -103,30 +103,36 @@ To password-protect a directory on an Apache server, you will need a `.htaccess` The `.htaccess` file typically looks like this: - AuthType Basic - AuthName "Access to the staging site" - AuthUserFile /path/to/.htpasswd - Require valid-user +``` +AuthType Basic +AuthName "Access to the staging site" +AuthUserFile /path/to/.htpasswd +Require valid-user +``` The `.htaccess` file references a `.htpasswd` file in which each line consists of a username and a password separated by a colon (`:`). You cannot see the actual passwords as they are [hashed](https://httpd.apache.org/docs/2.4/misc/password_encryptions.html) (using MD5-based hashing, in this case). Note that you can name your `.htpasswd` file differently if you like, but keep in mind this file shouldn't be accessible to anyone. (Apache is usually configured to prevent access to `.ht*` files). - aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. - user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ +``` +aladdin:$apr1$ZjTqBB3f$IF9gdYAGlMrs2fuINjHsz. +user2:$apr1$O04r.y2H$/vEkesPhVInBByJUkXitA/ +``` ### Restricting access with nginx and basic authentication For nginx, you will need to specify a location that you are going to protect and the `auth_basic` directive that provides the name to the password-protected area. The `auth_basic_user_file` directive then points to a `.htpasswd` file containing the encrypted user credentials, just like in the Apache example above. - location /status { - auth_basic "Access to the staging site"; - auth_basic_user_file /etc/apache2/.htpasswd; - } +``` +location /status { + auth_basic "Access to the staging site"; + auth_basic_user_file /etc/apache2/.htpasswd; +} +``` ### Access using credentials in the URL Many clients also let you avoid the login prompt by using an encoded URL containing the username and the password like this: -```plain example-bad +```example-bad https://username:password@www.example.com/ ``` diff --git a/files/en-us/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.md b/files/en-us/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.md index 2b19e0098cfbc71..1aaae573690977a 100644 --- a/files/en-us/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.md +++ b/files/en-us/web/http/basics_of_http/choosing_between_www_and_non-www_urls/index.md @@ -45,7 +45,9 @@ It is possible to add a special HTML {{HTMLElement("link")}} element to a page t When adding such a tag, you serve the same content for both domains, telling search engines which URL is canonical. In the previous example, `http://www.example.org/whaddup` would serve the same content as `http://example.org/whaddup`, but with an additional {{htmlelement("link")}} element in the head: -`` +```html + +`` Unlike the previous case, browser history will consider non-www and www URLs as independent entries. diff --git a/files/en-us/web/http/basics_of_http/data_uris/index.md b/files/en-us/web/http/basics_of_http/data_uris/index.md index 73557779563b11e..0d577fce46a1d33 100644 --- a/files/en-us/web/http/basics_of_http/data_uris/index.md +++ b/files/en-us/web/http/basics_of_http/data_uris/index.md @@ -68,14 +68,14 @@ base64 a.txt>b.txt On Windows, [Convert.ToBase64String](https://docs.microsoft.com/en-us/dotnet/api/system.convert.tobase64string?view=net-5.0) from PowerShell can be used to perform the Base64 encoding: -```html +```bash [convert]::ToBase64String([Text.Encoding]::UTF8.GetBytes("hello")) # outputs to console: aGVsbG8= ``` Alternatively, a GNU/Linux shell (such as [WSL](https://en.wikipedia.org/wiki/Windows_Subsystem_for_Linux)) provides the utility `base64`: -```html +```bash bash$ echo -n hello | base64 # outputs to console: aGVsbG8= ``` @@ -84,11 +84,15 @@ bash$ echo -n hello | base64 This section describes problems that commonly occur when creating and using `data` URLs. - data:text/html,lots of text...

bottom?arg=val +``` +data:text/html,lots of text...

bottom?arg=val +``` This represents an HTML resource whose contents are: - lots of text...

bottom?arg=val +```html +lots of text...

bottom?arg=val +``` - Syntax - : The format for `data` URLs is very simple, but it's easy to forget to put a comma before the "data" segment, or to incorrectly encode the data into base64 format. @@ -119,5 +123,5 @@ This represents an HTML resource whose contents are: - [Percent encoding](/en-US/docs/Glossary/percent-encoding) - {{domxref("WindowOrWorkerGlobalScope/atob","atob()")}} - {{domxref("WindowOrWorkerGlobalScope/btoa","btoa()")}} -- [CSS `url()`]() +- [CSS `url()`](/en-US/docs/Web/CSS/url()) - [URI](/en-US/docs/Glossary/URI) diff --git a/files/en-us/web/http/basics_of_http/evolution_of_http/index.md b/files/en-us/web/http/basics_of_http/evolution_of_http/index.md index 761dd79b290937d..e1e3f02429e96f7 100644 --- a/files/en-us/web/http/basics_of_http/evolution_of_http/index.md +++ b/files/en-us/web/http/basics_of_http/evolution_of_http/index.md @@ -28,13 +28,17 @@ The HTTP protocol used in those early phases was very simple, later dubbed HTTP/ The initial version of HTTP had no version number; it has been later called 0.9 to differentiate it from the later versions. HTTP/0.9 is extremely simple: requests consist of a single line and start with the only possible method {{HTTPMethod("GET")}} followed by the path to the resource (not the URL as both the protocol, server, and port are unnecessary once connected to the server). - GET /mypage.html +``` +GET /mypage.html +``` The response is extremely simple too: it only consisted of the file itself. - - A very simple HTML page - +```html + +A very simple HTML page + +``` Unlike subsequent evolutions, there were no HTTP headers, meaning that only HTML files could be transmitted, but no other type of documents. There were no status or error codes: in case of a problem, a specific HTML file was sent back with the description of the problem contained in it, for human consumption. @@ -49,28 +53,32 @@ HTTP/0.9 was very limited and both browsers and servers quickly extended it to b At this point, a typical request and response looked like this: - GET /mypage.html HTTP/1.0 - User-Agent: NCSA_Mosaic/2.0 (Windows 3.1) +``` +GET /mypage.html HTTP/1.0 +User-Agent: NCSA_Mosaic/2.0 (Windows 3.1) - 200 OK - Date: Tue, 15 Nov 1994 08:12:31 GMT - Server: CERN/3.0 libwww/2.17 - Content-Type: text/html - - A page with an image - - +200 OK +Date: Tue, 15 Nov 1994 08:12:31 GMT +Server: CERN/3.0 libwww/2.17 +Content-Type: text/html + +A page with an image + + +``` Followed by a second connection and request to fetch the image (followed by a response to that request): - GET /myimage.gif HTTP/1.0 - User-Agent: NCSA_Mosaic/2.0 (Windows 3.1) +``` + GET /myimage.gif HTTP/1.0 + User-Agent: NCSA_Mosaic/2.0 (Windows 3.1) - 200 OK - Date: Tue, 15 Nov 1994 08:12:32 GMT - Server: CERN/3.0 libwww/2.17 - Content-Type: text/gif - (image content) + 200 OK + Date: Tue, 15 Nov 1994 08:12:32 GMT + Server: CERN/3.0 libwww/2.17 + Content-Type: text/gif + (image content) +``` These novelties have not been introduced as concerted effort, but as a try-and-see approach over the 1991-1995 period: a server and a browser added one feature and it saw if it got traction. A lot of interoperability problems were common. In November 1996, in order to solve these annoyances, an informational document describing the common practices has been published, {{RFC(1945)}}. This is the definition of HTTP/1.0 and it is notable that, in the narrow sense of the term, it isn't an official standard. @@ -89,47 +97,49 @@ HTTP/1.1 clarified ambiguities and introduced numerous improvements: A typical flow of requests, all through one single connection is now looking like this: - GET /en-US/docs/Glossary/Simple_header HTTP/1.1 - Host: developer.mozilla.org - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-US,en;q=0.5 - Accept-Encoding: gzip, deflate, br - Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header - - 200 OK - Connection: Keep-Alive - Content-Encoding: gzip - Content-Type: text/html; charset=utf-8 - Date: Wed, 20 Jul 2016 10:55:30 GMT - Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" - Keep-Alive: timeout=5, max=1000 - Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT - Server: Apache - Transfer-Encoding: chunked - Vary: Cookie, Accept-Encoding - - (content) - - GET /static/img/header-background.png HTTP/1.1 - Host: developer.mozilla.org - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 - Accept: */* - Accept-Language: en-US,en;q=0.5 - Accept-Encoding: gzip, deflate, br - Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header - - 200 OK - Age: 9578461 - Cache-Control: public, max-age=315360000 - Connection: keep-alive - Content-Length: 3077 - Content-Type: image/png - Date: Thu, 31 Mar 2016 13:34:46 GMT - Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT - Server: Apache - - (image content of 3077 bytes) +``` +GET /en-US/docs/Glossary/Simple_header HTTP/1.1 +Host: developer.mozilla.org +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-US,en;q=0.5 +Accept-Encoding: gzip, deflate, br +Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header + +200 OK +Connection: Keep-Alive +Content-Encoding: gzip +Content-Type: text/html; charset=utf-8 +Date: Wed, 20 Jul 2016 10:55:30 GMT +Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a" +Keep-Alive: timeout=5, max=1000 +Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT +Server: Apache +Transfer-Encoding: chunked +Vary: Cookie, Accept-Encoding + +(content) + +GET /static/img/header-background.png HTTP/1.1 +Host: developer.mozilla.org +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 +Accept: */* +Accept-Language: en-US,en;q=0.5 +Accept-Encoding: gzip, deflate, br +Referer: https://developer.mozilla.org/en-US/docs/Glossary/Simple_header + +200 OK +Age: 9578461 +Cache-Control: public, max-age=315360000 +Connection: keep-alive +Content-Length: 3077 +Content-Type: image/png +Date: Thu, 31 Mar 2016 13:34:46 GMT +Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT +Server: Apache + +(image content of 3077 bytes) +``` HTTP/1.1 was first published as {{rfc(2068)}} in January 1997. diff --git a/files/en-us/web/http/basics_of_http/identifying_resources_on_the_web/index.md b/files/en-us/web/http/basics_of_http/identifying_resources_on_the_web/index.md index 4f08d9c99833995..1ee1ed9904f0e3c 100644 --- a/files/en-us/web/http/basics_of_http/identifying_resources_on_the_web/index.md +++ b/files/en-us/web/http/basics_of_http/identifying_resources_on_the_web/index.md @@ -26,22 +26,28 @@ The target of an HTTP request is called a "resource", whose nature isn't defined The most common form of URI is the Uniform Resource Locator ({{Glossary("URL")}}), which is known as the _web address_. - https://developer.mozilla.org - https://developer.mozilla.org/en-US/docs/Learn/ - https://developer.mozilla.org/en-US/search?q=URL +``` +https://developer.mozilla.org +https://developer.mozilla.org/en-US/docs/Learn/ +https://developer.mozilla.org/en-US/search?q=URL +``` Any of those URLs can be typed into your browser's address bar to tell it to load the associated page (resource). A URL is composed of different parts, some mandatory and others are optional. A more complex example might look like this: - http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument +``` +http://www.example.com:80/path/to/myfile.html?key1=value1&key2=value2#SomewhereInTheDocument +``` ### URNs -A Uniform Resource Name (URN) is a URI that identifies a resource by name in a particular namespace. +A Uniform Resource Name (URN) is a URI that identifies a resource by name in a particular namespace. - urn:isbn:9780141036144 - urn:ietf:rfc:7230 +``` +urn:isbn:9780141036144 +urn:ietf:rfc:7230 +``` The two URNs correspond to @@ -102,12 +108,14 @@ FTP is still acceptable at the top level (such as typed directly into the browse ## Examples - https://developer.mozilla.org/en-US/docs/Learn - tel:+1-816-555-1212 - git@github.com:mdn/browser-compat-data.git - ftp://example.org/resource.txt - urn:isbn:9780141036144 - mailto:help@supercyberhelpdesk.info +``` +https://developer.mozilla.org/en-US/docs/Learn +tel:+1-816-555-1212 +git@github.com:mdn/browser-compat-data.git +ftp://example.org/resource.txt +urn:isbn:9780141036144 +mailto:help@supercyberhelpdesk.info +``` ## Specifications diff --git a/files/en-us/web/http/basics_of_http/mime_types/index.md b/files/en-us/web/http/basics_of_http/mime_types/index.md index 910725acf3b3b24..2b3cee70ce4c468 100644 --- a/files/en-us/web/http/basics_of_http/mime_types/index.md +++ b/files/en-us/web/http/basics_of_http/mime_types/index.md @@ -41,7 +41,7 @@ The simplest MIME type consists of a _type_ and a _subtype_; these are each strings which, when concatenated with a slash (`/`) between them, comprise a MIME type. No whitespace is allowed in a MIME type: -```html +``` type/subtype ``` @@ -58,7 +58,7 @@ and a subtype, never just one or the other. An optional **parameter** can be added to provide additional details: -```html +``` type/subtype;parameter=value ``` @@ -299,7 +299,7 @@ As a multipart document format, it consists of different parts, delimited by a b its own HTTP headers, {{HTTPHeader("Content-Disposition")}}, and {{HTTPHeader("Content-Type")}} for file uploading fields. -```html +``` Content-Type: multipart/form-data; boundary=aBoundaryString (other headers associated with the multipart document as a whole) @@ -330,31 +330,33 @@ The following `

`: will send this message: - POST / HTTP/1.1 - Host: localhost:8000 - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-US,en;q=0.5 - Accept-Encoding: gzip, deflate - Connection: keep-alive - Upgrade-Insecure-Requests: 1 - Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 - Content-Length: 465 - - -----------------------------8721656041911415653955004498 - Content-Disposition: form-data; name="myTextField" - - Test - -----------------------------8721656041911415653955004498 - Content-Disposition: form-data; name="myCheckBox" - - on - -----------------------------8721656041911415653955004498 - Content-Disposition: form-data; name="myFile"; filename="test.txt" - Content-Type: text/plain - - Simple file. - -----------------------------8721656041911415653955004498-- +``` +POST / HTTP/1.1 +Host: localhost:8000 +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-US,en;q=0.5 +Accept-Encoding: gzip, deflate +Connection: keep-alive +Upgrade-Insecure-Requests: 1 +Content-Type: multipart/form-data; boundary=---------------------------8721656041911415653955004498 +Content-Length: 465 + +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myTextField" + +Test +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myCheckBox" + +on +-----------------------------8721656041911415653955004498 +Content-Disposition: form-data; name="myFile"; filename="test.txt" +Content-Type: text/plain + +Simple file. +-----------------------------8721656041911415653955004498-- +``` ### multipart/byteranges @@ -368,26 +370,28 @@ requested ranges. Like other multipart types, the {{HTTPHeader("Content-Type")}} {{HTTPHeader("Content-Type")}} header with its actual type and a {{HTTPHeader("Content-Range")}} of the range it represents. - HTTP/1.1 206 Partial Content - Accept-Ranges: bytes - Content-Type: multipart/byteranges; boundary=3d6b6a416f9b5 - Content-Length: 385 - - --3d6b6a416f9b5 - Content-Type: text/html - Content-Range: bytes 100-200/1270 - - eta http-equiv="Content-type" content="text/html; charset=utf-8" /> - + ``` An example: - resource://gre/res/svg.css +``` +resource://gre/res/svg.css +``` When arrows are found in the resource URL's ('->'), it means that the first file loaded the next one: - resource:// -> +``` +resource:// -> +``` Please refer to [Identifying resources on the web](/en-US/docs/Web/HTTP/Basics_of_HTTP/Identifying_resources_on_the_Web) for more general details. @@ -51,7 +55,9 @@ running on the site (you can find the code in **Note:** It is recommended that web and extension developers don't try diff --git a/files/en-us/web/http/caching/index.md b/files/en-us/web/http/caching/index.md index 2dc9d3da2a1dfe0..53cb1a5b2d4215b 100644 --- a/files/en-us/web/http/caching/index.md +++ b/files/en-us/web/http/caching/index.md @@ -50,13 +50,17 @@ The {{HTTPHeader("Cache-Control")}} HTTP/1.1 general-header field is used to spe The cache should not store anything about the client request or server response. A request is sent to the server and a full response is downloaded each and every time. - Cache-Control: no-store +``` +Cache-Control: no-store +``` #### Cache but revalidate A cache will send the request to the origin server for validation before releasing a cached copy. - Cache-Control: no-cache +``` +Cache-Control: no-cache +``` #### Private and public caches @@ -64,8 +68,10 @@ The "public" directive indicates that the response may be cached by any cache. T On the other hand, "private" indicates that the response is intended for a single user only and must not be stored by a shared cache. A private browser cache may store the response in this case. - Cache-Control: private - Cache-Control: public +``` +Cache-Control: private +Cache-Control: public +``` #### Expiration @@ -73,13 +79,17 @@ The most important directive here is `max-age=`, which is the maximum a For more details, see also the [Freshness](#freshness) section below. - Cache-Control: max-age=31536000 +``` +Cache-Control: max-age=31536000 +``` #### Validation When using the "`must-revalidate`" directive, the cache must verify the status of the stale resources before using it and expired ones should not be used. For more details, see the [Validation](#cache_validation) section below. - Cache-Control: must-revalidate +``` +Cache-Control: must-revalidate +``` ### The `Pragma` header @@ -103,7 +113,9 @@ If an origin server does not explicitly specify freshness (e.g. using {{HTTPHea In this case look for a {{HTTPHeader("Last-Modified")}} header. If this header is present, then the cache's freshness lifetime is equal to the value of the `Date` header minus the value of the `Last-modified` header divided by 10. The expiration time is computed as follows: - expirationTime = responseTime + freshnessLifetime - currentAge +``` +expirationTime = responseTime + freshnessLifetime - currentAge +``` where `responseTime` is the time at which the response was received according to the browser. For more information see [RFC 7234: Hypertext Transfer Protocol (HTTP/1.1): 4.2.2.  Calculating Heuristic Freshness](https://datatracker.ietf.org/doc/html/rfc7234#section-4.2.2). @@ -143,13 +155,17 @@ When a cache receives a request that has a `Vary` header field, it must not use ![The Vary header leads cache to use more HTTP headers as key for the cache.](http_vary.png)This feature is commonly used to allow a resource to be cached in uncompressed and (various) compressed forms, and served appropriately to user agents based on the encodings that they support. For example, a server can set `Vary: Accept-Encoding` to ensure that a separate version of a resource is cached for all requests that specify support for a particular set of encodings, e.g. `Accept-Encoding: gzip,deflate,sdch`. - Vary: Accept-Encoding +``` +Vary: Accept-Encoding +``` > **Note:** Use `Vary` with care—it can easily reduce the effectiveness of caching! A caching server should use [normalization](#normalization) to reduce duplicated cache entries and unnecessary requests to the origin server. This is particularly true when using `Vary` with headers and header values that can have many values. The `Vary` header can also be useful for serving different content to desktop and mobile users, or to allow search engines to discover the mobile version of a page (and perhaps also tell them that no [Cloaking](https://en.wikipedia.org/wiki/Cloaking) is intended). This is usually achieved with the `Vary: User-Agent` header, and works because the {{HTTPHeader("User-Agent")}} header value is different for mobile and desktop clients. - Vary: User-Agent +``` +Vary: User-Agent +``` ### Normalization @@ -159,16 +175,18 @@ For example, by default all of the following result in a separate request to the To avoid unnecessary requests and duplicated cache entries, caching servers should use **normalization** to pre-process the request and cache only files that are needed. For example, in the case of `Accept-Encoding` you could check for `gzip` and other compression types in the header before doing further processing, and otherwise unset the header. In "pseudo code" this might look like: - // Normalize Accept-Encoding - if (req.http.Accept-Encoding) { - if (req.http.Accept-Encoding ~ "gzip") { - set req.http.Accept-Encoding = "gzip"; - } -   // elsif other encoding types to check - else { - unset req.http.Accept-Encoding; - } - } +``` +// Normalize Accept-Encoding +if (req.http.Accept-Encoding) { + if (req.http.Accept-Encoding ~ "gzip") { + set req.http.Accept-Encoding = "gzip"; + } +  // elsif other encoding types to check + else { + unset req.http.Accept-Encoding; + } +} +``` `User-Agent` has even more variation than `Accept-Encoding`. So if using `Vary: User-Agent` for caching mobile/desktop variants of files you'd similarly check for the presence of `"mobile"` and `"desktop"` in the request `User-Agent` header, and then clear it. diff --git a/files/en-us/web/http/configuring_servers_for_ogg_media/index.md b/files/en-us/web/http/configuring_servers_for_ogg_media/index.md index ea9d1d65ad3bbc5..4c1617efbe667ac 100644 --- a/files/en-us/web/http/configuring_servers_for_ogg_media/index.md +++ b/files/en-us/web/http/configuring_servers_for_ogg_media/index.md @@ -24,9 +24,11 @@ Most servers don't by default serve Ogg media with the correct MIME types, so y For Apache, you can add the following to your configuration: - AddType audio/ogg .oga - AddType video/ogg .ogv - AddType application/ogg .ogg +``` +AddType audio/ogg .oga +AddType video/ogg .ogv +AddType application/ogg .ogg +``` You can find specific information about possible media file types and the codecs used within them in our comprehensive [guide to media types and formats on the web](/en-US/docs/Web/Media/Formats). In particular, the article on [media container formats](/en-US/docs/Web/Media/Formats/Containers) will be especially helpful when configuring servers to host media properly. @@ -64,7 +66,9 @@ There are two ways Gecko can do this. The best way is to offer an `X-Content-Dur For example, if the video is 1 minute and 32.6 seconds long, this header would be: - X-Content-Duration: 92.6 +``` +X-Content-Duration: 92.6 +``` If your server provides the `X-Content-Duration` header when serving Ogg media, Gecko doesn't have to do any extra HTTP requests to seek to the end of the file to calculate its duration. This makes the entire process much more efficient as well as more accurate. @@ -82,24 +86,26 @@ Another probelm with allowing HTTP compression for media streaming: Apache serve You can use the `oggz-info` tool to get the media duration; this tool is included with the [`oggz-tools`](https://www.xiph.org/oggz/) package. The output from `oggz-info` looks like this: - $ oggz-info /g/media/bruce_vs_ironman.ogv - Content-Duration: 00:01:00.046 - - Skeleton: serialno 1976223438 - 4 packets in 3 pages, 1.3 packets/page, 27.508% Ogg overhead - Presentation-Time: 0.000 - Basetime: 0.000 - - Theora: serialno 0170995062 - 1790 packets in 1068 pages, 1.7 packets/page, 1.049% Ogg overhead - Video-Framerate: 29.983 fps - Video-Width: 640 - Video-Height: 360 - - Vorbis: serialno 0708996688 - 4531 packets in 167 pages, 27.1 packets/page, 1.408% Ogg overhead - Audio-Samplerate: 44100 Hz - Audio-Channels: 2 +``` +$ oggz-info /g/media/bruce_vs_ironman.ogv +Content-Duration: 00:01:00.046 + +Skeleton: serialno 1976223438 + 4 packets in 3 pages, 1.3 packets/page, 27.508% Ogg overhead + Presentation-Time: 0.000 + Basetime: 0.000 + +Theora: serialno 0170995062 + 1790 packets in 1068 pages, 1.7 packets/page, 1.049% Ogg overhead + Video-Framerate: 29.983 fps + Video-Width: 640 + Video-Height: 360 + +Vorbis: serialno 0708996688 + 4531 packets in 167 pages, 27.1 packets/page, 1.408% Ogg overhead + Audio-Samplerate: 44100 Hz + Audio-Channels: 2 +``` Note that you can't serve up the reported Content-Duration line reported by `oggz-info`, because it's reported in HH:MM:SS format. You'll need to convert it to seconds only, then serve that as your `X-Content-Duration` value. Just parse out the HH, MM, and SS into numbers, then do (HH\*3600)+(MM\*60)+SS to get the value you should report. diff --git a/files/en-us/web/http/cookies/index.md b/files/en-us/web/http/cookies/index.md index 6ddc8eb296466ab..0ae8e67e5f200b1 100644 --- a/files/en-us/web/http/cookies/index.md +++ b/files/en-us/web/http/cookies/index.md @@ -51,18 +51,21 @@ Set-Cookie: = This shows the server sending headers to tell the client to store a pair of cookies: - HTTP/2.0 200 OK - Content-Type: text/html - Set-Cookie: yummy_cookie=choco - Set-Cookie: tasty_cookie=strawberry +``` +HTTP/2.0 200 OK +Content-Type: text/html +Set-Cookie: yummy_cookie=choco +Set-Cookie: tasty_cookie=strawberry - [page content] +[page content] +``` Then, with every subsequent request to the server, the browser sends back all previously stored cookies to the server using the {{HTTPHeader("Cookie")}} header. - GET /sample_page.html HTTP/2.0 - Host: www.example.org - Cookie: yummy_cookie=choco; tasty_cookie=strawberry +```GET /sample_page.html HTTP/2.0 +Host: www.example.org +Cookie: yummy_cookie=choco; tasty_cookie=strawberry +``` > **Note:** Here's how to use the `Set-Cookie` header in various server-side applications: > @@ -80,7 +83,9 @@ The lifetime of a cookie can be defined in two ways: For example: - Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT; +``` +Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT; +``` > **Note:** When an `Expires` date is set, the time and date set is relative to the client the cookie is being set on, not the server. @@ -96,7 +101,9 @@ A cookie with the `HttpOnly` attribute is inaccessible to the JavaScript {{domxr Here is an example: - Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly +``` +Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly +``` ### Define where cookies are sent @@ -126,7 +133,9 @@ It takes three possible values: `Strict`, `Lax`, and `None`. With `Strict`, the Here is an example: - Set-Cookie: mykey=myvalue; SameSite=Strict +``` +Set-Cookie: mykey=myvalue; SameSite=Strict +``` > **Note:** Standard related to `SameSite` recently changed (MDN documents the new behavior above). See the cookies [Browser compatibility](/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite#browser_compatibility) table for information about how the attribute is handled in specific browser versions: > diff --git a/files/en-us/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md b/files/en-us/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md index ff21cb90ef6e559..7c0e4afbdac03a5 100644 --- a/files/en-us/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md +++ b/files/en-us/web/http/cors/errors/corsalloworiginnotmatchingorigin/index.md @@ -18,18 +18,16 @@ tags: ## Reason -```html +``` Reason: CORS header 'Access-Control-Allow-Origin' does not match 'xyz' ``` ## What went wrong? -The origin making the request does not match the origin permitted by the {{HTTPHeader("Access-Control-Allow-Origin")}} header. This error can also occur if the response includes more than one -`Access-Control-Allow-Origin` header. +The origin making the request does not match the origin permitted by the {{HTTPHeader("Access-Control-Allow-Origin")}} header. This error can also occur if the response includes more than one `Access-Control-Allow-Origin` header. If the service your code is accessing uses a CORS request under your control, make -sure it is configured to include your origin in its -`Access-Control-Allow-Origin` header. In addition, confirm that only one such header is +sure it is configured to include your origin in its `Access-Control-Allow-Origin` header. In addition, confirm that only one such header is included in responses, and that it includes only a single origin. For example, in Apache, add a line such as the following to the server's configuration @@ -39,11 +37,15 @@ configuration is typically found in a `.conf` file (`httpd.conf` and `apache.conf` are common names for these), or in an `.htaccess` file. - Header set Access-Control-Allow-Origin 'origin' +``` +Header set Access-Control-Allow-Origin 'origin' +``` For Nginx, the command to set up this header is: - add_header 'Access-Control-Allow-Origin' 'origin' +``` +add_header 'Access-Control-Allow-Origin' 'origin' +``` ## See also diff --git a/files/en-us/web/http/cors/errors/corsdidnotsucceed/index.md b/files/en-us/web/http/cors/errors/corsdidnotsucceed/index.md index dcd7936cb29e19a..f412fe0eaee36bd 100644 --- a/files/en-us/web/http/cors/errors/corsdidnotsucceed/index.md +++ b/files/en-us/web/http/cors/errors/corsdidnotsucceed/index.md @@ -18,7 +18,7 @@ tags: ## Reason -```html +``` Reason: CORS request did not succeed ``` diff --git a/files/en-us/web/http/cors/errors/corsdisabled/index.md b/files/en-us/web/http/cors/errors/corsdisabled/index.md index 4dfb9f11608b7ad..e412b4e66d634fd 100644 --- a/files/en-us/web/http/cors/errors/corsdisabled/index.md +++ b/files/en-us/web/http/cors/errors/corsdisabled/index.md @@ -24,7 +24,7 @@ tags: ## Reason -```html +``` Reason: CORS disabled ``` diff --git a/files/en-us/web/http/cors/errors/corsexternalredirectnotallowed/index.md b/files/en-us/web/http/cors/errors/corsexternalredirectnotallowed/index.md index 80d2d22daf8d6b5..be7b138da1f501f 100644 --- a/files/en-us/web/http/cors/errors/corsexternalredirectnotallowed/index.md +++ b/files/en-us/web/http/cors/errors/corsexternalredirectnotallowed/index.md @@ -18,7 +18,7 @@ tags: ## Reason -```html +``` Reason: CORS request external redirect not allowed ``` diff --git a/files/en-us/web/http/cors/errors/corsinvalidallowheader/index.md b/files/en-us/web/http/cors/errors/corsinvalidallowheader/index.md index f18f17cc9988eb1..f86500997858dc9 100644 --- a/files/en-us/web/http/cors/errors/corsinvalidallowheader/index.md +++ b/files/en-us/web/http/cors/errors/corsinvalidallowheader/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ +``` +Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Headers' ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsinvalidallowmethod/index.md b/files/en-us/web/http/cors/errors/corsinvalidallowmethod/index.md index 4e10d3b19dcad9f..e27ed6c6e8f3f71 100644 --- a/files/en-us/web/http/cors/errors/corsinvalidallowmethod/index.md +++ b/files/en-us/web/http/cors/errors/corsinvalidallowmethod/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: invalid token ‘xyz’ in CORS header ‘Access-Control-Allow-Methods’ +``` +Reason: invalid token 'xyz' in CORS header 'Access-Control-Allow-Methods' ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsmethodnotfound/index.md b/files/en-us/web/http/cors/errors/corsmethodnotfound/index.md index 1717761cdebfb44..dfb87c901f59f42 100644 --- a/files/en-us/web/http/cors/errors/corsmethodnotfound/index.md +++ b/files/en-us/web/http/cors/errors/corsmethodnotfound/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: Did not find method in CORS header ‘Access-Control-Allow-Methods’ +``` +Reason: Did not find method in CORS header 'Access-Control-Allow-Methods' ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsmissingallowcredentials/index.md b/files/en-us/web/http/cors/errors/corsmissingallowcredentials/index.md index 6f89fe8c4984670..812cf20163db036 100644 --- a/files/en-us/web/http/cors/errors/corsmissingallowcredentials/index.md +++ b/files/en-us/web/http/cors/errors/corsmissingallowcredentials/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: expected ‘true’ in CORS header ‘Access-Control-Allow-Credentials’ +``` +Reason: expected 'true' in CORS header 'Access-Control-Allow-Credentials' ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.md b/files/en-us/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.md index 35324bd84f68cbc..1e42209430616e5 100644 --- a/files/en-us/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.md +++ b/files/en-us/web/http/cors/errors/corsmissingallowheaderfrompreflight/index.md @@ -20,8 +20,8 @@ tags: ## Reason -```html -Reason: missing token ‘xyz’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel +``` +Reason: missing token 'xyz' in CORS header 'Access-Control-Allow-Headers' from CORS preflight channel ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsmissingalloworigin/index.md b/files/en-us/web/http/cors/errors/corsmissingalloworigin/index.md index 71c7911c33b401f..8ffef8dd4b16715 100644 --- a/files/en-us/web/http/cors/errors/corsmissingalloworigin/index.md +++ b/files/en-us/web/http/cors/errors/corsmissingalloworigin/index.md @@ -18,7 +18,7 @@ tags: ## Reason -```html +``` Reason: CORS header 'Access-Control-Allow-Origin' missing ``` @@ -35,7 +35,9 @@ header's value. For example, to allow a site at https\://amazing.site to access the resource using CORS, the header should be: - Access-Control-Allow-Origin: https://amazing.site +``` +Access-Control-Allow-Origin: https://amazing.site +``` You can also configure a site to allow any site to access it by using the `*` wildcard. You should only use this for public APIs. Private APIs should @@ -44,7 +46,9 @@ addition, the wildcard only works for requests made with the {{htmlattrxref("crossorigin")}} attribute set to `anonymous`, and it prevents sending credentials like cookies in requests. - Access-Control-Allow-Origin: * +``` +Access-Control-Allow-Origin: * +``` > **Warning:** Using the wildcard to allow all sites to access a private > API is a bad idea. @@ -63,11 +67,15 @@ configuration is typically found in a `.conf` file (`httpd.conf` and `apache.conf` are common names for these), or in an `.htaccess` file. - Header set Access-Control-Allow-Origin 'origin-list' +``` +Header set Access-Control-Allow-Origin 'origin-list' +``` For Nginx, the command to set up this header is: - add_header 'Access-Control-Allow-Origin' 'origin-list'; +``` +add_header 'Access-Control-Allow-Origin' 'origin-list'; +``` ## See also diff --git a/files/en-us/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md b/files/en-us/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md index 530d6b73e7b98ca..10df2a15fde3683 100644 --- a/files/en-us/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md +++ b/files/en-us/web/http/cors/errors/corsmultiplealloworiginnotallowed/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: Multiple CORS header ‘Access-Control-Allow-Origin’ not allowed +``` +Reason: Multiple CORS header 'Access-Control-Allow-Origin' not allowed ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsnotsupportingcredentials/index.md b/files/en-us/web/http/cors/errors/corsnotsupportingcredentials/index.md index 835a1fed02fd3fa..f9d3febcb2804ca 100644 --- a/files/en-us/web/http/cors/errors/corsnotsupportingcredentials/index.md +++ b/files/en-us/web/http/cors/errors/corsnotsupportingcredentials/index.md @@ -20,8 +20,8 @@ tags: ## Reason -```html -Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’ +``` +Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*' ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corsoriginheadernotadded/index.md b/files/en-us/web/http/cors/errors/corsoriginheadernotadded/index.md index f86ad85b15f6ae9..3416f99f64be374 100644 --- a/files/en-us/web/http/cors/errors/corsoriginheadernotadded/index.md +++ b/files/en-us/web/http/cors/errors/corsoriginheadernotadded/index.md @@ -18,8 +18,8 @@ tags: ## Reason -```html -Reason: CORS header ‘Origin’ cannot be added +``` +Reason: CORS header 'Origin' cannot be added ``` ## What went wrong? diff --git a/files/en-us/web/http/cors/errors/corspreflightdidnotsucceed/index.md b/files/en-us/web/http/cors/errors/corspreflightdidnotsucceed/index.md index aa24b1187925652..c23239369200c26 100644 --- a/files/en-us/web/http/cors/errors/corspreflightdidnotsucceed/index.md +++ b/files/en-us/web/http/cors/errors/corspreflightdidnotsucceed/index.md @@ -18,13 +18,13 @@ tags: ## Reason -```html +``` Reason: CORS preflight channel did not succeed ``` ## What went wrong? -The {{Glossary("CORS")}} request requires  preflight, preflighting could not be +The {{Glossary("CORS")}} request requires preflight, preflighting could not be performed. There are a couple of reasons why preflighting might fail: - A cross-site request has previously been performed that already did a preflight, and diff --git a/files/en-us/web/http/cors/errors/corsrequestnothttp/index.md b/files/en-us/web/http/cors/errors/corsrequestnothttp/index.md index 3f608973724c1f4..d05def3fdbea140 100644 --- a/files/en-us/web/http/cors/errors/corsrequestnothttp/index.md +++ b/files/en-us/web/http/cors/errors/corsrequestnothttp/index.md @@ -18,7 +18,7 @@ tags: ## Reason -```html +``` Reason: CORS request not HTTP ``` diff --git a/files/en-us/web/http/cors/errors/index.md b/files/en-us/web/http/cors/errors/index.md index 64e127f3740b4b0..21816e6618b85e4 100644 --- a/files/en-us/web/http/cors/errors/index.md +++ b/files/en-us/web/http/cors/errors/index.md @@ -29,15 +29,17 @@ To understand the underlying issue with the CORS configuration, you need to find The text of the error message will be something similar to the following: - Cross-Origin Request Blocked: The Same Origin Policy disallows - reading the remote resource at https://some-url-here. (Reason: - additional information here). +``` +Cross-Origin Request Blocked: The Same Origin Policy disallows +reading the remote resource at https://some-url-here. (Reason: +additional information here). +```` > **Note:** For security reasons, specifics about what went wrong with a CORS request _are not available to JavaScript code_. All the code knows is that an error occurred. The only way to determine what specifically went wrong is to look at the browser's console for details. ## CORS error messages -Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong.  The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions. +Firefox's console displays messages in its console when requests fail due to CORS. Part of the error text is a "reason" message that provides added insight into what went wrong. The reason messages are listed below; click the message to open an article explaining the error in more detail and offering possible solutions. - [Reason: CORS disabled](/en-US/docs/Web/HTTP/CORS/Errors/CORSDisabled) - [Reason: CORS request did not succeed](/en-US/docs/Web/HTTP/CORS/Errors/CORSDidNotSucceed) diff --git a/files/en-us/web/http/cors/index.md b/files/en-us/web/http/cors/index.md index 031b6535f4cae78..2d69dd383e555fd 100644 --- a/files/en-us/web/http/cors/index.md +++ b/files/en-us/web/http/cors/index.md @@ -58,7 +58,7 @@ We present three scenarios that demonstrate how Cross-Origin Resource Sharing wo ### Simple requests -Some requests don't trigger a {{Glossary("Preflight_request","CORS preflight")}}. Those are called _simple requests_, though the {{SpecName('Fetch')}} spec (which defines CORS) doesn't use that term. A _simple request_ is one that **meets all the following conditions**: +Some requests don't trigger a {{Glossary("Preflight_request","CORS preflight")}}. Those are called _simple requests_, though the {{SpecName("Fetch")}} spec (which defines CORS) doesn't use that term. A _simple request_ is one that **meets all the following conditions**: - One of the allowed methods: @@ -107,31 +107,35 @@ This performs a simple exchange between the client and the server, using CORS he Let's look at what the browser will send to the server in this case, and let's see how the server responds: - GET /resources/public-data/ HTTP/1.1 - Host: bar.other - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-us,en;q=0.5 - Accept-Encoding: gzip,deflate - Connection: keep-alive - Origin: https://foo.example +``` +GET /resources/public-data/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Origin: https://foo.example +``` The request header of note is {{HTTPHeader("Origin")}}, which shows that the invocation is coming from `https://foo.example`. - HTTP/1.1 200 OK - Date: Mon, 01 Dec 2008 00:23:53 GMT - Server: Apache/2 - Access-Control-Allow-Origin: * - Keep-Alive: timeout=2, max=100 - Connection: Keep-Alive - Transfer-Encoding: chunked - Content-Type: application/xml +``` +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 00:23:53 GMT +Server: Apache/2 +Access-Control-Allow-Origin: * +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Transfer-Encoding: chunked +Content-Type: application/xml - […XML Data…] +[…XML Data…] +``` In response, the server sends back an {{HTTPHeader("Access-Control-Allow-Origin")}} header with `Access-Control-Allow-Origin: *`, which means that the resource can be accessed by **any** origin. -```html +``` Access-Control-Allow-Origin: * ``` @@ -164,41 +168,47 @@ The example above creates an XML body to send with the `POST` request. Also, a n Let's look at the full exchange between client and server. The first exchange is the _preflight request/response_: - OPTIONS /doc HTTP/1.1 - Host: bar.other - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-us,en;q=0.5 - Accept-Encoding: gzip,deflate - Connection: keep-alive - Origin: https://foo.example - Access-Control-Request-Method: POST - Access-Control-Request-Headers: X-PINGOTHER, Content-Type - - HTTP/1.1 204 No Content - Date: Mon, 01 Dec 2008 01:15:39 GMT - Server: Apache/2 - Access-Control-Allow-Origin: https://foo.example - Access-Control-Allow-Methods: POST, GET, OPTIONS - Access-Control-Allow-Headers: X-PINGOTHER, Content-Type - Access-Control-Max-Age: 86400 - Vary: Accept-Encoding, Origin - Keep-Alive: timeout=2, max=100 - Connection: Keep-Alive +```plain +OPTIONS /doc HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Origin: https://foo.example +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type + +HTTP/1.1 204 No Content +Date: Mon, 01 Dec 2008 01:15:39 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +Vary: Accept-Encoding, Origin +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +``` Lines 1 - 10 above represent the preflight request with the {{HTTPMethod("OPTIONS")}} method. The browser determines that it needs to send this based on the request parameters that the JavaScript code snippet above was using, so that the server can respond whether it is acceptable to send the request with the actual request parameters. OPTIONS is an HTTP/1.1 method that is used to determine further information from servers, and is a {{Glossary("Safe/HTTP", "safe")}} method, meaning that it can't be used to change the resource. Note that along with the OPTIONS request, two other request headers are sent (lines 9 and 10 respectively): - Access-Control-Request-Method: POST - Access-Control-Request-Headers: X-PINGOTHER, Content-Type +``` +Access-Control-Request-Method: POST +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +``` The {{HTTPHeader("Access-Control-Request-Method")}} header notifies the server as part of a preflight request that when the actual request is sent, it will be sent with a `POST` request method. The {{HTTPHeader("Access-Control-Request-Headers")}} header notifies the server that when the actual request is sent, it will be sent with a `X-PINGOTHER` and `Content-Type` custom headers. The server now has an opportunity to determine whether it wishes to accept a request under these circumstances. Lines 13 - 22 above are the response that the server sends back, which indicate that the request method (`POST`) and request headers (`X-PINGOTHER`) are acceptable. In particular, let's look at lines 16-19: - Access-Control-Allow-Origin: https://foo.example - Access-Control-Allow-Methods: POST, GET, OPTIONS - Access-Control-Allow-Headers: X-PINGOTHER, Content-Type - Access-Control-Max-Age: 86400 +``` +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Headers: X-PINGOTHER, Content-Type +Access-Control-Max-Age: 86400 +``` The server responds with `Access-Control-Allow-Origin: https://foo.example`, restricting access to just the requesting origin domain. It also responds with `Access-Control-Allow-Methods`, which says that `POST` and `GET` are viable methods to query the resource in question (this header is similar to the {{HTTPHeader("Allow")}} response header, but used strictly within the context of access control). @@ -208,43 +218,44 @@ Finally, {{HTTPHeader("Access-Control-Max-Age")}} gives the value in seconds for Once the preflight request is complete, the real request is sent: - POST /doc HTTP/1.1 - Host: bar.other - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-us,en;q=0.5 - Accept-Encoding: gzip,deflate - Connection: keep-alive - X-PINGOTHER: pingpong - Content-Type: text/xml; charset=UTF-8 - Referer: https://foo.example/examples/preflightInvocation.html - Content-Length: 55 - Origin: https://foo.example - Pragma: no-cache - Cache-Control: no-cache - - Arun - - HTTP/1.1 200 OK - Date: Mon, 01 Dec 2008 01:15:40 GMT - Server: Apache/2 - Access-Control-Allow-Origin: https://foo.example - Vary: Accept-Encoding, Origin - Content-Encoding: gzip - Content-Length: 235 - Keep-Alive: timeout=2, max=99 - Connection: Keep-Alive - Content-Type: text/plain - - [Some XML payload] +```plain +POST /doc HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +X-PINGOTHER: pingpong +Content-Type: text/xml; charset=UTF-8 +Referer: https://foo.example/examples/preflightInvocation.html +Content-Length: 55 +Origin: https://foo.example +Pragma: no-cache +Cache-Control: no-cache + +Arun + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:15:40 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 235 +Keep-Alive: timeout=2, max=99 +Connection: Keep-Alive +Content-Type: text/plain + +[Some XML payload] +``` #### Preflighted requests and redirects Not all browsers currently support following redirects after a preflighted request. If a redirect occurs after a preflighted request, some browsers currently will report an error message such as the following. -> The request was redirected to 'https\://example.com/foo', which is disallowed for cross-origin requests that require preflight - -> Request requires preflight, which is disallowed to follow cross-origin redirect +> The request was redirected to 'https\://example.com/foo', which is disallowed for cross-origin requests that require preflight. +> Request requires preflight, which is disallowed to follow cross-origin redirect. The CORS protocol originally required that behavior but [was subsequently changed to no longer require it](https://github.com/whatwg/fetch/commit/0d9a4db8bc02251cc9e391543bb3c1322fb882f2). However, not all browsers have implemented the change, and so still exhibit the behavior that was originally required. @@ -288,33 +299,35 @@ Line 7 shows the flag on {{domxref("XMLHttpRequest")}} that has to be set in ord Here is a sample exchange between client and server: - GET /resources/credentialed-content/ HTTP/1.1 - Host: bar.other - User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 - Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 - Accept-Language: en-us,en;q=0.5 - Accept-Encoding: gzip,deflate - Connection: keep-alive - Referer: https://foo.example/examples/credential.html - Origin: https://foo.example - Cookie: pageAccess=2 - - HTTP/1.1 200 OK - Date: Mon, 01 Dec 2008 01:34:52 GMT - Server: Apache/2 - Access-Control-Allow-Origin: https://foo.example - Access-Control-Allow-Credentials: true - Cache-Control: no-cache - Pragma: no-cache - Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT - Vary: Accept-Encoding, Origin - Content-Encoding: gzip - Content-Length: 106 - Keep-Alive: timeout=2, max=100 - Connection: Keep-Alive - Content-Type: text/plain - - [text/plain payload] +```plain +GET /resources/credentialed-content/ HTTP/1.1 +Host: bar.other +User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:71.0) Gecko/20100101 Firefox/71.0 +Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 +Accept-Language: en-us,en;q=0.5 +Accept-Encoding: gzip,deflate +Connection: keep-alive +Referer: https://foo.example/examples/credential.html +Origin: https://foo.example +Cookie: pageAccess=2 + +HTTP/1.1 200 OK +Date: Mon, 01 Dec 2008 01:34:52 GMT +Server: Apache/2 +Access-Control-Allow-Origin: https://foo.example +Access-Control-Allow-Credentials: true +Cache-Control: no-cache +Pragma: no-cache +Set-Cookie: pageAccess=3; expires=Wed, 31-Dec-2008 01:34:53 GMT +Vary: Accept-Encoding, Origin +Content-Encoding: gzip +Content-Length: 106 +Keep-Alive: timeout=2, max=100 +Connection: Keep-Alive +Content-Type: text/plain + +[text/plain payload] +``` Although line 10 contains the Cookie destined for the content on `https://bar.other`, if bar.other did not respond with an {{HTTPHeader("Access-Control-Allow-Credentials")}}`: true` (line 17) the response would be ignored and not made available to web content. @@ -350,14 +363,18 @@ This section lists the HTTP response headers that servers send back for access c A returned resource may have one {{HTTPHeader("Access-Control-Allow-Origin")}} header, with the following syntax: - Access-Control-Allow-Origin: | * +``` +Access-Control-Allow-Origin: | * +``` `Access-Control-Allow-Origin` specifies either a single origin, which tells browsers to allow that origin to access the resource; or else — for requests **without** credentials — the "`*`" wildcard, to tell browsers to allow any origin to access the resource. For example, to allow code from the origin `https://mozilla.org` to access the resource, you can specify: - Access-Control-Allow-Origin: https://mozilla.org - Vary: Origin +``` +Access-Control-Allow-Origin: https://mozilla.org +Vary: Origin +``` If the server specifies a single origin (that may dynamically change based on the requesting origin as part of a allowlist) rather than the "`*`" wildcard, then the server should also include `Origin` in the {{HTTPHeader("Vary")}} response header — to indicate to clients that server responses will differ based on the value of the {{HTTPHeader("Origin")}} request header. @@ -365,19 +382,24 @@ If the server specifies a single origin (that may dynamically change based on th The {{HTTPHeader("Access-Control-Expose-Headers")}} header adds the specified headers to the allowlist that JavaScript (such as {{domxref("XMLHttpRequest.getResponseHeader()","getResponseHeader()")}}) in browsers is allowed to access. - Access-Control-Expose-Headers: [, ]* +``` +Access-Control-Expose-Headers: [, ]* +``` For example, the following: - Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +``` +Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header +``` …would allow the `X-My-Custom-Header` and `X-Another-Custom-Header` headers to be exposed to the browser. ### Access-Control-Max-Age The {{HTTPHeader("Access-Control-Max-Age")}} header indicates how long the results of a preflight request can be cached. For an example of a preflight request, see the above examples. - - Access-Control-Max-Age: +``` +Access-Control-Max-Age: +``` The `delta-seconds` parameter indicates the number of seconds the results can be cached. @@ -385,7 +407,9 @@ The `delta-seconds` parameter indicates the number of seconds the results can be The {{HTTPHeader("Access-Control-Allow-Credentials")}} header indicates whether or not the response to the request can be exposed when the `credentials` flag is true. When used as part of a response to a preflight request, this indicates whether or not the actual request can be made using credentials. Note that simple `GET` requests are not preflighted, and so if a request is made for a resource with credentials, if this header is not returned with the resource, the response is ignored by the browser and not returned to web content. - Access-Control-Allow-Credentials: true +``` +Access-Control-Allow-Credentials: true +``` [Credentialed requests](#requests_with_credentials) are discussed above. @@ -393,7 +417,9 @@ The {{HTTPHeader("Access-Control-Allow-Credentials")}} header indicates whether The {{HTTPHeader("Access-Control-Allow-Methods")}} header specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above. - Access-Control-Allow-Methods: [, ]* +``` +Access-Control-Allow-Methods: [, ]* +``` An example of a {{Glossary("preflight request")}} is given above, including an example which sends this header to the browser. @@ -401,7 +427,9 @@ An example of a {{Glossary("preflight request")}} is given above, including an e The {{HTTPHeader("Access-Control-Allow-Headers")}} header is used in response to a {{Glossary("preflight request")}} to indicate which HTTP headers can be used when making the actual request. This header is the server side response to the browser's {{HTTPHeader("Access-Control-Request-Headers")}} header. - Access-Control-Allow-Headers: [, ]* +``` +Access-Control-Allow-Headers: [, ]* +``` ## The HTTP request headers @@ -411,7 +439,9 @@ This section lists headers that clients may use when issuing HTTP requests in or The {{HTTPHeader("Origin")}} header indicates the origin of the cross-site access request or preflight request. - Origin: +``` +Origin: +``` The origin is a URL indicating the server from which the request initiated. It does not include any path information, but only the server name. @@ -423,7 +453,9 @@ Note that in any access control request, the {{HTTPHeader("Origin")}} header is The {{HTTPHeader("Access-Control-Request-Method")}} is used when issuing a preflight request to let the server know what HTTP method will be used when the actual request is made. - Access-Control-Request-Method: +``` +Access-Control-Request-Method: +``` Examples of this usage can be [found above.](#preflighted_requests) @@ -431,7 +463,9 @@ Examples of this usage can be [found above.](#preflighted_requests) The {{HTTPHeader("Access-Control-Request-Headers")}} header is used when issuing a preflight request to let the server know what HTTP headers will be used when the actual request is made (such as with {{domxref("XMLHttpRequest.setRequestHeader()","setRequestHeader()")}}). This browser side header will be answered by the complementary server side header of {{HTTPHeader("Access-Control-Allow-Headers")}}. - Access-Control-Request-Headers: [, ]* +``` +Access-Control-Request-Headers: [, ]* +``` Examples of this usage can be [found above](#preflighted_requests). diff --git a/files/en-us/web/http/cross-origin_resource_policy_(corp)/index.md b/files/en-us/web/http/cross-origin_resource_policy_(corp)/index.md index 4cc3f1d8d0fcda7..6a36f1437eed145 100644 --- a/files/en-us/web/http/cross-origin_resource_policy_(corp)/index.md +++ b/files/en-us/web/http/cross-origin_resource_policy_(corp)/index.md @@ -43,9 +43,9 @@ Web applications set a Cross-Origin Resource Policy via the {{HTTPHeader("Cross- - `cross-origin` - : Requests from any _{{Glossary("origin")}}_ (both same-site and cross-site) can read the resource. - - - Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin +``` +Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin +``` During a cross-origin resource policy check, if the header is set, the browser will deny `no-cors` requests issued from a different origin/site. diff --git a/files/en-us/web/http/csp/index.md b/files/en-us/web/http/csp/index.md index bd71a9859ddefb7..b7faf5300ac4483 100644 --- a/files/en-us/web/http/csp/index.md +++ b/files/en-us/web/http/csp/index.md @@ -11,19 +11,17 @@ tags: --- {{HTTPSidebar}} -**Content Security Policy** ({{Glossary("CSP")}}) is an -added layer of security that helps to detect and mitigate certain types of attacks, -including Cross Site Scripting ({{Glossary("Cross-site_scripting", "XSS")}}) and data injection attacks. These -attacks are used for everything from data theft to site defacement to distribution of -malware. +**Content Security Policy** ({{Glossary("CSP")}}) is an added layer of security +that helps to detect and mitigate certain types of attacks, +including Cross Site Scripting ({{Glossary("Cross-site_scripting", "XSS")}}) and data injection attacks. +These attacks are used for everything from data theft to site defacement to distribution of malware. CSP is designed to be fully backward compatible (except CSP version 2 where there are some explicitly-mentioned inconsistencies in backward compatibility; more details [here](https://www.w3.org/TR/CSP2) section 1.1). Browsers that don't support it still work with servers that implement it, and vice-versa: browsers that don't support CSP ignore it, functioning as usual, defaulting to the standard same-origin policy for web content. If the site doesn't offer the CSP header, browsers likewise use -the standard [same-origin -policy](/en-US/docs/Web/Security/Same-origin_policy). +the standard [same-origin policy](/en-US/docs/Web/Security/Same-origin_policy). To enable CSP, you need to configure your web server to return the {{HTTPHeader("Content-Security-Policy")}} HTTP header. (Sometimes you may see mentions @@ -32,7 +30,11 @@ you don't need to specify it anymore.) Alternatively, the {{HTMLElement("meta")}} element can be used to configure a policy, for example: -`` + +```html + +``` ## Threats @@ -79,7 +81,7 @@ construct such headers properly, and provides examples. You can use the {{HTTPHeader("Content-Security-Policy")}} HTTP header to specify your policy, like this: -```html +``` Content-Security-Policy: policy ``` @@ -110,7 +112,7 @@ This section provides examples of some common security policy scenarios. A web site administrator wants all content to come from the site's own origin (this excludes subdomains.) -```html +``` Content-Security-Policy: default-src 'self' ``` @@ -119,7 +121,7 @@ Content-Security-Policy: default-src 'self' A web site administrator wants to allow content from a trusted domain and all its subdomains (it doesn't have to be the same domain that the CSP is set on.) -```html +``` Content-Security-Policy: default-src 'self' trusted.com *.trusted.com ``` @@ -129,7 +131,7 @@ A web site administrator wants to allow users of a web application to include im from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code. -```html +``` Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com ``` @@ -147,7 +149,7 @@ A web site administrator for an online banking site wants to ensure that all its content is loaded using TLS, in order to prevent attackers from eavesdropping on requests. -```html +``` Content-Security-Policy: default-src https://onlinebanking.jumbobank.com ``` @@ -159,7 +161,7 @@ through the single origin onlinebanking.jumbobank.com. A web site administrator of a web mail site wants to allow HTML in email, as well as images loaded from anywhere, but not JavaScript or other potentially dangerous content. -```html +``` Content-Security-Policy: default-src 'self' *.mailsite.com; img-src * ``` @@ -176,8 +178,8 @@ header can be used to test a future revision to a policy without actually deploy You can use the {{HTTPHeader("Content-Security-Policy-Report-Only")}} HTTP header to specify your policy, like this: -```html -Content-Security-Policy-Report-Only: policy +``` +Content-Security-Policy-Report-Only: policy ``` If both a {{HTTPHeader("Content-Security-Policy-Report-Only")}} header and a @@ -192,7 +194,7 @@ By default, violation reports aren't sent. To enable violation reporting, you ne specify the {{CSP("report-uri")}} policy directive, providing at least one URI to which to deliver the reports: -```html +``` Content-Security-Policy: default-src 'self'; report-uri http://reportcollector.example.com/collector.cgi ``` @@ -235,7 +237,7 @@ Let's consider a page located at `http://example.com/signup.html`. It uses the following policy, disallowing everything but stylesheets from `cdn.example.com`. -```html +``` Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports ``` @@ -260,15 +262,17 @@ Can you spot the mistake? Stylesheets are allowed to be loaded only from following violation report as a POST request to `http://example.com/_/csp-reports`, when the document is visited: - { - "csp-report": { - "document-uri": "http://example.com/signup.html", - "referrer": "", - "blocked-uri": "http://example.com/css/style.css", - "violated-directive": "style-src cdn.example.com", - "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports" - } - } +```js +{ + "csp-report": { + "document-uri": "http://example.com/signup.html", + "referrer": "", + "blocked-uri": "http://example.com/css/style.css", + "violated-directive": "style-src cdn.example.com", + "original-policy": "default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports" + } +} +``` As you can see, the report includes the full path to the violating resource in `blocked-uri`. This is not always the case. For example, if the diff --git a/files/en-us/web/http/headers/accept-ch-lifetime/index.md b/files/en-us/web/http/headers/accept-ch-lifetime/index.md index 82eb46c587d33d0..8a4926ee0467170 100644 --- a/files/en-us/web/http/headers/accept-ch-lifetime/index.md +++ b/files/en-us/web/http/headers/accept-ch-lifetime/index.md @@ -45,14 +45,16 @@ include in subsequent requests. ## Syntax -```html +``` Accept-CH-Lifetime: ``` ## Examples - Accept-CH: Viewport-Width - Accept-CH-Lifetime: 86400 +``` +Accept-CH: Viewport-Width +Accept-CH-Lifetime: 86400 +``` ## Browser compatibility diff --git a/files/en-us/web/http/headers/accept-encoding/index.md b/files/en-us/web/http/headers/accept-encoding/index.md index 4c8b4d155a9efe1..c3c0e57980f4874 100644 --- a/files/en-us/web/http/headers/accept-encoding/index.md +++ b/files/en-us/web/http/headers/accept-encoding/index.md @@ -40,7 +40,7 @@ As long as the `identity` value, meaning no encoding, is not explicitly forbidde ## Syntax -```html +``` Accept-Encoding: gzip Accept-Encoding: compress Accept-Encoding: deflate @@ -71,11 +71,13 @@ Accept-Encoding: deflate, gzip;q=1.0, *;q=0.5 ## Examples - Accept-Encoding: gzip +``` +Accept-Encoding: gzip - Accept-Encoding: gzip, compress, br +Accept-Encoding: gzip, compress, br - Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 +Accept-Encoding: br;q=1.0, gzip;q=0.8, *;q=0.1 +``` ## Specifications diff --git a/files/en-us/web/http/headers/accept-patch/index.md b/files/en-us/web/http/headers/accept-patch/index.md index 231e2a0eac7a14f..4a59f44b91b8266 100644 --- a/files/en-us/web/http/headers/accept-patch/index.md +++ b/files/en-us/web/http/headers/accept-patch/index.md @@ -33,7 +33,7 @@ A server receiving a PATCH request with an unsupported media type could reply wi ## Syntax -```html +``` Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 Accept-Patch: application/merge-patch+json @@ -45,7 +45,7 @@ None ## Examples -```html +``` Accept-Patch: application/example, text/example Accept-Patch: text/example;charset=utf-8 diff --git a/files/en-us/web/http/headers/accept-post/index.md b/files/en-us/web/http/headers/accept-post/index.md index ab7eb00b85c7c7f..bddbff43e555456 100644 --- a/files/en-us/web/http/headers/accept-post/index.md +++ b/files/en-us/web/http/headers/accept-post/index.md @@ -32,9 +32,11 @@ For example, a server receiving a `POST` request with an unsupported media type ## Syntax - Accept: / - Accept: /* - Accept: */* +``` +Accept: / +Accept: /* +Accept: */* +``` > **Note:** The `Accept-Post` header specifies a media range in the same way as {{HTTPHeader("Accept-Language")}}, except that it has no notion of preference (i.e. "accept-params" or "q" arguments are not significant). @@ -44,7 +46,7 @@ None. ## Examples -```html +``` Accept-Post: application/example, text/example Accept-Post: image/webp Accept-Post: */* diff --git a/files/en-us/web/http/headers/accept-ranges/index.md b/files/en-us/web/http/headers/accept-ranges/index.md index 4e61fe856ca3b8a..4c6783422b0a6d6 100644 --- a/files/en-us/web/http/headers/accept-ranges/index.md +++ b/files/en-us/web/http/headers/accept-ranges/index.md @@ -33,7 +33,7 @@ _resume_ an interrupted download, rather than to start it from the start again. ## Syntax -```html +``` Accept-Ranges: Accept-Ranges: none ``` @@ -52,7 +52,9 @@ Accept-Ranges: none ## Examples - Accept-Ranges: bytes +``` +Accept-Ranges: bytes +``` ## Specifications diff --git a/files/en-us/web/http/headers/accept/index.md b/files/en-us/web/http/headers/accept/index.md index 19f5acdacd42dcc..3763506a078202d 100644 --- a/files/en-us/web/http/headers/accept/index.md +++ b/files/en-us/web/http/headers/accept/index.md @@ -37,7 +37,7 @@ The **`Accept`** request HTTP header advertises which content types, expressed a ## Syntax -```html +``` Accept: / Accept: /* Accept: */* @@ -59,15 +59,17 @@ Accept: text/html, application/xhtml+xml, application/xml;q=0.9, image/webp, */* ## Examples - Accept: text/html +``` +Accept: text/html - Accept: image/* +Accept: image/* - // General default - Accept: */* +// General default +Accept: */* - // Default for navigation requests - Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 +// Default for navigation requests +Accept: text/html, application/xhtml+xml, application/xml;q=0.9, */*;q=0.8 +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-allow-credentials/index.md b/files/en-us/web/http/headers/access-control-allow-credentials/index.md index 1674480ddd7f6ec..a2c560bbf5b9d5c 100644 --- a/files/en-us/web/http/headers/access-control-allow-credentials/index.md +++ b/files/en-us/web/http/headers/access-control-allow-credentials/index.md @@ -52,7 +52,7 @@ in to including credentials. ## Syntax -```html +``` Access-Control-Allow-Credentials: true ``` @@ -67,7 +67,9 @@ Access-Control-Allow-Credentials: true Allow credentials: - Access-Control-Allow-Credentials: true +``` +Access-Control-Allow-Credentials: true +``` Using [XHR](/en-US/docs/Web/API/XMLHttpRequest) with credentials: diff --git a/files/en-us/web/http/headers/access-control-allow-headers/index.md b/files/en-us/web/http/headers/access-control-allow-headers/index.md index 31c0a912a1b86a8..af8b0984014d91c 100644 --- a/files/en-us/web/http/headers/access-control-allow-headers/index.md +++ b/files/en-us/web/http/headers/access-control-allow-headers/index.md @@ -32,7 +32,7 @@ This header is required if the request has an {{HTTPHeader("Access-Control-Reque ## Syntax -```html +``` Access-Control-Allow-Headers: [[, ]*] Access-Control-Allow-Headers: * ``` @@ -50,19 +50,25 @@ Access-Control-Allow-Headers: * Here's an example of what an `Access-Control-Allow-Headers` header might look like. It indicates that a custom header named `X-Custom-Header` is supported by CORS requests to the server (in addition to the {{glossary("CORS-safelisted_request_header", "CORS-safelisted request headers")}}). - Access-Control-Allow-Headers: X-Custom-Header +``` +Access-Control-Allow-Headers: X-Custom-Header +``` ### Multiple headers This example shows `Access-Control-Allow-Headers` when it specifies support for multiple headers. - Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests +``` +Access-Control-Allow-Headers: X-Custom-Header, Upgrade-Insecure-Requests +``` ### Bypassing additional restrictions Although {{glossary("CORS-safelisted_request_header", "CORS-safelisted request headers")}} are always allowed and don't usually need to be listed in `Access-Control-Allow-Headers`, listing them anyway will circumvent the [additional restrictions](/en-US/docs/Glossary/CORS-safelisted_request_header#additional_restrictions) that apply. - Access-Control-Allow-Headers: Accept +``` +Access-Control-Allow-Headers: Accept +``` ### Example preflight request @@ -74,22 +80,26 @@ First, the request. The preflight request is an {{HTTPMethod("OPTIONS")}} reque The preflight request below tells the server that we want to send a CORS `GET` request that has the headers listed in {{HTTPHeader("Access-Control-Request-Headers")}} ({{HTTPHeader("Content-Type")}} and `x-requested-with`). - OPTIONS /resource/foo - Access-Control-Request-Method: GET - Access-Control-Request-Headers: Content-Type, x-requested-with - Origin: https://foo.bar.org +``` +OPTIONS /resource/foo +Access-Control-Request-Method: GET +Access-Control-Request-Headers: Content-Type, x-requested-with +Origin: https://foo.bar.org +``` #### Response If the CORS request indicated by the preflight request is authorized, the server will respond to the preflight request with a message that indicates the allowed origin, methods and headers. Below we see that {{HTTPHeader("Access-Control-Allow-Headers")}} includes the headers that were requested. - HTTP/1.1 200 OK - Content-Length: 0 - Connection: keep-alive - Access-Control-Allow-Origin: https://foo.bar.org - Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE - Access-Control-Allow-Headers: Content-Type, x-requested-with - Access-Control-Max-Age: 86400 +``` +HTTP/1.1 200 OK +Content-Length: 0 +Connection: keep-alive +Access-Control-Allow-Origin: https://foo.bar.org +Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE +Access-Control-Allow-Headers: Content-Type, x-requested-with +Access-Control-Max-Age: 86400 +``` If the requested method isn't supported, the server will respond with an error. diff --git a/files/en-us/web/http/headers/access-control-allow-methods/index.md b/files/en-us/web/http/headers/access-control-allow-methods/index.md index c7f620205f77ff8..c5a672583fa29e7 100644 --- a/files/en-us/web/http/headers/access-control-allow-methods/index.md +++ b/files/en-us/web/http/headers/access-control-allow-methods/index.md @@ -29,7 +29,7 @@ specifies the method or methods allowed when accessing the resource in response ## Syntax -```html +``` Access-Control-Allow-Methods: , , ... Access-Control-Allow-Methods: * ``` @@ -47,8 +47,10 @@ Access-Control-Allow-Methods: * ## Examples - Access-Control-Allow-Methods: POST, GET, OPTIONS - Access-Control-Allow-Methods: * +``` +Access-Control-Allow-Methods: POST, GET, OPTIONS +Access-Control-Allow-Methods: * +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-allow-origin/index.md b/files/en-us/web/http/headers/access-control-allow-origin/index.md index ad74641282489a9..b8be1ebd97548b1 100644 --- a/files/en-us/web/http/headers/access-control-allow-origin/index.md +++ b/files/en-us/web/http/headers/access-control-allow-origin/index.md @@ -35,7 +35,7 @@ The **`Access-Control-Allow-Origin`** response header indicates whether the resp ## Syntax -```html +``` Access-Control-Allow-Origin: * Access-Control-Allow-Origin: Access-Control-Allow-Origin: null @@ -57,11 +57,15 @@ Access-Control-Allow-Origin: null A response that tells the browser to allow code from any origin to access a resource will include the following: - Access-Control-Allow-Origin: * +``` +Access-Control-Allow-Origin: * +``` A response that tells the browser to allow requesting code from the origin `https://developer.mozilla.org` to access a resource will include the following: - Access-Control-Allow-Origin: https://developer.mozilla.org +``` +Access-Control-Allow-Origin: https://developer.mozilla.org +``` Limiting the possible `Access-Control-Allow-Origin` values to a set of allowed origins requires code on the server side to check the value of the {{HTTPHeader("Origin")}} request header, compare that to a list of allowed origins, and then if the {{HTTPHeader("Origin")}} value is in the list, to set the `Access-Control-Allow-Origin` value to the same value as the {{HTTPHeader("Origin")}} value. @@ -69,8 +73,10 @@ Limiting the possible `Access-Control-Allow-Origin` values to a set of allowed o If the server sends a response with an `Access-Control-Allow-Origin` value that is an explicit origin (rather than the "`*`" wildcard), then the response should also include a {{HTTPHeader("Vary")}} response header with the value `Origin` — to indicate to browsers that server responses can differ based on the value of the `Origin` request header. - Access-Control-Allow-Origin: https://developer.mozilla.org - Vary: Origin +``` +Access-Control-Allow-Origin: https://developer.mozilla.org +Vary: Origin +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-expose-headers/index.md b/files/en-us/web/http/headers/access-control-expose-headers/index.md index b722dab1b290075..ae459064af19e4b 100644 --- a/files/en-us/web/http/headers/access-control-expose-headers/index.md +++ b/files/en-us/web/http/headers/access-control-expose-headers/index.md @@ -29,7 +29,7 @@ Only the {{Glossary("CORS-safelisted response header", "CORS-safelisted response ## Syntax -```html +``` Access-Control-Expose-Headers: [[, ]*] Access-Control-Expose-Headers: * ``` @@ -46,19 +46,27 @@ Access-Control-Expose-Headers: * The {{Glossary("CORS-safelisted response header", "CORS-safelisted response headers")}} are: {{HTTPHeader("Cache-Control")}}, {{HTTPHeader("Content-Language")}}, {{HTTPHeader("Content-Length")}}, {{HTTPHeader("Content-Type")}}, {{HTTPHeader("Expires")}}, {{HTTPHeader("Last-Modified")}}, {{HTTPHeader("Pragma")}}. To expose a non-CORS-safelisted response header, you can specify: - Access-Control-Expose-Headers: Content-Encoding +``` +Access-Control-Expose-Headers: Content-Encoding +``` To additionally expose a custom header, like `X-Kuma-Revision`, you can specify multiple headers separated by a comma: - Access-Control-Expose-Headers: Content-Encoding, X-Kuma-Revision +``` +Access-Control-Expose-Headers: Content-Encoding, X-Kuma-Revision +``` For requests without credentials, a server can also respond with a wildcard value: - Access-Control-Expose-Headers: * +``` +Access-Control-Expose-Headers: * +``` However, this won't wildcard the {{HTTPHeader("Authorization")}} header, so if you need to expose that, you will need to list it explicitly: - Access-Control-Expose-Headers: *, Authorization +``` +Access-Control-Expose-Headers: *, Authorization +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-max-age/index.md b/files/en-us/web/http/headers/access-control-max-age/index.md index 041652984632041..9e1c427edfbe490 100644 --- a/files/en-us/web/http/headers/access-control-max-age/index.md +++ b/files/en-us/web/http/headers/access-control-max-age/index.md @@ -27,7 +27,7 @@ The **`Access-Control-Max-Age`** response header indicates how long the results ## Syntax -```html +``` Access-Control-Max-Age: ``` @@ -45,7 +45,9 @@ Access-Control-Max-Age: Cache results of a preflight request for 10 minutes: - Access-Control-Max-Age: 600 +``` +Access-Control-Max-Age: 600 +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-request-headers/index.md b/files/en-us/web/http/headers/access-control-request-headers/index.md index 3ab9dfc53b559d0..cdcbe833f6c990b 100644 --- a/files/en-us/web/http/headers/access-control-request-headers/index.md +++ b/files/en-us/web/http/headers/access-control-request-headers/index.md @@ -27,7 +27,7 @@ The **`Access-Control-Request-Headers`** request header is used by browsers when ## Syntax -```html +``` Access-Control-Request-Headers: , , ... ``` @@ -38,7 +38,9 @@ Access-Control-Request-Headers: , , ... ## Examples - Access-Control-Request-Headers: X-PINGOTHER, Content-Type +``` +Access-Control-Request-Headers: X-PINGOTHER, Content-Type +``` ## Specifications diff --git a/files/en-us/web/http/headers/access-control-request-method/index.md b/files/en-us/web/http/headers/access-control-request-method/index.md index 2d7d92ed54bb51a..1845ddfbfff65c3 100644 --- a/files/en-us/web/http/headers/access-control-request-method/index.md +++ b/files/en-us/web/http/headers/access-control-request-method/index.md @@ -31,7 +31,7 @@ actual request is made. This header is necessary as the preflight request is alw ## Syntax -```html +``` Access-Control-Request-Method: ``` @@ -43,7 +43,9 @@ Access-Control-Request-Method: ## Examples - Access-Control-Request-Method: POST +``` +Access-Control-Request-Method: POST +``` ## Specifications diff --git a/files/en-us/web/http/headers/age/index.md b/files/en-us/web/http/headers/age/index.md index ea16135e240f7f3..089384009560f72 100644 --- a/files/en-us/web/http/headers/age/index.md +++ b/files/en-us/web/http/headers/age/index.md @@ -33,7 +33,7 @@ header included in the HTTP response. ## Syntax -```html +``` Age: ``` @@ -45,7 +45,9 @@ Age: ## Examples - Age: 24 +``` +Age: 24 +``` ## Specifications diff --git a/files/en-us/web/http/headers/allow/index.md b/files/en-us/web/http/headers/allow/index.md index f52086fa2a4057e..f0ce64e269832da 100644 --- a/files/en-us/web/http/headers/allow/index.md +++ b/files/en-us/web/http/headers/allow/index.md @@ -28,7 +28,7 @@ This header must be sent if the server responds with a {{HTTPStatus("405")}} `Me ## Syntax -```html +``` Allow: ``` @@ -39,7 +39,9 @@ Allow: ## Examples - Allow: GET, POST, HEAD +``` +Allow: GET, POST, HEAD +``` ## Specifications diff --git a/files/en-us/web/http/headers/alt-svc/index.md b/files/en-us/web/http/headers/alt-svc/index.md index 8d0ca5313bb0543..392ef532f3ca0fa 100644 --- a/files/en-us/web/http/headers/alt-svc/index.md +++ b/files/en-us/web/http/headers/alt-svc/index.md @@ -14,7 +14,7 @@ The {{HTTPHeader("Alt-Svc")}} HTTP header allows a server to indicate that a par ## Syntax -```html +``` Alt-Svc: clear Alt-Svc: =; ma= Alt-Svc: =; ma=; persist=1 @@ -45,10 +45,12 @@ as separator. In that case, early entries are considered more preferable. ## Example - Alt-Svc: h2=":443"; ma=2592000; - Alt-Svc: h2=":443"; ma=2592000; persist=1 - Alt-Svc: h2="alt.example.com:443", h2=":443" - Alt-Svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 +``` +Alt-Svc: h2=":443"; ma=2592000; +Alt-Svc: h2=":443"; ma=2592000; persist=1 +Alt-Svc: h2="alt.example.com:443", h2=":443" +Alt-Svc: h3-25=":443"; ma=3600, h2=":443"; ma=3600 +``` ## Specifications diff --git a/files/en-us/web/http/headers/authorization/index.md b/files/en-us/web/http/headers/authorization/index.md index dc8cb2850ce23b9..4beb6605db8be01 100644 --- a/files/en-us/web/http/headers/authorization/index.md +++ b/files/en-us/web/http/headers/authorization/index.md @@ -30,7 +30,7 @@ necessarily, after the server has responded with a {{HTTPStatus("401")}} ## Syntax -```html +``` Authorization: ``` @@ -60,7 +60,9 @@ Authorization: ## Examples - Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l +``` +Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l +``` See also [HTTP authentication](/en-US/docs/Web/HTTP/Authentication) for examples on how to configure Apache or nginx servers to password protect your site with diff --git a/files/en-us/web/http/headers/cache-control/index.md b/files/en-us/web/http/headers/cache-control/index.md index 45b6f8f155d3cfe..b616d47a568f04e 100644 --- a/files/en-us/web/http/headers/cache-control/index.md +++ b/files/en-us/web/http/headers/cache-control/index.md @@ -48,35 +48,41 @@ Caching directives have the following rules to be valid: Standard `Cache-Control` directives that can be used by the client in an HTTP request. - Cache-Control: max-age= - Cache-Control: max-stale[=] - Cache-Control: min-fresh= - Cache-Control: no-cache - Cache-Control: no-store - Cache-Control: no-transform - Cache-Control: only-if-cached +``` +Cache-Control: max-age= +Cache-Control: max-stale[=] +Cache-Control: min-fresh= +Cache-Control: no-cache +Cache-Control: no-store +Cache-Control: no-transform +Cache-Control: only-if-cached +``` ### Cache response directives Standard `Cache-Control` directives that can be used by the server in an HTTP response. - Cache-Control: must-revalidate - Cache-Control: no-cache - Cache-Control: no-store - Cache-Control: no-transform - Cache-Control: public - Cache-Control: private - Cache-Control: proxy-revalidate - Cache-Control: max-age= - Cache-Control: s-maxage= +``` +Cache-Control: must-revalidate +Cache-Control: no-cache +Cache-Control: no-store +Cache-Control: no-transform +Cache-Control: public +Cache-Control: private +Cache-Control: proxy-revalidate +Cache-Control: max-age= +Cache-Control: s-maxage= +``` ### Extension Cache-Control directives Extension `Cache-Control` directives are not part of the core HTTP caching standards document. Check the [compatibility table](#browser_compatibility) for their support; user-agents that don't recognize them should ignore them. - Cache-Control: immutable - Cache-Control: stale-while-revalidate= - Cache-Control: stale-if-error= +``` +Cache-Control: immutable +Cache-Control: stale-while-revalidate= +Cache-Control: stale-if-error= +``` ## Directives @@ -138,7 +144,7 @@ Cache-Control: no-store > but it will not prevent the cache from responding with a non-stale resource that was cached as the result of an earlier request. > Setting `max-age=0` as well forces the cache to revalidate (clears the cache). > -> Cache-Control: no-store, max-age=0 +> `Cache-Control: no-store, max-age=0` On the opposite, this is a bad way to achieve this: @@ -150,22 +156,26 @@ Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,p For the files in the application that will not change, you can usually add aggressive caching by sending the response header below. This includes static files that are served by the application such as images, CSS files and JavaScript files, for example. In addition, see also the `Expires` header. - Cache-Control: public, max-age=604800, immutable +``` +Cache-Control: public, max-age=604800, immutable +``` ### Requiring revalidation -`no-cache` and `max-age=0, must-revalidate` indicates same meaning. +`no-cache` and `max-age=0, must-revalidate` have the same meaning. Clients can cache a resource but must revalidate each time before using it. This means HTTP request occurs each time though, it can skip downloading HTTP body if the content is valid. - Cache-Control: no-cache - - +``` +Cache-Control: no-cache - Cache-Control: max-age=0, must-revalidate +Cache-Control: max-age=0, must-revalidate +``` -**Note**: Following may serve stale resource if server is down or lose connectivity. +**Note**: The following header may serve a stale resource, if server is down or loses connectivity. - Cache-Control: max-age=0 +``` +Cache-Control: max-age=0 +``` ## Specifications diff --git a/files/en-us/web/http/headers/clear-site-data/index.md b/files/en-us/web/http/headers/clear-site-data/index.md index 30315bf5c1560e9..42ae0b2ee837247 100644 --- a/files/en-us/web/http/headers/clear-site-data/index.md +++ b/files/en-us/web/http/headers/clear-site-data/index.md @@ -30,14 +30,16 @@ The **`Clear-Site-Data`** header clears browsing data (cookies, storage, cache) The `Clear-Site-Data` header accepts one or more directives. If all types of data should be cleared, the wildcard directive (`"*"`) can be used. - // Single directive - Clear-Site-Data: "cache" +``` +// Single directive +Clear-Site-Data: "cache" - // Multiple directives (comma separated) - Clear-Site-Data: "cache", "cookies" +// Multiple directives (comma separated) +Clear-Site-Data: "cache", "cookies" - // Wild card - Clear-Site-Data: "*" +// Wild card +Clear-Site-Data: "*" +``` ## Directives @@ -71,13 +73,17 @@ The `Clear-Site-Data` header accepts one or more directives. If all types of dat If a user signs out of your website or service, you might want to remove locally stored data. You can achieve that by adding the `Clear-Site-Data` header when sending the page confirming that logging out from the site has been accomplished successfully (https\://example.com/logout, for example): - Clear-Site-Data: "cache", "cookies", "storage", "executionContexts" +``` +Clear-Site-Data: "cache", "cookies", "storage", "executionContexts" +``` ### Clearing cookies If this header is delivered with the response at https\://example.com/clear-cookies, all cookies on the same domain https\://example.com and any subdomains (like https\://stage.example.com, etc), will be cleared out. - Clear-Site-Data: "cookies" +``` +Clear-Site-Data: "cookies" +``` ## Specifications diff --git a/files/en-us/web/http/headers/connection/index.md b/files/en-us/web/http/headers/connection/index.md index 55ab377bf1e4017..71d73bb375f3324 100644 --- a/files/en-us/web/http/headers/connection/index.md +++ b/files/en-us/web/http/headers/connection/index.md @@ -49,7 +49,7 @@ further. Standard hop-by-hop headers are also required to be listed. ## Syntax -```html +``` Connection: keep-alive Connection: close ``` diff --git a/files/en-us/web/http/headers/content-disposition/index.md b/files/en-us/web/http/headers/content-disposition/index.md index 713f0513f95bf84..310229c54391526 100644 --- a/files/en-us/web/http/headers/content-disposition/index.md +++ b/files/en-us/web/http/headers/content-disposition/index.md @@ -40,7 +40,7 @@ The `Content-Disposition` header is defined in the larger context of MIME messag The first parameter in the HTTP context is either `inline` (default value, indicating it can be displayed inside the Web page, or as the Web page) or `attachment` (indicating it should be downloaded; most browsers presenting a 'Save as' dialog, prefilled with the value of the `filename` parameters if present). -```html +``` Content-Disposition: inline Content-Disposition: attachment Content-Disposition: attachment; filename="filename.jpg" @@ -52,7 +52,7 @@ Content-Disposition: attachment; filename="filename.jpg" A `multipart/form-data` body requires a `Content-Disposition` header to provide information for each subpart of the form (e.g. for every form field and any files that are part of field data). The first directive is always `form-data`, and the header _must_ also include a `name` parameter to identify the relevant field. Additional directives are case-insensitive and have arguments that use quoted-string syntax after the `'='` sign. Multiple parameters are separated by a semi-colon (`';'`). -```html +``` Content-Disposition: form-data; name="fieldName" Content-Disposition: form-data; name="fieldName"; filename="filename.jpg" ``` @@ -83,30 +83,34 @@ Content-Disposition: form-data; name="fieldName"; filename="filename.jpg" A response triggering the "Save As" dialog: - 200 OK - Content-Type: text/html; charset=utf-8 - Content-Disposition: attachment; filename="cool.html" - Content-Length: 21 +``` +200 OK +Content-Type: text/html; charset=utf-8 +Content-Disposition: attachment; filename="cool.html" +Content-Length: 21 - Save me! +Save me! +``` This simple HTML file will be saved as a regular download rather than displayed in the browser. Most browsers will propose to save it under the `cool.html` filename (by default). An example of an HTML form posted using the `multipart/form-data` format that makes use of the `Content-Disposition` header: - POST /test.html HTTP/1.1 - Host: example.org - Content-Type: multipart/form-data;boundary="boundary" +``` +POST /test.html HTTP/1.1 +Host: example.org +Content-Type: multipart/form-data;boundary="boundary" - --boundary - Content-Disposition: form-data; name="field1" +--boundary +Content-Disposition: form-data; name="field1" - value1 - --boundary - Content-Disposition: form-data; name="field2"; filename="example.txt" +value1 +--boundary +Content-Disposition: form-data; name="field2"; filename="example.txt" - value2 - --boundary-- +value2 +--boundary-- +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-dpr/index.md b/files/en-us/web/http/headers/content-dpr/index.md index d4a1e01ffa410fb..5d340d0bfdfc202 100644 --- a/files/en-us/web/http/headers/content-dpr/index.md +++ b/files/en-us/web/http/headers/content-dpr/index.md @@ -48,7 +48,9 @@ If the `Content-DPR` header appears more than once in a message the last occurre ## Syntax - Content-DPR: +``` +Content-DPR: +``` ## Directives diff --git a/files/en-us/web/http/headers/content-encoding/index.md b/files/en-us/web/http/headers/content-encoding/index.md index a8b9ec635abdc5b..d7bb35293b2685c 100644 --- a/files/en-us/web/http/headers/content-encoding/index.md +++ b/files/en-us/web/http/headers/content-encoding/index.md @@ -32,7 +32,7 @@ Servers are encouraged to compress data as much as possible, and should use cont ## Syntax -```html +``` Content-Encoding: gzip Content-Encoding: compress Content-Encoding: deflate @@ -72,12 +72,16 @@ On the client side, you can advertise a list of compression schemes that will be along in an HTTP request. The {{HTTPHeader("Accept-Encoding")}} header is used for negotiating content encoding. - Accept-Encoding: gzip, deflate +``` +Accept-Encoding: gzip, deflate +``` The server responds with the scheme used, indicated by the `Content-Encoding` response header. - Content-Encoding: gzip +``` +Content-Encoding: gzip +``` Note that the server is not obligated to use any compression method. Compression highly depends on server settings and used server modules. diff --git a/files/en-us/web/http/headers/content-language/index.md b/files/en-us/web/http/headers/content-language/index.md index b0adb5c3a172f3c..4d2193b2d3eb2d5 100644 --- a/files/en-us/web/http/headers/content-language/index.md +++ b/files/en-us/web/http/headers/content-language/index.md @@ -46,7 +46,7 @@ If no `Content-Language` is specified, the default is that the content is intend ## Syntax -```html +``` Content-Language: de-DE Content-Language: en-US Content-Language: de-DE, en-CA @@ -80,7 +80,9 @@ Do **not** use this meta element like this for stating a document language: The `Content-Language` header is used to specify the **intended audience of the page**, and can indicate that this is more than one language. - Content-Language: de, en +``` +Content-Language: de, en +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-length/index.md b/files/en-us/web/http/headers/content-length/index.md index af0cc616e46b80f..b7b3212bb02c012 100644 --- a/files/en-us/web/http/headers/content-length/index.md +++ b/files/en-us/web/http/headers/content-length/index.md @@ -40,7 +40,7 @@ The **`Content-Length`** header indicates the size of the message body, in byte ## Syntax -```html +``` Content-Length: ``` diff --git a/files/en-us/web/http/headers/content-location/index.md b/files/en-us/web/http/headers/content-location/index.md index 979e1e5958a653f..f283585802081e8 100644 --- a/files/en-us/web/http/headers/content-location/index.md +++ b/files/en-us/web/http/headers/content-location/index.md @@ -36,7 +36,7 @@ data returned. This distinction may seem abstract without [examples](#examples). ## Syntax -```html +``` Content-Location: ``` @@ -78,22 +78,26 @@ as {{HTTPHeader("Accept-Language")}}. Say you're creating a new blog post through a site's API: - PUT /new/post - Host: example.com - Content-Type: text/markdown +``` +PUT /new/post +Host: example.com +Content-Type: text/markdown - # My first blog post! +# My first blog post! - I made this through `example.com`'s API. I hope it worked. +I made this through `example.com`'s API. I hope it worked. +``` The site returns a generic success message confirming the post was published. The server specifies _where_ the new post is with `Content-Location`: - HTTP/1.1 201 Created - Content-Type: text/plain; charset=utf-8 - Content-Location: /my-first-blog-post +``` +HTTP/1.1 201 Created +Content-Type: text/plain; charset=utf-8 +Content-Location: /my-first-blog-post - ✅ Success! +✅ Success! +``` ### Indicating the URL of a transaction's result @@ -123,16 +127,18 @@ When the form is submitted, the site generates a receipt for the transaction. Th server could use `Content-Location` to indicate that receipt's URL for future access. - HTTP/1.1 200 OK - Content-Type: text/html; charset=utf-8 - Content-Location: /my-receipts/38 +``` +HTTP/1.1 200 OK +Content-Type: text/html; charset=utf-8 +Content-Location: /my-receipts/38 - - (Lots of HTML…) + +(Lots of HTML…) -

You sent $38.00 to ExampleUser.

+

You sent $38.00 to ExampleUser.

- (Lots more HTML…) +(Lots more HTML…) +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-range/index.md b/files/en-us/web/http/headers/content-range/index.md index 38df63077b12218..cce1417cb6d00d8 100644 --- a/files/en-us/web/http/headers/content-range/index.md +++ b/files/en-us/web/http/headers/content-range/index.md @@ -40,7 +40,7 @@ a full body message a partial message belongs. ## Syntax -```html +``` Content-Range: -/ Content-Range: -/* Content-Range: */ @@ -59,7 +59,9 @@ Content-Range: */ ## Examples - Content-Range: bytes 200-1000/67589 +``` +Content-Range: bytes 200-1000/67589 +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-security-policy-report-only/index.md b/files/en-us/web/http/headers/content-security-policy-report-only/index.md index e96c37fca7ef1db..d78e844effa6369 100644 --- a/files/en-us/web/http/headers/content-security-policy-report-only/index.md +++ b/files/en-us/web/http/headers/content-security-policy-report-only/index.md @@ -37,7 +37,7 @@ For more information, see also this article on [Content Security Policy (CSP)](/ ## Syntax -```html +``` Content-Security-Policy-Report-Only: ; ``` @@ -51,11 +51,15 @@ The CSP {{CSP("report-uri")}} directive should be used with this header, otherwi This header reports violations that would have occurred. You can use this to iteratively work on your content security policy. You observe how your site behaves, watching for violation reports, or [malware redirects](https://secure.wphackedhelp.com/blog/wordpress-malware-redirect-hack-cleanup/), then choose the desired policy enforced by the {{HTTPHeader("Content-Security-Policy")}} header. - Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/ +``` +Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/ +``` If you still want to receive reporting, but also want to enforce a policy, use the {{HTTPHeader("Content-Security-Policy")}} header with the {{CSP("report-uri")}} directive. - Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/ +``` +Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/ +``` ## Violation report syntax @@ -84,7 +88,9 @@ The report JSON object contains the following data: Let's consider a page located at `http://example.com/signup.html`. It uses the following policy, disallowing everything but stylesheets from `cdn.example.com`. - Content-Security-Policy-Report-Only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports +``` +Content-Security-Policy-Report-Only: default-src 'none'; style-src cdn.example.com; report-uri /_/csp-reports +``` The HTML of `signup.html` looks like this: diff --git a/files/en-us/web/http/headers/content-security-policy/base-uri/index.md b/files/en-us/web/http/headers/content-security-policy/base-uri/index.md index 7f1b5806a46e46e..c7b83f6fb8cd392 100644 --- a/files/en-us/web/http/headers/content-security-policy/base-uri/index.md +++ b/files/en-us/web/http/headers/content-security-policy/base-uri/index.md @@ -34,7 +34,7 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} **`base-uri`** directive rest One or more*sources* can be allowed for the base-uri policy: -```html +``` Content-Security-Policy: base-uri ; Content-Security-Policy: base-uri ; ``` @@ -55,7 +55,7 @@ While this directive uses the same arguments as other CSP directives, some of th ### Apache configuration -```bash +```html Header set Content-Security-Policy "base-uri 'self'"; @@ -63,7 +63,7 @@ Header set Content-Security-Policy "base-uri 'self'"; ### Nginx configuration -```bash +``` add_header Content-Security-Policy "base-uri 'self';" ``` diff --git a/files/en-us/web/http/headers/content-security-policy/block-all-mixed-content/index.md b/files/en-us/web/http/headers/content-security-policy/block-all-mixed-content/index.md index 5b206e397857637..c7a2e33768ce4cc 100644 --- a/files/en-us/web/http/headers/content-security-policy/block-all-mixed-content/index.md +++ b/files/en-us/web/http/headers/content-security-policy/block-all-mixed-content/index.md @@ -22,19 +22,23 @@ All [mixed content](/en-US/docs/Web/Security/Mixed_content) resource requests ar ## Syntax -```html +``` Content-Security-Policy: block-all-mixed-content; ``` ## Examples - Content-Security-Policy: block-all-mixed-content; +``` +Content-Security-Policy: block-all-mixed-content; - + +``` To disallow http assets on a more granular level, you can also set individual directives to `https:`. For example, to disallow nonsecure HTTP images: - Content-Security-Policy: img-src https: +``` +Content-Security-Policy: img-src https: +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-security-policy/child-src/index.md b/files/en-us/web/http/headers/content-security-policy/child-src/index.md index 9e4ae7e06964d3f..30531d6d114e00c 100644 --- a/files/en-us/web/http/headers/content-security-policy/child-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/child-src/index.md @@ -45,7 +45,7 @@ network errors by the user agent. One or more sources can be allowed for the child-src policy: -```html +``` Content-Security-Policy: child-src ; Content-Security-Policy: child-src ; ``` @@ -60,7 +60,7 @@ Content-Security-Policy: child-src ; Given this CSP header: -```bash +``` Content-Security-Policy: child-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/connect-src/index.md b/files/en-us/web/http/headers/content-security-policy/connect-src/index.md index 73d70aee977242d..02b57dc48d2f06c 100644 --- a/files/en-us/web/http/headers/content-security-policy/connect-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/connect-src/index.md @@ -52,7 +52,7 @@ loaded using script interfaces. The APIs that are restricted are: One or more sources can be allowed for the connect-src policy: -```html +``` Content-Security-Policy: connect-src ; Content-Security-Policy: connect-src ; ``` @@ -68,7 +68,7 @@ Content-Security-Policy: connect-src ; Given this CSP header: -```bash +``` Content-Security-Policy: connect-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/default-src/index.md b/files/en-us/web/http/headers/content-security-policy/default-src/index.md index 5fe31de924def41..71b31cf105aa8f3 100644 --- a/files/en-us/web/http/headers/content-security-policy/default-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/default-src/index.md @@ -51,7 +51,7 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`default-src`** direc One or more sources can be allowed for the `default-src` policy: -```html +``` Content-Security-Policy: default-src ; Content-Security-Policy: default-src ; ``` @@ -108,13 +108,13 @@ Content-Security-Policy: default-src ; If there are other directives specified, `default-src` does not influence them. The following header: -```bash +``` Content-Security-Policy: default-src 'self'; script-src https://example.com ``` is the same as: -```bash +``` Content-Security-Policy: connect-src 'self'; font-src 'self'; frame-src 'self'; diff --git a/files/en-us/web/http/headers/content-security-policy/font-src/index.md b/files/en-us/web/http/headers/content-security-policy/font-src/index.md index ab7eb11fc2ba71c..22d4ac020085b4f 100644 --- a/files/en-us/web/http/headers/content-security-policy/font-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/font-src/index.md @@ -42,7 +42,7 @@ valid sources for fonts loaded using {{cssxref("@font-face")}}. One or more sources can be allowed for the `font-src` policy: -```html +``` Content-Security-Policy: font-src ; Content-Security-Policy: font-src ; ``` @@ -57,7 +57,7 @@ Content-Security-Policy: font-src ; Given this CSP header: -```bash +``` Content-Security-Policy: font-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/form-action/index.md b/files/en-us/web/http/headers/content-security-policy/form-action/index.md index 19bbddc89b204f2..20f85dcfbbf2ac5 100644 --- a/files/en-us/web/http/headers/content-security-policy/form-action/index.md +++ b/files/en-us/web/http/headers/content-security-policy/form-action/index.md @@ -39,7 +39,7 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`form`\*\***`-action` One or more sources can be set for the `form-action` policy: -```html +``` Content-Security-Policy: form-action ; Content-Security-Policy: form-action ; ``` @@ -58,7 +58,7 @@ Content-Security-Policy: form-action ; ### Apache configuration -```bash +```html Header set Content-Security-Policy "form-action 'none';" @@ -66,7 +66,7 @@ Header set Content-Security-Policy "form-action 'none';" ### Nginx configuration -```bash +``` add_header Content-Security-Policy "form-action 'none';" ``` diff --git a/files/en-us/web/http/headers/content-security-policy/frame-ancestors/index.md b/files/en-us/web/http/headers/content-security-policy/frame-ancestors/index.md index 643ac0e0d907234..80cdcd86d07e6ac 100644 --- a/files/en-us/web/http/headers/content-security-policy/frame-ancestors/index.md +++ b/files/en-us/web/http/headers/content-security-policy/frame-ancestors/index.md @@ -45,7 +45,7 @@ Setting this directive to `'none'` is similar to {{HTTPHeader("X-Frame-Options") One or more sources can be set for the `frame-ancestors` policy: -```html +``` Content-Security-Policy: frame-ancestors ; Content-Security-Policy: frame-ancestors ; ``` @@ -83,7 +83,7 @@ Content-Security-Policy: frame-ancestors ; ## Examples -```bash +``` Content-Security-Policy: frame-ancestors 'none'; Content-Security-Policy: frame-ancestors 'self' https://www.example.org; diff --git a/files/en-us/web/http/headers/content-security-policy/frame-src/index.md b/files/en-us/web/http/headers/content-security-policy/frame-src/index.md index befed4c47ed3301..bcbf328c3120cf2 100644 --- a/files/en-us/web/http/headers/content-security-policy/frame-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/frame-src/index.md @@ -45,7 +45,7 @@ browsing contexts loading using elements such as {{HTMLElement("frame")}} and One or more sources can be allowed for the `frame-src` policy: -```html +``` Content-Security-Policy: frame-src ; Content-Security-Policy: frame-src ; ``` @@ -60,7 +60,7 @@ Content-Security-Policy: frame-src ; Given this CSP header: -```bash +``` Content-Security-Policy: frame-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/img-src/index.md b/files/en-us/web/http/headers/content-security-policy/img-src/index.md index 2507f4c0accc6ba..acdbd8f59ac4466 100644 --- a/files/en-us/web/http/headers/content-security-policy/img-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/img-src/index.md @@ -43,7 +43,7 @@ favicons. One or more sources can be allowed for the `img-src` policy: -```html +``` Content-Security-Policy: img-src ; Content-Security-Policy: img-src ; ``` @@ -58,7 +58,7 @@ Content-Security-Policy: img-src ; Given this CSP header: -```bash +``` Content-Security-Policy: img-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/index.md b/files/en-us/web/http/headers/content-security-policy/index.md index e4f2489cd2a5f96..45306cf7b4ae17e 100644 --- a/files/en-us/web/http/headers/content-security-policy/index.md +++ b/files/en-us/web/http/headers/content-security-policy/index.md @@ -35,7 +35,7 @@ For more information, see the introductory article on [Content Security Policy ( ## Syntax -```html +``` Content-Security-Policy: ; ``` @@ -256,31 +256,43 @@ restrict_ the capabilities of the protected resource, which means that there wil be no connection allowed and, as the strictest policy, `connect-src 'none'` is enforced. - Content-Security-Policy: default-src 'self' http://example.com; - connect-src 'none'; - Content-Security-Policy: connect-src http://example.com/; - script-src http://example.com/ +``` +Content-Security-Policy: default-src 'self' http://example.com; + connect-src 'none'; +Content-Security-Policy: connect-src http://example.com/; + script-src http://example.com/ +``` ## Examples Example: Disable unsafe inline/eval, only allow loading of resources (images, fonts, scripts, etc.) over https: - // header - Content-Security-Policy: default-src https: +### Using the HTTP header - // meta tag - +``` +Content-Security-Policy: default-src https: +``` + +### Using the HTML meta element + +``` + +``` Example: Pre-existing site that uses too much inline code to fix but wants to ensure resources are loaded only over HTTPS and to disable plugins: - Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none' +``` +Content-Security-Policy: default-src https: 'unsafe-eval' 'unsafe-inline'; object-src 'none' +``` Example: Do not implement the above policy yet; instead just report violations that would have occurred: - Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/ +``` +Content-Security-Policy-Report-Only: default-src https:; report-uri /csp-violation-report-endpoint/ +``` See [Mozilla Web Security Guidelines](https://infosec.mozilla.org/guidelines/web_security#Examples_5) for more examples. @@ -297,9 +309,7 @@ Web Security Guidelines](https://infosec.mozilla.org/guidelines/web_security#Exa - {{HTTPHeader("Content-Security-Policy-Report-Only")}} - [Learn about: Content Security Policy](/en-US/docs/Web/HTTP/CSP) -- [Content - Security in WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) -- [Adopting a strict - policy](https://csp.withgoogle.com/docs/strict-csp.html) +- [Content Security in WebExtensions](/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy) +- [Adopting a strict policy](https://csp.withgoogle.com/docs/strict-csp.html) - [CSP Evaluator](https://github.com/google/csp-evaluator) - Evaluate your Content Security Policy diff --git a/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md b/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md index ec83d757718b069..202fe39d49fcbc7 100644 --- a/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/manifest-src/index.md @@ -44,7 +44,7 @@ to the resource. One or more sources can be allowed for the `manifest-src` policy: -```html +``` Content-Security-Policy: manifest-src ; Content-Security-Policy: manifest-src ; ``` @@ -59,7 +59,7 @@ Content-Security-Policy: manifest-src ; Given this CSP header: -```bash +``` Content-Security-Policy: manifest-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/media-src/index.md b/files/en-us/web/http/headers/content-security-policy/media-src/index.md index 32f61a51db97c24..66c7050616f612a 100644 --- a/files/en-us/web/http/headers/content-security-policy/media-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/media-src/index.md @@ -43,7 +43,7 @@ media using the {{HTMLElement("audio")}} and {{HTMLElement("video")}} elements. One or more sources can be allowed for the `media-src` policy: -```html +``` Content-Security-Policy: media-src ; Content-Security-Policy: media-src ; ``` @@ -58,7 +58,7 @@ Content-Security-Policy: media-src ; Given this CSP header: -```bash +``` Content-Security-Policy: media-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/navigate-to/index.md b/files/en-us/web/http/headers/content-security-policy/navigate-to/index.md index 004d3b4c26abda3..22d2649973f9166 100644 --- a/files/en-us/web/http/headers/content-security-policy/navigate-to/index.md +++ b/files/en-us/web/http/headers/content-security-policy/navigate-to/index.md @@ -46,7 +46,7 @@ on what this document is allowed to navigate to. One or more sources can be set for the `navigate-to` policy: -```html +``` Content-Security-Policy: navigate-to ; Content-Security-Policy: navigate-to ; ``` diff --git a/files/en-us/web/http/headers/content-security-policy/object-src/index.md b/files/en-us/web/http/headers/content-security-policy/object-src/index.md index 3336fcfe5bce12a..1baf4c43a6cd847 100644 --- a/files/en-us/web/http/headers/content-security-policy/object-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/object-src/index.md @@ -53,7 +53,7 @@ To set allowed types for {{HTMLElement("object")}}, {{HTMLElement("embed")}}, an One or more sources can be allowed for the object-src policy: -```html +``` Content-Security-Policy: object-src ; Content-Security-Policy: object-src ; ``` @@ -68,7 +68,7 @@ Content-Security-Policy: object-src ; Given this CSP header: -```bash +``` Content-Security-Policy: object-src https://example.com/ ``` diff --git a/files/en-us/web/http/headers/content-security-policy/plugin-types/index.md b/files/en-us/web/http/headers/content-security-policy/plugin-types/index.md index 4d328ca785bc47f..ff368008a61aaca 100644 --- a/files/en-us/web/http/headers/content-security-policy/plugin-types/index.md +++ b/files/en-us/web/http/headers/content-security-policy/plugin-types/index.md @@ -49,7 +49,7 @@ Instantiation of an {{HTMLElement("embed")}}, {{HTMLElement("object")}} or One or more [MIME types](/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types) can be set for the `plugin-types` policy: -```html +``` Content-Security-Policy: plugin-types /; Content-Security-Policy: plugin-types / /; ``` @@ -74,7 +74,7 @@ is only used if you are allowing plugins with `object-src` at all. The content security policy -```bash +``` Content-Security-Policy: plugin-types application/x-shockwave-flash ``` @@ -89,7 +89,7 @@ will allow to load flash objects: To load an {{HTMLElement("applet")}} you must specify `application/x-java-applet`: -```bash +``` Content-Security-Policy: plugin-types application/x-java-applet ``` diff --git a/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md b/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md index 169caec4f284457..0d25548269d99ba 100644 --- a/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/prefetch-src/index.md @@ -40,7 +40,7 @@ be prefetched or prerendered. One or more sources can be allowed for the `prefetch-src` policy: -```html +``` Content-Security-Policy: prefetch-src ; Content-Security-Policy: prefetch-src ; ``` @@ -56,13 +56,17 @@ Content-Security-Policy: prefetch-src ; Given a page with the following Content Security Policy: - Content-Security-Policy: prefetch-src https://example.com/ +``` +Content-Security-Policy: prefetch-src https://example.com/ +``` Fetches for the following code will return network errors, as the URLs provided do not match `prefetch-src`'s source list: +```html +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-security-policy/referrer/index.md b/files/en-us/web/http/headers/content-security-policy/referrer/index.md index 958d3f6c71c4c43..2324aeeaa2962b9 100644 --- a/files/en-us/web/http/headers/content-security-policy/referrer/index.md +++ b/files/en-us/web/http/headers/content-security-policy/referrer/index.md @@ -24,7 +24,7 @@ browsers. ## Syntax -```html +``` Content-Security-Policy: referrer ; ``` @@ -51,7 +51,9 @@ where `` can be one of the following values: ## Examples - Content-Security-Policy: referrer "none"; +``` +Content-Security-Policy: referrer "none"; +``` ## Specifications diff --git a/files/en-us/web/http/headers/content-security-policy/report-uri/index.md b/files/en-us/web/http/headers/content-security-policy/report-uri/index.md index 2b24117da4d3891..f689788cd04de0a 100644 --- a/files/en-us/web/http/headers/content-security-policy/report-uri/index.md +++ b/files/en-us/web/http/headers/content-security-policy/report-uri/index.md @@ -53,7 +53,7 @@ with other directives. ## Syntax -```html +``` Content-Security-Policy: report-uri ; Content-Security-Policy: report-uri ; ``` @@ -66,12 +66,15 @@ Content-Security-Policy: report-uri ; See {{HTTPHeader("Content-Security-Policy-Report-Only")}} for more information and examples. - Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/ +``` +Content-Security-Policy: default-src https:; report-uri /csp-violation-report-endpoint/ +``` `/csp-violation-report-endpoint/` could for example run a PHP something like the following that logs the JSON detailing the violation and, if the violation is the first one added to the log file, sends an email to an administrator: +```php '; const el = document.createElement('div'); if (typeof trustedTypes !== 'undefined') { -  // Create a policy that can create TrustedHTML values + // Create a policy that can create TrustedHTML values // after sanitizing the input strings with DOMPurify library. -  const sanitizer = trustedTypes.createPolicy('foo', { -  createHTML: (input) => DOMPurify.sanitize(input) -  }); + const sanitizer = trustedTypes.createPolicy('foo', { + createHTML: (input) => DOMPurify.sanitize(input) + }); -  el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. -  el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. + el.innerHTML = sanitizer.createHTML(attackerInput); // Puts the sanitized value into the DOM. + el.innerHTML = attackerInput; // Rejects a string value; throws a TypeError. } ``` diff --git a/files/en-us/web/http/headers/content-security-policy/sandbox/index.md b/files/en-us/web/http/headers/content-security-policy/sandbox/index.md index e7a303e80ccfc1c..58313fe947e11f8 100644 --- a/files/en-us/web/http/headers/content-security-policy/sandbox/index.md +++ b/files/en-us/web/http/headers/content-security-policy/sandbox/index.md @@ -41,7 +41,7 @@ preventing the execution of plugins and scripts, and enforcing a same-origin pol ## Syntax -```html +``` Content-Security-Policy: sandbox; Content-Security-Policy: sandbox ; ``` @@ -90,7 +90,7 @@ where `` can optionally be one of the following values: ## Examples -```bash +``` Content-Security-Policy: sandbox allow-scripts; ``` diff --git a/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md b/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md index 3ef35bcf560703a..77bf32187701643 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src-attr/index.md @@ -47,14 +47,14 @@ elements. One or more sources can be allowed for the `script-src-attr` policy: -```html +``` Content-Security-Policy: script-src-attr ; Content-Security-Policy: script-src-attr ; ``` `script-src-attr` can be used in conjunction with {{CSP("script-src")}}: -```html +``` Content-Security-Policy: script-src ; Content-Security-Policy: script-src-attr ; ``` diff --git a/files/en-us/web/http/headers/content-security-policy/script-src/index.md b/files/en-us/web/http/headers/content-security-policy/script-src/index.md index 81c26a839a2f7d4..b0d82c0e8c4bef9 100644 --- a/files/en-us/web/http/headers/content-security-policy/script-src/index.md +++ b/files/en-us/web/http/headers/content-security-policy/script-src/index.md @@ -42,7 +42,7 @@ The HTTP {{HTTPHeader("Content-Security-Policy")}} (CSP) **`script-src`** direct One or more sources can be allowed for the `script-src` policy: -```html +``` Content-Security-Policy: script-src ; Content-Security-Policy: script-src ; ``` @@ -97,7 +97,9 @@ Content-Security-Policy: script-src ; Given this CSP header: - Content-Security-Policy: script-src https://example.com/ +``` +Content-Security-Policy: script-src https://example.com/ +``` the following script is blocked and won't be loaded or executed: @@ -123,7 +125,9 @@ document.getElementById("btn").addEventListener('click', doSomething); To allow inline scripts and inline event handlers, `'unsafe-inline'`, a nonce-source or a hash-source that matches the inline block can be specified. - Content-Security-Policy: script-src 'unsafe-inline'; +``` +Content-Security-Policy: script-src 'unsafe-inline'; +``` The above Content Security Policy will allow inline {{HTMLElement("script")}} elements @@ -135,7 +139,9 @@ The above Content Security Policy will allow inline {{HTMLElement("script")}} el You can use a nonce-source to only allow specific inline script blocks: - Content-Security-Policy: script-src 'nonce-2726c7f26c' +``` +Content-Security-Policy: script-src 'nonce-2726c7f26c' +``` You will have to set the same nonce on the {{HTMLElement("script")}} element: @@ -147,7 +153,9 @@ You will have to set the same nonce on the {{HTMLElement("script")}} element: Alternatively, you can create hashes from your inline scripts. CSP supports sha256, sha384 and sha512. - Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8=' +``` +Content-Security-Policy: script-src 'sha256-B2yPHKaXnvFWtRChIbabYmUBFZdVfKKXHbWtWidDVF8=' +``` When generating the hash, don't include the {{HTMLElement("script")}} tags and note that capitalization and whitespace matter, including leading or trailing whitespace. @@ -173,16 +181,22 @@ The `'unsafe-eval'` source expression controls several script execution methods The `'strict-dynamic'` source expression specifies that the trust explicitly given to a script present in the markup, by accompanying it with a nonce or a hash, shall be propagated to all the scripts loaded by that root script. At the same time, any whitelist or source expressions such as `'self'` or `'unsafe-inline'` will be ignored. For example, a policy such as `script-src 'strict-dynamic' 'nonce-R4nd0m' https://whitelisted.com/` would allow loading of a root script with `