---
title: How Client-Side Protection works
summary: null
url: >-
https://www.fastly.com/documentation/guides/security/client-side-protection/how-it-works
---
Client-Side Protection integrates with the Next-Gen WAF to monitor and control the resources that load on end users' browsers. The WAF inserts Content-Security-Policy headers into responses, enabling Fastly to [inventory scripts](https://www.fastly.com/documentation/guides/security/client-side-protection/how-it-works#about-the-inventory) and [enforce your policies](https://www.fastly.com/documentation/guides/security/client-side-protection/how-it-works#about-the-policy).
## About websites and Pages
To use Client-Side Protection, you first [define the areas](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-websites-and-pages) of your web application to monitor by creating at least one _website_ and _Page_. A website is a base URL (e.g., `https://www.example.com`) and a Page is one or more paths on that website (e.g., `/checkout`). Together, a website and Page define the full URLs that Client-Side Protection monitors and protects.
## About the inventory
For every Page that you create, Fastly observes the client-side scripts and [security-impacting response headers](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory#monitoring-response-headers) that load and creates an inventory. To create and maintain the inventory, the Next-Gen WAF inserts the `Content-Security-Policy-Report-Only` header into a sample of responses for a Page. This header makes it possible for Fastly to observe and collect the scripts and response headers for the inventory.
| Type | Collection frequency |
| ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Client-side scripts | Every three days, Fastly pulls the observed scripts into the inventory and stores them. When Fastly fails to re-inventory a script for 90 days, Fastly removes the script from the inventory. |
| Security-impacting response headers | Fastly logs the security-impacting response headers for all responses that have the `Content-Security-Policy-Report-Only` response header. |
Every three days, Fastly sends you a list of the response headers that changed to the [email address you defined](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-websites-and-pages#managing-pages) on the associated Page. The changes are grouped into 60-minute periods.
From the [Inventory](https://manage.fastly.com/security/inventory) page in the Fastly control panel, you can:
- add an [authorization status](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory#reviewing-inventoried-scripts) and comment for each observed script to help keep track of the scripts that you've reviewed and why certain scripts are or aren't approved.
- view the security-impacting response headers from the last-logged response.
If you think that a response header value is dangerous or that a script shouldn't be loading on your web application, investigate the issue and take action accordingly.
## About the policy
After reviewing the inventory for a Page, you can [create a policy](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#creating-a-policy). A policy is made up of [directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives), which tell the end user's browser what resources it's allowed to load and from where. Each directive controls one type of resource. For example, the `script-src` directive controls the allowed sources for JavaScript.
Client-Side Protection works with the Next-Gen WAF to add your policy to responses that pass through the WAF for the associated Page. Depending on whether Client-Side Protection is in [blocking or logging mode](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#changing-the-protection-mode), the Next-Gen WAF adds the [`Content-Security-Policy`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy) or the [`Content-Security-Policy-Report-Only`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy-Report-Only) response header. These headers deliver the policy to the end user's browser, and in the case of blocking mode, tell the end user's browser to enforce the policy. For example, if Client-Side Protection is in blocking mode and the `script-src` directive doesn't list `www.example.com` as an allowed source, the end user's browser blocks all scripts from `www.example.com`.
In both blocking and logging mode, the end user's browser logs the policy violation and sends a [report](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#monitoring-policy-violation-reports) to Fastly. If the violation is unique, Fastly stores the report. Violation uniqueness is defined by the following properties:
- Website and Page (e.g., `www.example.com/cc`)
- Effective or violated directive (e.g., `script-src`)
- Policy
> **HINT:** When you make a change to your policy and activate the change, the activated policy is considered different from the previous version of the policy.
- Disposition (i.e., blocking or logging mode)
- Blocked URI (e.g., `https://example.com/js/library.js`)
- HTTP response status code
- Sample of the script if the effective directive is `script-src`
If a policy violation is not unique, Fastly increases the count on the existing report for the identical violation by one. We store reports for 90 days.
You can access stored reports from the [Reports](https://manage.fastly.com/security/reports) page in the Fastly control panel. If you want to update your policy based on a report, make note of the relevant effective directive and blocked URI, go to the [Policy](https://manage.fastly.com/security/policy) page, and add a new value for the effective directive, being sure to adhere to [fetch directive syntax](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax).
| Protection mode | Response header | Actions taken when a resource violates the policy |
| --------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Blocking | `Content-Security-Policy` | - The end user's browser blocks the resource and logs the policy violation.
- The end user's browser sends a policy violation report to Fastly.
- If the violation is unique, Fastly stores the report. If not, Fastly increases the count on the report for the identical violation.
|
| Logging | `Content-Security-Policy-Report-Only` | - The end user's browser logs the policy violation.
- The end user's browser sends a policy violation report to Fastly.
- If the violation is unique, Fastly stores the report. If not, Fastly increases the count on the report for the identical violation.
|
| Off | None, the policy is not sent to the end user's browser. | None |