The Content-Security-Policy HTTP header lets website administrators control which resources the browser can load on the website.
Although not all websites make use of this header, if the content security policy (CSP) of your website is set to block non-whitelisted domains, you will need to add Yieldify domains to the following policies in your Content-Security-Policy header:
default-src: [...existing allowlist] https://*.yieldify.com https://*.yieldify-production.com; |
⚠️ You should not create new directives specifically for Yieldify. For example, if you do not have a font-src directive in your Content-Security-Policy header, you should not add a new font-src directive just for Yieldify.
Examples
No changes needed
For example, no update is required in the content-security-policy below, there is no restriction applied on particular directives apart that would prevent any Yieldify functionalities from working as expected.
content-security-policy: block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests; |
Extending already defined policy directives
In this case, we have a policy for font-src defined to specifically allow the retrieval of google fonts. If you are going to use custom fonts in the platform, those will be served from https://fonts.yieldify-production.com/.
content-security-policy: block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests; font-src fonts.gstatic.com; |
You will have to extend the font-src directive to allow the fonts to load from our domain
content-security-policy: block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests; font-src fonts.gstatic.com *.yieldify-production.com; |
Adding new policies directives
If you want to add a new policy directive in your content security policy, you will need to be really careful as anything that is not defined in your policy will be blocked.
content-security-policy: block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests; |
We decide that we want to add the font-src directive here with only the *.yieldify-production.com domain defined
content-security-policy: block-all-mixed-content; frame-ancestors 'none'; upgrade-insecure-requests; font-src *.yieldify-production.com |
Additional information related to the required policy directives
child-src and frame-src
Yieldify's tag inserts an iframe (in order to limit the amount of code that has to be executed on the host page). The tag also loads an empty iframe to extract global javascript utilities. The src attribute of this iframe has a value of about:blank.
connect-src
The tag will make additional asynchronous requests to Yieldify services (for example, to retrieve personalization data). Additionally, the Yieldify Preview App and Debugger require the use of a WebSocket connection.
img-src
The Yieldify tag sends tracking pixels to collect data and enable personalized user experiences per our data collection policy.
Yieldify experiences may also contain images uploaded and hosted via Yieldify.
font-src
The Yieldify experience builder lets users of the platform configure and customise fonts used in Yieldify experiences. Although some fonts are provided out of the box (including popular google fonts), Yieldify also enables users to upload their own fonts. These default and custom fonts will be hosted through the Yieldify platform and served via a Yieldify-owned domain.
script-src
The Yieldify tag is inserted on the page by the Yieldify HTML snippet as a <script> tag which requests and fetches the Tag via a Yieldify domain.
unsafe-inline
Additionally, based on client requests the tag can insert an additional script to enable features through YCP extensions (e.g: add to cart feature). This is why we also have 'unsafe-inline' for this rule.