Antomor logo

Antomor's personal website.

Where ideas become words (maybe)


Definitions and relation between Content-Security-Policy and Cross-Origin-Resource-Sharing


3-Minute Read

A lock

What is CSP

CSP stands for Content Security Policy and it is a security mechanism that helps to protect or mitigate some common attacks such as XSS (Cross-site scripting). It can be set by means of Content-Security-Policy HTTP header or using HTML meta tag.

HTTP header:

Content-Security-Policy: policy

HTML Meta tag:

<meta http-equiv="Content-Security-Policy" content="policy">

A policy describes a set of directives composed by the area in which the rule is applied and the rule itself. The policy directive default-src 'self' says to load all the content from the site’s origin, while if we want to load the content from the site and from another trusted domain, the policy would be Content-Security-Policy: default-src 'self' *

What is CORS

CORS stands for Cross-Origin Resource Sharing and it is a mechanism that permits a web application running at an origin to access resources served from a different origin. What is an origin? The origin is identified by domain, protocol and port. It uses a set of HTTP headers to declare what are the domains entitled to access the resource. Let’s have a look at the following scenario:

  1. We have a web application running on
  2. We have a web service running on
  3. web app wants to access the service published on

The service on should enable CORS by properly setting HTTP Headers. The headers involved in CORS are:

  • Access-Control-Allow-Origin - Origin can load the resource
  • Access-Control-Allow-Methods - Methods can be used to access the resource
  • Access-Control-Allow-Headers - Request headers allowed
  • Access-Control-Max-Age - Value in seconds describing for how long the pre-flight response is cached (wait, pre-what?)

Pre-flight request

When the browser encounters a cross-domain request, it performs a so-called pre-flight request. In practice it performs an HTTP request using the OPTIONS method to verify if CORS is enabled. If and only if the response is successful (response code 204 - No Content) and the previously mentioned HTTP headers are properly sets, the browser will send the real request.


So, what is the relation between CSP and CORS?

Let’s have a look at the previous scenario again.

  1. We have a web application running on
  2. We have a web service running on
  3. web app wants to access the service published on

As we have previously said, web service exposed on must enable CORS, but that could be not enough. If we configured CSP on web application, we need also to relax the connect-src policy directive allowing So to properly run the previous scenario:

  1. Enable CSP on
  2. Enable CORS on, by allowing using the Access-Control-Allow-Origin header.
  3. Relax the CSP (header or HTML tag), by setting the connect-src policy directive to allow the connection.

Very important notes

  • Please, setting CSP to be able to connect to everything (*) is a BAD CSP configuration, unless you know what you are doing.
  • Please, setting CORS to return always the Access-Control-Allow-Origin header set with * is a BAD CORS configuration, unless you know what you are doing.


comments powered by Disqus

Recent Posts



Software Engineer passionate about Security and Privacy. Nature and animals lover. Sports (running, yoga, boxing) practitioner.