Capture Content Security Policy (CSP) Violations with Sentry

There are nearly two billion websites live at this very moment. That’s almost two billion chances for data to be stolen and malware to be distributed. Don’t worry! Or maybe do worry, but just not too much. Protections have been developed to keep data and websites safe.

Content Security Policy

One such measure (and the focus of this post) is the Content Security Policy(CSP) — a security standard which helps prevent cross-site scripting (XSS), clickjacking, and other code injection attacks resulting from execution of malicious content in the trusted web page context. It’s enforced by browser vendors, and Sentry supports capturing CSP violations using the standard reporting hooks.

How CSP Works

CSP sounds secure, but how is it actually used? First, web servers should be configured to return the Content-Security-Policy HTTP header. The value will be your CSP policy that states from which origins to permit content.

When configuring your web server, you can create policies to only permit certain types of content from safe sources.

Content-Security-Policy: default-src 'self' *.trusted.com; img-src *; media-src mediasouce1.com mediasource2.com; script-src scripts.trusted.com

In this example, by default, content is permitted from the document’s origin as well as trusted.com and its subdomains, with the following exceptions:

• Images may load from anywhere (note the ”*” wildcard).
• Media is only allowed from mediasource1.com and mediasource2.com (and not from subdomains of those sites).
• Executable script is only allowed from scripts.trusted.com.

Sentry & CSP

Now that the policy is configured, is there visibility into the violation and its details? Good news — Sentry supports capturing CSP violations using the standard reporting hooks (and we have supporting documentation)!

To integrate Sentry and CSP, you’ll need to configure the appropriate header with your project key’s Security Header endpoint found at Project Settings > Security Headers:

Content-Security-Policy: ...; report-uri https://sentry.io/api/<project>/security/?sentry_key=<key>

Sentry will receive violation report, and then process/store it (aggregating as necessary), and you can setup alert rules to be notified when new violations come up as well as when violations spike. The environment and release can also be specified.

Not ready for enforcing your policy, but want to know about violations? Not a problem. Test your policy using:

Content-Security-Policy-Report-Only: …; report-uri: …

Read over our thorough documentation to get started. If you have questions or feedback, post in our forum or issue tracker, or reach out to our customer success team and support engineers. They’re here to help. And also to code. But mostly to help.