Set Up Security Policy Reporting | Sentry for Next.js

Source URL: https://docs.sentry.io/platforms/javascript/guides/nextjs/security-policy-reporting

Set Up Security Policy Reporting | Sentry for Next.js

Sentry provides the ability to collect information on Content-Security-Policy (CSP) violations by setting the proper HTTP header which results in the violation to be sent to Sentry endpoint specified in report-uri.

The integration process consists of configuring the appropriate header with your project key’s Security Header endpoint found at Project Settings > Security Headers.

Content-Security-Policy

Content-Security-Policy (CSP) is a security standard that helps prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from the 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 CSP reporting hooks.

To configure CSP reports in Sentry, you’ll need to send a header from your server describing your policy and specifying the authenticated Sentry endpoint:

Content-Security-Policy: ...;
    report-uri https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___;
    report-to csp-endpoint

Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___"}],"include_subdomains":true}
Reporting-Endpoints: csp-endpoint="https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___"

Compatibility Recommendation

Though the report-to directive is intended to replace the deprecated report-uri directive, report-to isn’t supported in most browsers yet. So for compatibility with current browsers while also adding forward compatibility when browsers get report-to support, you can specify both report-uri and report-to in your Content-Security-Policy (CSP), as well as adding Report-To and Reporting-Endpoints headers.

Alternatively, you can set up CSP reports to simply send reports rather than enforcing the policy:

Content-Security-Policy-Report-Only: ...;
    report-uri https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___;
    report-to csp-endpoint

Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___"}],"include_subdomains":true}
Reporting-Endpoints: csp-endpoint="https://___ORG_INGEST_DOMAIN___/api/___PROJECT_ID___/security/?sentry_key=___PUBLIC_KEY___"

When defining your policy it is important to ensure that sentry.io or your self-hosted Sentry domain is in your default-src or connect-src policy, or browsers will block requests that submit policy violations.

For more information, see the article on MDN.

Additional Configuration

In addition to the sentry_key parameter, you may also pass the following within the query string for the report URI:

sentry_environment

The environment name (for example, production). The environment name is case-sensitive and can’t contain new lines, spaces, or forward slashes. It can’t be the string “None” or exceed 64 characters.

sentry_release

The version of the application.