Everything you need to know about CSP Header 🔬
What is a CSP ?
- CSP stands for Content Security Policy which is a mechanism to define which resources can be fetched out or executed by a web page.
- In other words, it can be understood as a policy that decides which scripts, images, iframes can be called or executed on a particular page from different locations.
Why it is used?
- Content Security Policy is widely used to secure web applications against content injection like cross-site scripting attacks.
- Also by using CSP the server can specify which protocols are allowed to be used.
How Does it work?
- CSP works by restricting the origins that active and passive content can be loaded from.
- From there, it’s browser’s call to follow that policy and actively block violations as they are detected.
Common CSP directives:
Common CSP sources:
An Example:
Content-Security-Policy: default-src 'self'; script-src https://bhaveshthakur.com; report-uri /Report-parsing-url;
<img src=image.jpg>--> This image will be allowed as image is loading from same domain i.e. bhaveshthakur.com<script src=script.js>--> This script will be allowed as the script is loading from the same domain i.e. bhaveshthakur.com<script src=https://evil.com/script.js>--> This script will not-allowed as the script is trying to load from undefined domain i.e. evil.com"/><script>alert(1337)</script>--> This will not-allowed on the page.
Automatic Analysis
There are few online tools that are very helpful.
Credit
Based on Bhavesh Thakur's writeup.