What is the difference between CORS and CSPs?
Solution 1
CORS allows the Same Origin Policy to be relaxed for a domain.
e.g. normally if the user logs into both example.com
and example.org
, the Same Origin Policy prevents example.com
from making an AJAX request to example.org/current_user/full_user_details
and gaining access to the response.
This is the default policy of the web and prevents the user's data from being leaked when logged into multiple sites at the same time.
Now with CORS, example.org
could set a policy to say it will allow the origin https://example.com
to read responses made by AJAX. This would be done if both example.com
and example.org
are ran by the same company and data sharing between the origins is to be allowed in the user's browser. It only affects the client-side of things, not the server-side.
CSPs on the other hand set a policy of what content can run on the current site. For example, if JavaScript can be executed inline, or which domains .js
files can be loaded from. This can be beneficial to act as another line of defence against XSS attacks, where the attacker will try and inject script into the HTML page. Normally output would be encoded, however say the developer had forgotten only on one output field. Because the policy is preventing in-line script from executing, the attack is thwarted.
Solution 2
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).
Solution 3
@JodySowald's comment, which I find more succinct:
Content-Security-Policy prevents calls to external resources and Cross-Origin-Resource-Sharing prevents calls from external sources. To provide an example. For
example.com
to showexample.net
in an iframe,example.com
must not blockexample.net
with its CSP settings andexample.net
must not blockexample.com
with its CORS settings.
Original answer:
None of the answers above give a clear and concise difference between CSP and CORS. Here is my way of thinking about them:
Let's say we have example.com
website that wants to send a request to example.net
.
- When user visits
example.com
in browser,example.com
server returnsexample.com
HTTP response, CSP restriction within this response can preventexample.com
in browser from issuing request toexample.net
. - If there is no CSP restriction within
example.com
HTTP response, thenexample.com
in browser can send a request toexample.net
. - Upon receiving the request,
example.net
server responds withexample.net
HTTP response, CORS restriction within this response can preventexample.com
in browser from loading it. (Note that by default, Same-origin policy will restrict the response from loading, unless otherwise specified by CORS)
So CSP protects example.com
and same-origin policy (the lack of CORS) protects example.net
in the example above.
Solution 4
CORS checks with the third party for authorization to use its services. So, the third party provides or denies authorization.
So for example if a page in www.example.com needs to make a request to www.example.org we need to send an OPTIONS request sent to www.example.org with Origin:www.example.com as a precursor to request for authorization. Now, www.example.org provides or denies authorization.
CSP prevents a webpage from inadvertently loading malicious content from a third party by specifying where a particular type of content can be loaded from. So, for example you can provide a valid source for each of the following scripts, css, media etc. by using directives
Example:
Content-Security-Policy: default-src 'none'; script-src 'self' www.google-analytics.com ajax.googleapis.com; connect-src 'self'; img-src 'self'; style-src 'self';
nickform
Updated on November 18, 2021Comments
-
nickform over 2 years
From my perspective, the technologies referred to as Cross-Origin Resource Sharing (CORS) and Content Security Policies (CSPs) seem to be very similar in purpose and implementation.
Both seem to allow you to whitelist the origins of resources which an uncompromised version of your webpage incorporates, via HTTP response headers. The only difference I can see is that CSPs seem to be more fine-grained in what you can approve in your HTTP response.
-
JepZ over 7 yearsMuch clearer and to the point than all mozilla/html5rocks/w3c documents together. Thx.
-
Vlas Bashynskyi about 6 yearscan CSP be used on site A to prevent site A from reading data from site B? I am talking mainly about xhr requests.
-
mathk over 5 yearsCan I say that CORS is a subset of what can be done with CSP ?
-
Quentin over 5 years@mathk — No. As I said in the answer, they are completely different things.
-
mathk over 5 yearsI mean if you do not allow the browser to download content from site B you will also guaranty that nothing will be sent to site B using CSP ?
-
Quentin over 5 years@mathk — Site A preventing data being sent to Site B (which can be achieved with CSP) is completely different to Site B preventing Site A from reading data from it (which is the default behaviour but which can be relaxed with CORS).
-
mathk over 5 yearsAre we agree that:
Site A preventing data being sent to Site B
-> Browser can not do aGET[other verb] A
. and ` Site B preventing Site A from reading data from it ` Browser can not do aPOST B <some data>
? -
Quentin over 5 years@mathk — No. Nothing is stopping JS on site A triggering a post request to site B. The Same Origin Policy just stops site A's JavaScript from reading the response.
-
mathk over 5 yearsLet us continue this discussion in chat.
-
Steve about 5 yearsIn this example, wouldn't the Same Origin policy protect def.net, whereas CORS removes this protection if enabled?
-
paradite about 5 years@Steve you are right, it's kind of a misnomer, I've updated my answer to reflect it.
-
Michael Terry almost 5 yearsWhen folks say these things are "completely different" that just makes the differences harder to understand because they aren't completely different. Same-origin policy (to which CORS is closely related) prevents reading cross-origin requests, the most common way a developer would come into contact with this policy. Likewise, one of the most common ways a developer would come into contact with CSP is because it is blocking cross-origin requests, e.g., in a greasemonkey script.
-
Jody Sowald about 4 yearsIs it a correct simplification to say that Content-Security-Policy prevents calls to external resources and Cross-Origin-Resource-Sharing prevents calls from external sources? to provide an example. For abc.com to show def.net in an iframe, abc.com must not block def.net with its CSP settings and def.net must not block abc.com with its CORS settings.
-
paradite over 3 years@JodySowald that would seem fitting.