# Web : CORS CORS is a mechanism to grant client-side web apps permission to access resources at a different origin despite the Same-Origin Policy. CORS := Cross-Origin Resource Sharing Origin := protocol + domain + port #### What requests use CORS? - invocations of `XMLHttpRequest` or Fetch APIs - Web Fonts (in `@font-face` within CSS) - WebGL textures - images/video frames drawn to a canvas using `drawImage()` *Some requests don’t trigger a CORS preflight. Those are often called "simple requests", though the Fetch spec (which defines CORS) doesn’t use that term.* #### Same-Origin Policy - Cross-origin writes are typically allowed. (Some requests require preflight.) - Examples are links, redirects, and form submissions. - To prevent cross-origin writes, check an unguessable token in the request, known as a Cross-Site Request Forgery (CSRF) token. - Cross-origin embedding is typically allowed. - Cross-origin reads are typically disallowed, but read access is often leaked by embedding. - For example, you can read the dimensions of an embedded image, the actions of an embedded script, or the availability of an embedded resource. #### Preflight Preflighted requests first send an `OPTIONS` request to the cross-domain resource to determine whether the actual request is safe to send. In particular, a request is preflighted if any of the following conditions is true: - methods: `CONNECT`, `DELETE`, `OPTIONS`, `PATCH`, `PUT`, `TRACE` - headers: any other than... - `Accept`, `Accept-Language`, `Content-Language`, `DPR`, `Downlink`, `Save-Data`, `Viewport-Width`, `Width` - `Content-Type( application/x-www-form-urlencoded | multipart/form-data | text/plain )` - one or more event listeners are registered on an `XMLHttpRequestUpload` object used in the request - a `ReadableStream` object is used in the request #### Headers ###### Origin - Indicates where a fetch originates from. - Sent with CORS requests, as well as with `POST` requests. - Is similar to `Referer`, but without the path. ###### Access-Control-Allow-Origin - Indicates which origin(s) the response can be shared with. - For success, the value must be either `*` or match the value of the `Origin` header. - Note: Attempting to use the wildcard with credentials will result in an error. - Note: If the server sends a response with a non-wildcard `Access-Control-Allow-Origin` header, the response should also include a `Vary` header with the value `Origin` to indicate that server responses can differ based on the value of the `Origin` request header. ###### Preflight Headers - `Access-Control-Request-Headers`, `Access-Control-Request-Method` Tells server which headers and method will be used. - `Access-Control-Allow-Headers`, `Access-Control-Allow-Methods` Tells client which headers and methods will be allowed. - `Access-Control-Max-Age` Tells client how long the results of a preflight request can be cached. Firefox caps this at 24 hours (86400 seconds) and Chromium at 10 minutes (600 seconds). Chromium also specifies a default value of 5 seconds. A value of -1 will disable caching, requiring a preflight OPTIONS check for all calls. ###### With Credentials By default, in cross-site `XMLHttpRequest` or Fetch invocations, browsers will not send credentials. A specific flag has to be set on the `XMLHttpRequest` object or the `Request` constructor when it is invoked. - server must include `Access-Control-Allow-Credentials: true` - server must specify an origin in `Access-Control-Allow-Origin`, not `*`