Preventing XSS Attacks with Content Security Policy (CSP)
What is CSP
Content Security Policy (CSP) is an additional security layer that helps detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data attacks. These attacks can be used for various purposes, from data theft and website defacement to distributing malware.
How CSP works
When the server responds in the header with the Content-Security-Policy tag or a <meta> tag in the HTML document like:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
the supporting browser will immediately activate user protection measures by restricting the loading and execution of resources such as Javascript, CSS, iframe, Web Worker, fonts...
For example, the <meta> tag is equivalent to setting the Content-Security-Policy attribute in the response header as:
Content-Security-Policy: default-src 'self'
the browser will only load resources if they originate from the current domain (excluding subdomains).
However, it is still best practice to respond with the Content-Security-Policy attribute in the header to activate CSP, as <meta> tags will be ignored if an attacker injects code in front. Furthermore, some policy tags do not work with <meta>.
Setting policies
By setting policy tags together, you can create a comprehensive policy for your website. There are many policy tags to choose from, such as default-src or script-src to prevent inline code execution or eval(), default-src or style-src to restrict the application of styles from <style> tags or inline style attributes.
You can view the complete list of policy tags at Content-Security-Policy header.
Examples:
Only load content from the current domain and subdomains:
Content-Security-Policy: default-src 'self' example.com *.example.com
Load images from any source, restrict loading of videos or audios, and script files:
Content-Security-Policy: default-src 'self'; img-src *; media-src example.org example.net; script-src userscripts.example.com
Configuration reporting
Reporting configuration helps us detect attempts to attack the website. By setting the report-uri tag in the Content-Security-Policy attribute along with the report URI, the browser will automatically send a POST request to that address with the detailed information about the attack in the request body.
For example, the Content-Security-Policy attribute is defined as:
Content-Security-Policy: default-src 'none'; style-src cdn.example.com; report-uri http://reportcollector.example.com/collector.cgi
Create an HTML file:
<!DOCTYPE html>
<html>
<head>
<title>Sign Up</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
... Content ...
</body>
</html>
Clearly, href="css/style.css" violates the style-src cdn.example.com policy. So if you run the html file in the browser, it will send a POST request to the report-uri with the following content:
{
"csp-report": {
"document-uri": "http://example.com/signup.html",
"referrer": "",
"blocked-uri": "http://example.com/css/style.css",
"violated-directive": "style-src cdn.example.com",
"original-policy": "default-src 'none'; style-src cdn.example.com; report-uri http://reportcollector.example.com/collector.cgi"
}
}
Conclusion
Content Security Policy is a solution to prevent XSS attacks and other types of attacks, such as clickjacking and code injection, that target the execution of malicious content within the context of a website. It works by loading and executing resources only from explicitly defined sources through the Content-Security-Policy response header or the <meta> tag in the HTML code.
References:
Me & the desire to "play with words"
Have you tried writing? And then failed or not satisfied? At 2coffee.dev we have had a hard time with writing. Don't be discouraged, because now we have a way to help you. Click to become a member now!
Subscribe to receive new article notifications
Hello, my name is Hoai - a developer who tells stories through writing ✍️ and creating products 🚀. With many years of programming experience, I have contributed to various products that bring value to users at my workplace as well as to myself. My hobbies include reading, writing, and researching... I created this blog with the mission of delivering quality articles to the readers of 2coffee.dev.Follow me through these channels LinkedIn, Facebook, Instagram, Telegram.
Comments (2)
