Quartz 4

CORS and Same Origin Policy

2 min read

Origin

  • Defined as combination of:
    • URI scheme
    • hostname
    • port

Same Origin Policy

  • Same Origin Policy prevents JS from making request across domain boundaries
  • This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page’s Document Object Model.

CORS

  • Cross-Origin Resource Sharing
  • Policy to request cross-origin resources from browser

Origin Header

  • If a request is cross origin, then browser automatically sends Origin in the request header
  • If we request https://anywhere.com/request from https://javascript.info/page, the headers will look like:
GET /request
Host: anywhere.com
Origin: https://javascript.info
...

Safe Requests

  • Safe request can be made with a <form> or a <script> without any special methods.
  • Even a very old server should be ready to accept a safe request.
  • A request is safe if it satisfies:
    • CORS-safe-listed method: (not to be confused with Safe Methods
      • GET, POST and HEAD
    • CORS-safe-listed request-header:
      • Accept
      • Accept-Language
      • Content-Language
      • Content-Type with the following possible values:
        • application/x-www-form-urlencoded
        • multipart/form-data
        • text/plain

Cross-Origin Pre-Flight Request

  • If a request is unsafe, then a pre-flight request is made automatically by browser
  • It asks for permission from the browser to allow cross origin requests
  • Pre-flight request is always completed first before sending the actual request, even though devtools might say that it is fired after actual request
  • It is invisible to JS
  • Request:
    • method: OPTIONS
    • No body
    • Headers:
      • Access-Control-Request-Method: method of unsafe request, for example: PATCH
      • Access-Control-Request-Headers: comma-separated list of unsafe headers, for example: Content-Type,API-Key
      • Origin: for example: https://javascript.info
  • Response:
    • status: 200
    • No body
    • Headers:
      • Access-Control-Allow-Origin: must be either * or the requesting origin
      • Access-Control-Allow-Methods: must have the allowed method.
      • Access-Control-Allow-Headers: must have a list of allowed headers.
      • Access-Control-Max-Age: (optional) 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.

Cross-Origin Safe Request

  • If the request is safe or preflight is successful
  • Request:
    • Headers:
      • Origin
  • Response:
    • Headers:
      • Access-Control-Allow-Origin
      • Access-Control-Expose-Headers: (optional) To allow list of headers accessible via JS other than the safe response headers
      • Access-Control-Allow-Credentials: (optional) true/false to enable credentials

Safe Response Headers

  • Cache-Control
  • Content-Language
  • Content-Length
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

Graph View

Backlinks