Configuring CSP with Dynamic Yield
Content Security Policy (CSP) is a security feature that helps protect web applications from attacks like cross-site scripting (XSS). It does this by enabling developers to specify which sources of content are safe to load, reducing the risk of malicious code being executed in users' browsers. The main goal of CSP is to enhance web application security by controlling and limiting content sources.
The following table describes the CSP directive configurations required to implement Dynamic Yield on your website using the Dynamic Yield script implementation and additional recommended and optional configurations that might be needed based on your needs and usage.
Required? | Directive | Value | Used for |
Mandatory | connect-src | https://*.dynamicyield.com | Data collection and serving experiences |
script-src |
https://*.dynamicyield.com 'unsafe-inline' 'unsafe-eval' |
Loading the Dynamic Yield scripts and executing the code defined in the Dynamic yield variations | |
style-src |
https://*.dynamicyield.com 'unsafe-inline' |
Applying CSS code defined in the Dynamic Yield variations | |
img-src |
https://*.dynamicyield.com data: |
Serving images uploaded to the Dynamic Yield CDN and displaying base64 encoded images | |
Recommended | font-src | https://fonts.googleapis.com https://fonts.gstatic.com | Google Fonts, as defined in the Dynamic Yield template library |
script-src |
https://cdnjs.cloudflare.co m/ajax/libs/Swiper/4.4.6/* |
Carousel functionality, used in various Dynamic Yield templates. | |
style-src |
https://cdnjs.cloudflare.co m/ajax/libs/Swiper/4.4.6/* |
||
connect-src | https://*.dy-api.com | Used when making Choose calls directly from the browser | |
Optional | frame-src | https://www.youtube.com/ | Used in the “Youtube Video” template |
frame-src | https://player.vimeo.com/ | Used in the “Vimeo Video” template | |
script-src |
https://cdnjs.cloudflare.co m/ajax/libs/clipboard.js/* |
Used in the “Get Coupon” template |
Notes
- When using the Dynamic Yield's EU data center for "choose" API calls, use https://*.dy-api.eu instead of https://*.dy-api.com.
- Additional directive values might be needed based on your usage (different campaigns or templates).
- Using external libraries and resources in your variations requires including them in your CSP directive.
Examples
Recommended configuration using the default-src directive
Content-Security-Policy: default-src self https://*.dynamicyield.com https://*.dy-api.com
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/*
https://fonts.googleapis.com https://fonts.gstatic.com
'unsafe-inline' 'unsafe-eval' data:;
Recommended configuration with directive-specific configuration
Content-Security-Policy: script-src self https://*.dynamicyield.com
https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/*
'unsafe-inline' 'unsafe-eval'; connect-src https://*.dy-api.com; style-src self
https://*.dynamicyield.com https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.4.6/*
'unsafe-inline'; connect-src https://*.dynamicyield.com; img-src https://*.dynamicyield.com data:;
font-src https://fonts.googleapis.com https://fonts.gstatic.com;
Updated about 1 month ago