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? |
|
worker-src |
'self' blob: |
|
script-src-elem (or) script-src |
'unsafe-inline' *.visualwebsiteoptimizer.com app.vwo.com Additionally, include the following when necessary:
|
| style-src |
'unsafe-inline' *.visualwebsiteoptimizer.com app.vwo.com NOTE: For VWO Engage, include cdn.pushcrew.com additionally.
|
| img-src |
*.visualwebsiteoptimizer.com app.vwo.com useruploads.vwo.io NOTE: For VWO Engage, include cdn.pushcrew.com additionally.
|
| connect-src | *.visualwebsiteoptimizer.com app.vwo.com |
| frame-src | *.visualwebsiteoptimizer.com app.vwo.com |
| child-src |
Add 'self' blob: if worker-src and script-src are absent |
|
Add *.visualwebsiteoptimizer.com app.vwo.com if frame-src is absent |
|
| default-src |
Add 'self' blob: if all of worker-src, script-src, and child-src are absent. |
|
Add 'unsafe-inline' if:
(or)
|
|
|
For a non-Data360 account, add 'unsafe-eval' if:
(or)
|
|
|
Add *.visualwebsiteoptimizer.com app.vwo.com if:
(or)
(or)
|
|
|
Add useruploads.vwo.io if img-src is absent |
|
|
For VWO Engage, add cdn.pushcrew.com if:
(or)
|
- If both script-src-elem and script-src are present, update only script-src-elem.
- Replace 'unsafe-inline' with 'nonce-[your-nonce-value]' ‘strict-dynamic’ in the above change. Ensure all inline styles and scripts include this nonce value so the change functions correctly.