Just another quick write up of a few thoughts on Content Security Policies (CSPs), CORS and X-frame-options. I've generally managed to avoid these by and large, with only minimal need to setup a CSP or tweek CORs settings to allow third party scripts to work or lock an application down after a pen test.
Firstly what are they all?
Content Security Policy
Essentially a single http header that sets out a content security policy for the application. This serves as an allow list for the browser not only when elements within a page reference offsite URIs in src attributes, but also for things like inline scripts and styles, form actions, workers, and even which sites are allowed to embed the page. So a strict CSP can say to a browser, only allow elements within this page context to request uris from the same origin. Or a more relaxed CSP could say, allow fonts from google fonts, some css from the bootstrap cdn etc. The default browser behaviour when there is no CSP is that it will allow all origins, with the caveat that js from your local origin cannot access the elements rendered from the remote origin, unless they have allowed this via CORS.
CORS Cross Origin Resource Sharing
CORS is about network requests. In a nutshell this will block the response from a request if the responding server doesn't include a header that allows it. This is the default behaviour of browsers, for example if site dodgywebsiteA sends a request to a banking website, unless the banking website lists dodgywebsiteA in a CORS header (Access-Control-Allow-Origin) the browser will block the response from being available to the local JS. This is just one tool in guarded against cross origin attacks, others would be CSRF tokens and samesite cookies.
X-Frame-Options
This is a setting that's been superceded by the CSP, more specifically the frame-ancestors directive within the CSP. X-Frame-Options controls which domains are able to embed your application in an iframe. The settings are DENY, SAMEORIGIN and ALLOW-FROM. So it's effectively nobody can embed the site, only the same origin can embed the app, or the list in ALLOW-FROM can embed the site.
So they’re essentially three different mechanisms that let website owners control what content is allowed to load and execute on their pages, and also how (or if) their content can be embedded or accessed by other sites and applications.
