---
title: Page Integrity
product: vercel
url: /docs/vercel-firewall/page-integrity
canonical_url: "https://vercel.com/docs/vercel-firewall/page-integrity"
last_updated: 2018-10-20
type: conceptual
prerequisites:
  - /docs/vercel-firewall
related:
  []
summary: Learn about page integrity on Vercel.
install_vercel_plugin: npx plugins add vercel/vercel-plugin
---

# Page Integrity

> **🔒 Permissions Required**: Page Integrity

Page Integrity helps you detect, alert on, and block every script that runs on your pages. It uses browser-native [Content Security Policy](https://developer.mozilla.org/docs/Web/HTTP/CSP) (CSP) to inventory scripts, alert you when something changes, and block unauthorized scripts before they execute. No JavaScript is added to your page.

Page Integrity is designed to help you meet PCI DSS 4.0 requirements, in particular 6.4.3 (script management) and 11.6.1 (tamper detection).

## How it works

Page Integrity operates in three stages:

1. **Detect**: Vercel's CDN injects a `Content-Security-Policy-Report-Only` header on a sample of requests to your monitored pages. The browser reports every script it loads back to Vercel, where each one is added to your project's resource inventory and fingerprinted with a content hash that ignores cosmetic changes like whitespace, comments, and minifier renames.
2. **Alert**: Vercel notifies your team when a new script appears, an approved script's content changes, or a monitored security response header changes so a reviewer can approve or reject the change.
3. **Block**: Once your inventory is reviewed, you can turn on enforcement to instruct the browser to block any script that is not in your approved list.

Vercel also monitors the security-impacting response headers on your pages (`Content-Security-Policy`, `Strict-Transport-Security`, `X-Frame-Options`, and `X-Content-Type-Options`) and flags any change against the stored baseline.

## Getting started

To turn on Page Integrity for a project:

1. Select your project from the [Dashboard](/dashboard).
2. Open **Firewall** in the sidebar, then select **Page Integrity**.
3. Select **Configure**.
4. Configure the page paths you want to monitor, such as `/checkout` or `/cart/*`. Only requests that match these paths receive the report-only CSP header.
5. Leave the feature in monitoring mode for at least seven days so it can capture the full range of scripts that load across different traffic patterns.
6. Review the **Resource Inventory** as scripts arrive. For each script, enter a business justification and select **Approve** or **Reject**.

> **💡 Note:** Page Integrity discovers scripts from sampled production traffic, so allow
> time for low-traffic pages to be observed before you assume the inventory is
> complete.

## Enabling alerting

Alerts notify your team when something on a monitored page changes. They fire when:

- A new script is observed
- The content of an approved script structurally changes
- A monitored security response header changes

To configure who receives alerts:

1. From the **Page Integrity** tab, select **Configure**.
2. Under **Alerts**, toggle **Subcribe Team Owners** to send alerts to every owner on the team.
3. Toggle **Notify Me** to send alerts to your own account.
4. Save your changes.

## Enabling blocking

When blocking is enabled, Vercel's CDN builds a `Content-Security-Policy` header from your approved inventory and applies it to monitored pages. The browser blocks any script that is not in the approved list before it can run. Blocking is enforced by the browser engine, so a compromised script on the page cannot disable it.

Before you turn on blocking, your inventory must contain approved or rejected entries.

To enable blocking:

1. From the **Page Integrity** tab, select **Configure**.
2. Review the preview which lists the CSP rule that would be configured. Any resources not on the list will be blocked.
3. Toggle **Enable Blocking**. The enforcement percentage starts at 5 percent.
4. Monitor the **resource inventory** view for unexpected blocks. If something legitimate is blocked, approve the resource from the inventory to unblock it.
5. Gradually increase the enforcement percentage to 100%.

> **💡 Note:** If your origin already sends a `Content-Security-Policy` header, Vercel
> replaces its `script-src` directive with your approved inventory. All other
> directives pass through untouched. The `'unsafe-inline'`, `'unsafe-eval'`, and
> `'strict-dynamic'` keywords are removed from the merged policy so that
> origin-based blocking is effective.

### Script Nonces

The blocking Content Security Policy header requires that nonces are added to any inline script on the page. Vercel automatically generates a nonce value included in the `Content-Security-Policy` header and provides that value to your application in the `x-nonce` request header. Your application can fetch the value from the request header and then use it anywhere that your application uses an inline script.

If using Next.js, follow the nonces documentation in the [Next.js Content Security Policy guide](https://nextjs.org/docs/app/guides/content-security-policy#nonces).


---

[View full sitemap](/docs/sitemap)