Skip to content

Instantly share code, notes, and snippets.

@kafkahw

kafkahw/diff-btw-CORS-CSP.md

Created October 24, 2018 15:04
Show Gist options
  • Save kafkahw/2e77abec646e625cda7a930ec5d67555 to your computer and use it in GitHub Desktop.
Save kafkahw/2e77abec646e625cda7a930ec5d67555 to your computer and use it in GitHub Desktop.
Download ZIP
CORS and CSP
Raw
diff-btw-CORS-CSP.md

CORS

Cross-origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell a browser to let a web app running at one origin have permission to access selected reosurces from a server at a different origin.

HTTP Headers

  • Access-Control-Allow-Origin: http://foo.example
  • Access-Control-Allow-Methods: POST, GET, OPTIONS
  • Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
  • Access-Control-Max-Age: 86400

CSP

Content-Security-Policy (CSP) response header allows website admin to control resources the user agent is allowed to load for a given page.

Directives

  • connect-src
  • font-src
  • img-src
  • media-src
  • frame-src (controls src in iframe or frame)
  • manifest-src

Difference btw CSP and CORS

CORS allows a site A to give permission to site B to read (potentially private) data from site A (using the visitor's browser and credentials).

CSP allows a site to prevent itself from loading (potentially malicious) content from unexpected sources (e.g. as a defence against XSS).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment