---
title: Managing your policy
summary: null
url: >-
  https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy
---

After reviewing your [inventory](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory), you can create a [content security policy](https://www.fastly.com/documentation/guides/security/client-side-protection/how-it-works#about-the-policy) that controls which resources (e.g., scripts, images, and fonts) are allowed to load on end users’ browsers for a [Page](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-websites-and-pages/#managing-pages). The policy tells browsers to block or report resources that load from sources you haven’t approved, helping guard against [cross-site scripting attacks](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS).

Policies have an active and draft state and are versionless. When you make a change to a policy, a draft of the policy is created. You must activate the draft policy to push the change to the active policy. Once the draft policy is activated, the active policy will reflect the change and the draft policy is deleted.

## Before you begin

Before creating and managing a policy, you must [set up Client-Side Protection](https://www.fastly.com/documentation/guides/security/client-side-protection/getting-started) by creating at least one website and Page.

## Limitations and considerations

When working with policies, keep the following in mind:

- When an object evaluated by the Next-Gen WAF is cached, the policy attached to the object is also cached. Both the object and policy are served together for as long as the object remains in the cache. If you update the policy, cached objects won't reflect the updated policy until the object is removed from cache and passes through the WAF again.
- A policy cannot be deleted. To prevent a policy from being added to responses, set the [**Protection mode** setting](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#changing-the-protection-mode) to **Off**.

## Creating a policy

To create a policy, complete the following steps:

1.   Log in to the [Fastly control panel](https://manage.fastly.com).

2.   Go to **Security** > **Client-Side Protection** > [**Policy**](https://manage.fastly.com/security/policy).

3. From the workspaces bar, click the menu <span class="inline-icons"><img src="/img/icons/chevron-down.png" alt="Menu icon" /></span> to the right of the Page name and select a Page.
4. Click **Create policy**. A blank policy is created in draft state.
5. [Add values](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#adding-directive-source-values) for the directives on the policy, being sure to use [fetch directive syntax](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax).
6. From the **Protection mode** menu, select **Blocking** or **Logging**. The [Protection mode](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#changing-the-protection-mode) setting tells the end user's browser how to handle policy violations.
7. Click **Activate** to activate the policy.

## Managing directive source values

A policy is made up of [directives](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives). Each directive controls one type of resource and has source values. The [source values](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax) define where that type of resource can be loaded from. For example, the `script-src` directive controls the allowed sources for JavaScript. Potential values for `script-src` are as follows:

> **HINT:** This table only covers four syntax options for values. For a complete list, read Mozilla's [Fetch directive syntax](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax).

| Syntax option         | Example value               | Description                                                                                                                                                                                                                                                                                                                                     |
| --------------------- | --------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `none`                | `none`                      | Blocks all JavaScript resources from loading. If you use this value, the directive can't have any other values.                                                                                                                                                                                                                                 |
| `self`                | `self`                      | Allows loading of JavaScript resources from the same origin. For example, let's say the end user makes a request to `https://example.com`. The browser would load `https://example.com/foo.js` because the resource has the same origin. However, it would prevent `https://example.org/foo.js` from loading because it has a different origin. |
| `<host-source>`       | `https://*.example.com`     | Allows loading of JavaScript resources from subdomains of `example.com`.                                                                                                                                                                                                                                                                        |
| `nonce-<nonce_value>` | `nonce-1234-abcd-5678-efgh` | Allows loading of JavaScript resources that have a tag with the matching `nonce`: `<script nonce="1234-abcd-5678-efgh"/>`. A [`nonce`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) is a random string that your web server creates for a webpage.                                                                |

### Adding directive source values

To add a directive source value, complete the following steps:

1.   Log in to the [Fastly control panel](https://manage.fastly.com).

2.   Go to **Security** > **Client-Side Protection** > [**Policy**](https://manage.fastly.com/security/policy).

3. From the workspaces bar, click the menu <span class="inline-icons"><img src="/img/icons/chevron-down.png" alt="Menu icon" /></span> to the right of the Page name and select a Page.
4. Find the appropriate directive and click **Add value**.
5. In the **Directive source** field, enter the source that you want to allowlist. Be sure to use [fetch directive syntax](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax).
6. Click **Add source**. A draft of the policy is created and the value is added to the directive.
7. Click **Activate** to activate the policy.

### Editing directive source values

To edit a directive source value, complete the following steps:

1.   Log in to the [Fastly control panel](https://manage.fastly.com).

2.   Go to **Security** > **Client-Side Protection** > [**Policy**](https://manage.fastly.com/security/policy).

3. From the workspaces bar, click the menu <span class="inline-icons"><img src="/img/icons/chevron-down.png" alt="Menu icon" /></span> to the right of the Page name and select a Page.
4. Click the pencil <span class="inline-icons"><img src="/img/icons/pencil.png" alt="Pencil icon" /></span> to the right of the directive value that you want to edit.
5. In the **Directive source** field, update the source that you want to allowlist. Be sure to use [fetch directive syntax](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#fetch_directive_syntax).
6. Click **Update value**. A draft of the policy is created and the value is updated.
7. Click **Activate** to activate the policy.

### Deleting directive source values

To delete a directive source value, complete the following steps:

1.   Log in to the [Fastly control panel](https://manage.fastly.com).

2.   Go to **Security** > **Client-Side Protection** > [**Policy**](https://manage.fastly.com/security/policy).

3. From the workspaces bar, click the menu <span class="inline-icons"><img src="/img/icons/chevron-down.png" alt="Menu icon" /></span> to the right of the Page name and select a Page.
4. Click the trash <span class="inline-icons"><img src="/img/icons/trash.png" alt="Trash icon" /></span> to the right of the directive value that you want to delete.
5. Click **Remove value**. A draft of the policy is created and the value is removed from the directive.
6. Click **Activate** to activate the policy.

## Changing the protection mode

Protection mode is a policy setting that tells the end user's browser how to handle policy violations (i.e., block or log the resource). To change the protection mode, complete the following steps:

1.   Log in to the [Fastly control panel](https://manage.fastly.com).

2.   Go to **Security** > **Client-Side Protection** > [**Policy**](https://manage.fastly.com/security/policy).

3. From the workspaces bar, click the menu <span class="inline-icons"><img src="/img/icons/chevron-down.png" alt="Menu icon" /></span> to the right of the Page name and select a Page.

4. From the **Protection mode** menu, select one of the following options:

   - **Blocking:** the end user's browser blocks resources that violate the policy from loading and sends a policy violation report to Fastly.
   - **Logging:** the end user's browser allows resources that violate the policy to load and sends a policy violation report to Fastly.
   - **Off:** the policy is disabled and not sent to the end user's browser.

   A draft of the policy is created.

5. Click **Activate** to activate the policy.

## Monitoring policy violation reports

You can view [unique policy violation](https://www.fastly.com/documentation/guides/security/client-side-protection/how-it-works#about-the-policy) reports from the [Reports](https://manage.fastly.com/security/reports) page in the Fastly control panel. For each report, the following information is available:

- **Directive:** the [directive](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives) whose enforcement caused the violation.
- **Blocked URI:** the URI of the resource that violated the policy. Depending on the policy's protection mode, this resource was either blocked or logged.
- **Status code:** the HTTP status code of the resource that violated the policy.
- **Disposition:** whether the resource that violated the policy was blocked or logged per the policy's protection mode.
- **Count:** the number of times the exact violation was reported.
- **Last seen:** the date and time the last instance of the policy violation was reported.
- **First seen:** the date and time the first instance of the policy violation was reported.

If you want to update your policy based on a report, make a 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](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy#adding-directive-source-values) for the effective directive.
