fetch
request to another web-site, it will probably fail.http://example.com
:hacker.com
could not access user’s mailbox at website gmail.com
. People felt safe.<form>
there. People submitted it into <iframe>
, just to stay on the current page, like this:<iframe>
from another site, it wasn’t possible to read the response.script
tag. A script could have any src
, with any domain, like <script src='http://another.com/…'>
. It’s possible to execute a script from any website.another.com
intended to expose data for this kind of access, then a so-called “JSONP (JSON with padding)” protocol was used.http://another.com
, such as the weather:gotWeather
.<script>
tag with src='http://another.com/weather.json?callback=gotWeather'
, using the name of our function as the callback
URL-parameter.another.com
dynamically generates a script that calls gotWeather(..)
with the data it wants us to receive.gotWeather
runs, and, as it’s our function, we have the data.Accept
,Accept-Language
,Content-Language
,Content-Type
with the value application/x-www-form-urlencoded
, multipart/form-data
or text/plain
.PUT
method or with an API-Key
HTTP-header does not fit the limitations.<form>
or a <script>
, without any special methods.DELETE
can’t be created this way. For a long time JavaScript was unable to do such requests. So an old server may assume that such requests come from a privileged source, “because a webpage is unable to send them”.Origin
header to it.https://anywhere.com/request
from https://javascript.info/page
, the headers will be like:Origin
header contains exactly the origin (domain/protocol/port), without a path.Origin
and, if it agrees to accept such a request, adds a special header Access-Control-Allow-Origin
to the response. That header should contain the allowed origin (in our case https://javascript.info
), or a star *
. Then the response is successful, otherwise an error.Origin
is sent with a cross-origin request.Access-Control-Allow-Origin
in the response, if it exists, then JavaScript is allowed to access the response, otherwise it fails with an error.Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma
Content-Length
header in the list!Access-Control-Expose-Headers
header. It contains a comma-separated list of non-simple header names that should be made accessible.Access-Control-Expose-Headers
header, the script is allowed to read Content-Length
and API-Key
headers of the response.GET/POST
, but also PATCH
, DELETE
and others.OPTIONS
, no body and two headers:Access-Control-Request-Method
header has the method of the non-simple request.Access-Control-Request-Headers
header provides a comma-separated list of its non-simple HTTP-headers.Access-Control-Allow-Origin
must be either *
or the requesting origin, such as https://javascript.info
, to allow it.Access-Control-Allow-Methods
must have the allowed method.Access-Control-Allow-Headers
must have a list of allowed headers.Access-Control-Max-Age
may specify a number of seconds to cache the permissions. So the browser won’t have to send a preflight for subsequent requests that satisfy given permissions.PATCH
request (this method is often used to update data):PATCH
Content-Type
is not one of: application/x-www-form-urlencoded
, multipart/form-data
, text/plain
.API-Key
header.OPTIONS
./service.json
.Origin
– the source origin.Access-Control-Request-Method
– requested method.Access-Control-Request-Headers
– a comma-separated list of “non-simple” headers.Access-Control-Allow-Origin: https://javascript.info
Access-Control-Allow-Methods: PATCH
Access-Control-Allow-Headers: Content-Type,API-Key
.PUT
, DELETE
and additional headers:PATCH
is in Access-Control-Allow-Methods
and Content-Type,API-Key
are in the list Access-Control-Allow-Headers
, so it sends out the main request.Access-Control-Max-Age
with a number of seconds, then the preflight permissions are cached for the given time. The response above will be cached for 86400 seconds (one day). Within this timeframe, subsequent requests will not cause a preflight. Assuming that they fit the cached allowances, they will be sent directly.Origin
header (because it’s cross-origin):Access-Control-Allow-Origin
to the main response. A successful preflight does not relieve from that:http://site.com
is accompanied by all cookies from that domain. But cross-origin requests made by JavaScript methods are an exception.fetch('http://another.com')
does not send any cookies, even those (!) that belong to another.com
domain.fetch
, we need to add the option credentials: 'include'
, like this:fetch
sends cookies originating from another.com
with request to that site.Access-Control-Allow-Credentials: true
to the response, in addition to Access-Control-Allow-Origin
.Access-Control-Allow-Origin
is prohibited from using a star *
for requests with credentials. Internet speed test 3 0 test. Like shown above, it must provide the exact origin there. That’s an additional safety measure, to ensure that the server really knows who it trusts to make such requests.Accept
Accept-Language
Content-Language
Content-Type
to the value application/x-www-form-urlencoded
, multipart/form-data
or text/plain
.<form>
or <script>
tags, while non-simple were impossible for browsers for a long time.Origin
header, while for the other ones the browser makes a preliminary “preflight” request, asking for permission.Origin
header with the origin.Access-Control-Allow-Origin
to *
or same value as Origin
Access-Control-Allow-Origin
to same value as Origin
Access-Control-Allow-Credentials
to true
Cache-Control
, Content-Language
, Content-Type
, Expires
, Last-Modified
or Pragma
, the server should list the allowed ones in Access-Control-Expose-Headers
header.OPTIONS
request to the same URL, with headers:Access-Control-Request-Method
has requested method.Access-Control-Request-Headers
lists non-simple requested headers.Access-Control-Allow-Methods
with a list of allowed methods,Access-Control-Allow-Headers
with a list of allowed headers,Access-Control-Max-Age
with a number of seconds to cache permissions.