--- title: Getting started with Client-Side Protection summary: null url: >- https://www.fastly.com/documentation/guides/security/client-side-protection/getting-started --- [Fastly Client-Side Protection](https://docs.fastly.com/products/fastly-client-side-protection) helps you monitor and control the resources (e.g., scripts, images, and fonts) that load on end users' browsers from defined areas of your web applications. Using the inventories that list the client-side scripts and [select response headers](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory#monitoring-response-headers) that Fastly observes, you can provide a justification as to why each client-side script is or isn’t allowed and build [content security policies](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) that tell browsers which resources they're allowed to load. These capabilities help you guard against [cross-site scripting attacks](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) (e.g., Magecart attacks) and maintain compliance with PCI DSS [4.0.1 - Sections 6.4.3 and 11.6.1](https://docs-prv.pcisecuritystandards.org/PCI%20DSS/Standard/PCI-DSS-v4_0_1.pdf). ## Prerequisites To use Client-Side Protection, be sure you have the following prerequisites in place: - Client-Side Protection is disabled by default. To purchase and enable the product, contact [sales@fastly.com](mailto:sales@fastly.com). - To be able to view and manage Client-Side Protection data, you must be assigned the [roles](https://www.fastly.com/documentation/guides/account-info/user-and-account-management/about-user-roles-and-permissions/#user-roles-and-what-they-can-do) of Next-Gen WAF Owner and Superuser or Next-Gen WAF Owner and Engineer. Users with other roles will receive an authorization error. - For Fastly to be able to inventory the client-side scripts on your web application, the [Next-Gen WAF](https://docs.fastly.com/products/fastly-next-gen-waf) must be monitoring that same web application. - If you have an [On-Prem WAF](https://www.fastly.com/documentation/guides/next-gen-waf/setup-and-configuration/about-deploying-the-next-gen-waf#about-on-prem-waf-deployment) deployment, [verify that the Next-Gen WAF agent and module versions](https://www.fastly.com/documentation/guides/security/client-side-protection/getting-started#supported-on-prem-waf-deployment-options) that you're using support Client-Side Protection. - If you’ve written a [custom module](https://www.fastly.com/documentation/guides/next-gen-waf/setup-and-configuration/module-agent-deployment/about-module-agent-deployment#custom-module-option) for integration with the Next-Gen WAF, update the module to support [response header modification](https://www.fastly.com/documentation/guides/next-gen-waf/developer/modifying-response-headers-with-custom-modules). ### Supported On-Prem WAF deployment options The following On-Prem WAF deployment variations support the Client-Side Protection product: | Deployment variation | Minimum agent version | Minimum module version | Notes | | -------------------- | --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Apache module | | 1.10.0+ | | | AWS Lambda | 4.64.0+ | | | | Envoy | 4.62.0+ | | Envoy, Istio Envoy filter, and Istio Authorization policy are supported. If you use Ambassador Edge Stack and Gloo, you must configure the agent as a [reverse proxy](https://www.fastly.com/documentation/guides/next-gen-waf/setup-and-configuration/reverse-proxy-deployment/configuring-agent-reverse-proxy-deployments). Those environments do not support the Envoy external authorization features that are needed to modify response headers. | | Golang | 4.61.0+ | | If you've written a [custom module](https://www.fastly.com/documentation/guides/next-gen-waf/setup-and-configuration/module-agent-deployment/about-module-agent-deployment#custom-module-option) for integration with the Next-Gen WAF and use the Golang module, the Golang module must be at least version 1.14.0. | | HAProxy | 4.63.0+ | 1.5.0+ | | | Heroku | 4.61.0+ | | | | IBM Cloud | 4.61.0+ | | | | IIS module | | 3.5.0+ | | | Java module | | 2.7.0+ | | | .Net module | | 1.7.1+ | | | .Net Core module | | 1.4.1+ | | | NGINX Lua module | | 1.7.0+ | | | NGINX native module | | 1.2.0+ | | | Node.js module | | 2.3.0+ | | | Reverse proxy | 4.61.0+ | | | | VMware Tanzu | 4.61.0+ | | | The following On-Prem WAF deployment variations do not support the Client-Side Protection product: - PHP - Python ## Quick start Start by creating a website and Page to define which areas of your web application Client-Side Protection should monitor. A website is a base URL (e.g., `https://www.example.com`) and a Page is a single path (e.g., `/checkout`) or collection of paths that describe a similar component or user experience on a website (e.g., `/checkout` and `/edit-cc`). Multiple Pages can be associated with the same website. For detailed instructions, check out our [Managing websites and Pages](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-websites-and-pages) guide. 1. Log in to the [Fastly control panel](https://manage.fastly.com). 2. Go to **Security** > **Client-Side Protection** > [**Websites**](https://manage.fastly.com/security/website). 3. Click **Add website**. 4. In the **Website** field, enter the base URL of your website (e.g., `https://www.example.com` or `https://www.app.example.com`). 5. Click **Continue to add page** to [create a Page](https://www.fastly.com/documentation/guides/security/client-side-protection/getting-started#managing-pages) that is associated with the website you just created. 6. Fill out the Add page form as follows: - In the **Page name** field, enter a name for the Page. - In the **Page description** field, enter a description of the Page. - From the **Website** menu, select the appropriate website. - In the **Alert email** field, enter an email address that should receive notifications about your Page. - Leave the **Inventory all paths** checkbox selected to inventory all of the website's paths. Deselect the checkbox if you want to specify the paths that should be inventoried. - If you deselected the **Inventory all paths** checkbox, in the **Paths** field, enter a path that should be inventoried. For each additional path that needs inventorying, click the plus Plus icon sign next to the last path you entered. 7. Click **Add page**. ## What's next Once you've created at least one website and Page, you can: - monitor the [inventory](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory) that Fastly creates for each Page. An inventory is a collection of the client-side scripts and [select response headers](https://www.fastly.com/documentation/guides/security/client-side-protection/monitoring-your-inventory#monitoring-response-headers) that Fastly observes for a Page. Reviewing changes to your inventory can help you identify security issues that should be investigated. - build and manage a [policy](https://www.fastly.com/documentation/guides/security/client-side-protection/managing-your-policy) that tells the end user's browser from where it is allowed to load certain types of resources for the Page. Maintaining a policy helps guard against [cross-site scripting](https://developer.mozilla.org/en-US/docs/Web/Security/Attacks/XSS) attacks.