Getting started with Client-Side Protection
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 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 that tell browsers which resources they're allowed to load. These capabilities help you guard against cross-site scripting attacks (e.g., Magecart attacks) and maintain compliance with PCI DSS 4.0.1 - Sections 6.4.3 and 11.6.1.
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.
- To be able to view and manage Client-Side Protection data, you must be assigned the roles 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 must be monitoring that same web application.
- If you have an On-Prem WAF deployment, verify that the Next-Gen WAF agent and module versions that you're using support Client-Side Protection.
- If you’ve written a custom module for integration with the Next-Gen WAF, update the module to support response header modification.
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. 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 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+ | ||
| Traefik plugin | 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 guide.
- Log in to the Fastly control panel.
- Go to Security > Client-Side Protection > Websites.
- Click Add website.
- In the Website field, enter the base URL of your website (e.g.,
https://www.example.comorhttps://www.app.example.com). - Click Continue to add page to create a Page that is associated with the website you just created.
- 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
sign next to the last path you entered.
- Click Add page.
What's next
Once you've created at least one website and Page, you can:
- monitor the inventory that Fastly creates for each Page. An inventory is a collection of the client-side scripts and select 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 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 attacks.
