Testing Content Security Policy (CSP) Headers

If you run a website you may want to add modern content-security-policy (CSP) headers to control which resources can be loaded on your site. This helps prevent common frontend hacks (like cross site scripiting) by specifying a list of rules in a header on the response from the server serving your website's HTML. This post will explain more.

What is CSP

A content security policy is a modern HTTP response header that can be attached to a response by a server to inform the browser about which resources can be safely loaded on the HTML that is delivered. The browser can then prevent other resources from executing on the page. This means that if another user somehow gets their own javascript onto the page (via an unsanitized input string) and you then execute the HTML in your browser the CSP header will tell the browser to disable that execution. This is a simple way to lock down the many different ways that a frontend site can fall victim to XSS attacks.

Implications for XSS

The implementation of Content Security Policy (CSP) has significant implications for mitigating Cross-Site Scripting (XSS) attacks, a prevalent and potentially damaging security threat. CSP empowers website administrators to explicitly define which external resources can be loaded and executed within their web applications. By doing so, CSP effectively reduces the attack surface for XSS vulnerabilities. When an attacker attempts to inject malicious scripts into a web page, CSP can prevent these scripts from executing if they do not conform to the predefined policy. This granular control over resource loading not only enhances the overall security posture of a website but also provides an additional layer of protection against XSS attacks, making it a crucial tool in the ongoing battle to secure web applications against ever-evolving threats.

Content security headers and SEO

Content Security Policy (CSP) itself does not have a direct impact on Search Engine Optimization (SEO) but there are indirect implications for SEO to consider:

• Security and User Trust: Implementing CSP enhances your website's security, which can indirectly contribute to a positive SEO impact. Secure websites are generally favored by search engines and are more likely to rank higher in search results. Additionally, a safer browsing experience can boost user trust and user engagement, potentially leading to better SEO performance over time.
• User Experience: CSP can affect how scripts and resources are loaded on a web page. While this doesn't directly influence SEO, it can impact user experience. A well-configured CSP can help ensure that your website functions correctly and efficiently, which can reduce bounce rates and improve user engagement—factors that indirectly affect SEO rankings.
• Avoiding Penalties: If your website is vulnerable to security threats like XSS attacks, it may be flagged by search engines or security services, potentially resulting in penalties or warnings. Such penalties can harm your website's SEO efforts. Implementing CSP can help protect your site from these vulnerabilities, reducing the risk of search engine penalties.
• Page Load Speed: CSP can affect the loading of resources, including scripts and stylesheets. While this is more related to website performance than SEO directly, it's worth noting that page load speed is a known ranking factor. A well-optimized CSP that efficiently manages resource loading can contribute to faster page load times, which can positively impact SEO.

In summary, while CSP itself is not a direct SEO ranking factor, its implementation can indirectly affect SEO by enhancing security, improving user experience, reducing penalties, and potentially contributing to faster page load times. It's essential to strike a balance between security measures like CSP and SEO optimization to ensure that your website remains both secure and well-positioned in search engine rankings.

How to view CSP headers

Many websites include CSP headers that you may not have noticed before. We can use curl in the terminal to view such headers. A good website to investigate is Mozilla Observatory - a mozilla site designed for CSP development. It just so happens that this website enforces a good CSP header.

Let's get the header and take a look. Request the site and send the body to /dev/null then grep the headers for the CSP.

curl -sD - https://observatory.mozilla.org/ -o /dev/null | grep Content-Security-Policy

The grepped results output looks similar to this:

Content-Security-Policy: default-src 'none'; base-uri 'none'; form-action 'self'; connect-src https://api.ssllabs.com https://hstspreload.org https://http-observatory.security.mozilla.org https://securityheaders.com https://sshscan.rubidus.com https://tls.imirhil.fr https://tls-observatory.services.mozilla.com https://www.immuniweb.com; font-src 'self'; frame-ancestors 'none'; img-src 'self'; script-src 'self'; style-src 'self'

Note the content security policy header: default-src 'none'; base-uri 'none' ... etc. This values of this

How to test Content Security Policy

You can use the open source Mozilla Observatory to scan any website for best content security policies.

Implementing CSP Headers

Now that you understand the importance of Content Security Policy (CSP) headers, let's delve into how you can implement them on your own website. To begin, you'll need to configure these headers on your web server. Most modern web servers, such as Apache, Nginx, and Microsoft IIS, support the addition of CSP headers in their configuration files. You can define the rules that dictate which resources are allowed to be loaded and executed on your site.

Here's a simple example of how to configure CSP headers in an Apache server's .htaccess file:

Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' https://fonts.googleapis.com; img-src 'self' data:;"

In this example, we're allowing resources to be loaded only from the same origin ('self') and a specific external domain (https://cdn.example.com) for scripts. Similarly, we're allowing styles to be loaded from both the same origin and Google Fonts, and images can be loaded from the same origin and data URLs. You can tailor these rules to suit your website's specific needs.

Reporting Violations

CSP headers not only help secure your website but also provide a mechanism for reporting policy violations. You can configure your CSP to report these violations to a specified endpoint using the report-uri directive. This allows you to monitor potential security threats and fine-tune your policy as needed. For example:

Header set Content-Security-Policy "default-src 'self'; report-uri /csp-report-endpoint;"

With this configuration, any CSP violation on your website will be reported to the '/csp-report-endpoint' URL, where you can collect and analyze the reports.

Staying Up-to-Date

It's crucial to stay up-to-date with CSP best practices and recommendations because the web security landscape is constantly evolving. Browser vendors frequently update their security features, and new vulnerabilities emerge. Regularly review and adjust your CSP policy to accommodate these changes and ensure that your website remains secure against emerging threats. Additionally, consider using tools and services that can automatically assess your CSP policy and suggest improvements, helping you maintain a robust defense against potential attacks. Remember, a well-configured CSP header is an essential component of a comprehensive web security strategy.