Modern web applications are very complex, which on average load 209 client side resources-such as scripts, images and stylesheets to enhance functionality and user experience. Malicious attackers and cybercriminals can exploit vulnerabilities in these resources to execute Cross-Site Scripting (XSS) or Clickjacking. Studies reveals around 65%1of websites are exposed to XSS vulnerabilities highlights, major target for cybercriminals.

Given the growing threat landscape and attack surface area,it is essential to implement some security measures to reduce the potential for such exploitation.Content Security Policy(CSP) is one the effective defenses helping to counter this threat. In this blog we will explore what content security policy(CSP) is,the need for CSP and how to implement it.

What is Content security policy(CSP)

Content security policy(CSP) is a security feature designed to give an additional layer of security for web applications from certain types of attacks. In simple terms, CSP is a protocol that decides what content loads into a website. CSP is widely supported by all web browsers and originally called content restrictions, developed by Robert Hansen in 2004.

CSP headers examples 

1.Content-Security Policy:default-src ‘self’;

default-src ‘self: this CSP header specifies that all resources must be loaded from the same domain,protocol and port.

2.Content-Security Policy:default-src ‘self’;            

script-src ‘self’https://exmaple.com;                             

style-src ‘self’ https://examplefont.com;

script-src ‘self’https://exmaple.com; which allows Javascript to be only loaded from the same origin and only from ‘https://exmaple.com.

style-src ‘self’ https://examplefont.com; Which allows the styles to be loaded from the same origin and  https://examplefont.com.

Need for CSP 

Content Security Policy(CSP) is a powerful defense against code injection and cross-site-scripting(XSS) attacks, both listed in the OWASP’s top 10 web application security risks. XSS attacks exploit the browser’s trust by injecting meticulous code to comprise web applications. A successful XSS attack can give threat actors access to login informatio and other sensitive data.

CSP also mandates the use of  HTTPS protocol for any value specified in *-src attributes by adding the prefix https:// to every URL in the whitelist. This makes sure no resources are allowed to load with an unencrypted HTTP connection.CSP reduces the attack surface for attackers.

CSP also neutralizes the following types of attacks against web applications

✅Clickjacking-An interface-based attack in which users are tricked into a webpage element that is masked as another element, which can cause users to download malware and visit malicious pages unwittingly. Stats show clickjacking has a 98% success rate.

✅Data Injection Attacks-Content Security Policy(CSP) can prevent data injection attacks, by controlling which sources of content can be loaded, such as targeting forms, request parameters, or embedded content like advertisements or third-party widgets.

How does Content security policy(CSP) work

A CSP is a layer of protection for your website to detect and block meticulous data injections and XSS from the client end.Threat actors launch these types of attacks against the website to infect it with malware,stealing sensitive data from servers,spamming seo campaigns etc.

Every time the browser loads a page with CSP enabled, it always checks with CSP to see that the particular content on the website is permitted to load. If the content is not allowed, the browser will block it. This prevents attackers from injecting meticulous code. A website without CSP can be blocked by search authorities, affecting the website traffic, rankings, etc.

How to Implement CSP in your web Application

Step 1:Defining your CSP

The first and foremost step in implementing CSP is to define what type of content is permitted to be loaded and executed. Start by identifying the external resources like scripts, styles, fonts, and images the web application relies on. For instance, to prevent javascript from loading on your site.

Content-Security Policy:script-src ‘none’

Step 2:Implementing CSP in HTTP Headers

After defining the CSP,it can be implemented by adding it it to the content-security-policy header in web server configuration,

For example in apache, 

Header set Content-Security Policy:script-src ‘none’

In Nginx

add_header set Content-Security Policy:script-src ‘none’

Step 3:Testing the Implemented CSP

After implementing the CSP, it is essential to test it thoroughly to ensure only the legitimate contents are not loaded.CSP violations will be logged in the browser’s developer console, web developers can analyze it to refineCSP over time. Use Content-Security-Policy-Report-Only header to test the policy without enforcing it.

Step4:Enforcing CSP

Once everything is tested and the issues are sorted out,web developers can enforce the policy by using Content-Security-Policy header instead of Content-Security-Policy-Report-Only header.

Best Practices for Implementing CSP

✅Start with Report-only Mode

First start with a Content-Security-Policy-Report-Only header to gather an idea on what to be blocked without affecting the users. This will help web developers or admins identify the content that might be affected by CSP implementation.

✅Use Hashes

XSS vulnerabilities often stem from inline scripts, while CSP allows them only with hashes. So instead of using inline scripts, use hashes to ensure only trusted inline scripts are executed.

✅Regularly update and review  Content security policy(CSP)

As the web application evolves, the external resources it relies on also change. Regularly update and review the Content security policy(CSP) to ensure its effectiveness.

✅Use strict-dynamic keyword

The strict-dynamic keyword usage allows the CSP to trust dynamically loaded scripts from a source listed in script-src. This is helpful in web applications in which script sources are dynamic.

✅Implement Subresource Integrity(SRI)

When using third-party resources, always implement Subresource Integrity(SRI) to strengthen the security.SRI makes sure that third-party resources are not tampered with by verifying their integrity using hashes. 

✅Use frame-ancestors Directive

The use of the frame-ancestors directive prevents the site from embedding within iframes on malicious sites. frame-ancestors ‘none’; prevents the embedding i.e. clickjacking.

Conclusion

To safeguard web application against injection attacks and cross-scripting attacks(XSS), Implementing a strong CSP is essential. Regularly updating the CSP is crucial not only for preventing cyber attacks but also for ensuring compliance with latest PCI DSS 4.0 standards, which asks site owners to offer protection against client-side web skimming attacks.

A well maintained and updated CSP enhances user experience and protects businesses from various compliance violations,penalties,breaches and reputational damages.  

References 

1.https://www.imperva.com/blog/addressing-limitations-of-http-content-security-policy-headers/

2.https://www.usenix.org/system/files/conference/usenixsecurity12/sec12-final39.pdf