The Concept of Website CSP
To enhance security, websites define Content Security Policy (CSP), which allows website owners to restrict the content (script/styles/images, etc.) loaded on the page to only trusted (whitelisted) sources. It ensures that no malicious external asset can risk your business or customers by acting as an agent for a trusted website.
What’s the Impact?
If you’ve defined a CSP for your website, wherein you declare (whitelist) your website content to be loaded from certain sources, then browsers will automatically reject content from sources other than what is defined. Under such circumstances, browsers will not allow VWO to load content on your website. This will impact the loading of variations that you’ve created in VWO.
NOTE: While having concerns about your website’s security is supremely significant, it is important to note that VWO running on your website intends to provide your visitors with the campaign experiences you've designed; VWO does not inject unwanted content into your website or gather any Personally Identifiable Information (PII). Check out our privacy policy for more clarity.
Resolution
To enable VWO to load variations on your website and generate previews for your variations, you need to whitelist VWO by updating the corresponding rules in your existing CSP. Precisely, you need to make changes to the following CSP directives, if present:
ATTENTION: Do not apply the corresponding changes if any of the following CSP directives are not defined in your CSP.
| Which directive? | What to add to the directive? | Description |
| worker-src | 'self' blob: | Required for VWO to create web workers as part of its core functionality |
|
script-src-elem or script-src |
'unsafe-inline' *.visualwebsiteoptimizer.com app.vwo.com Additionally, include the following when necessary:
NOTE: 'unsafe-inline' can be replaced with 'nonce-[your-nonce-value]' ‘strict-dynamic’. Ensure all inline scripts include this nonce value so the change functions correctly.
|
Required for VWO libraries to load. |
|
style-src-elem or style-src |
'unsafe-inline' *.visualwebsiteoptimizer.com app.vwo.com
NOTE: For VWO Engage, include cdn.pushcrew.com additionally.'unsafe-inline' can be replaced with 'nonce-[your-nonce-value]' ‘strict-dynamic’. Ensure all inline styles include this nonce value so the change functions correctly.
|
Required for applying the campaign’s visual changes related to CSS. |
| img-src |
*.visualwebsiteoptimizer.com app.vwo.com useruploads.vwo.io
NOTE: For VWO Engage, include cdn.pushcrew.com additionally.
|
Required for loading of images uploaded from the visual editor. |
| connect-src | *.visualwebsiteoptimizer.com app.vwo.com | Required for campaign tracking and previews. |
| frame-src | *.visualwebsiteoptimizer.com app.vwo.com | Required for campaign previews and cross-domain tracking. |
| child-src |
|
Provides a fallback security policy when the mentioned directives are missing. |
|
default-src |
Add 'self' blob: if all of worker-src, script-src, and child-src are absent. | Provides a fallback security policy when other specific directives are missing. |
|
Add 'unsafe-inline' if:
|
||
|
For a non-Data360 account, add 'unsafe-eval' if:
NOTE: 'unsafe-inline' can be replaced with 'nonce-[your-nonce-value]' ‘strict-dynamic’. Ensure all inline styles and scripts include this nonce value so the change functions correctly.
|
||
|
Add *.visualwebsiteoptimizer.com app.vwo.com if:
|
||
| Add useruploads.vwo.io if img-src is absent | ||
|
For VWO Engage, add cdn.pushcrew.com if:
|
- If both script-src-elem and script-src are present, update only script-src-elem.
- If both style-src-elem and style-src are present, update only style-src-elem.