Troubleshooting Content Security Policies
Introduction
You might be using Content Security Policies on your website. Without an appropriate allowlisting of a few policies, AB Tasty simply can't work.
Policies needed by AB Tasty
AB Tasty requires two sets of policies for its two main parts that operate on your website: the tag and the editor.
Tag's policies
When running on your website, our tag will try to apply modifications on the DOM, download resources and connects to AB Tasty's servers to get and post data. A strict set of Content Security Policies will deny our tag to do all of these. To unlock the full usage of our tool, you are suggested to open up the following:
script-src 'unsafe-inline' try.abtasty.com;
frame-src 'self';
connect-src *.abtasty.com;
style-src 'unsafe-inline' try.abtasty.com;
img-src editor-assets.abtasty.com;
script-src 'unsafe-inline'
Recognises AB Tasty tag scripts as valid source for JavaScript to be injected and executed on your website.
connect-src
Our tag is also connecting to our CDN to download additional resources, among them: dynamic imports (on the try.abtasty.com domain) or backend synchronization (on the dcinfos-cache.abtasty.com domain).
style-src 'unsafe-inline
Using our tool, you can inject custom CSS to apply on a campaign. The tag will use the unsafe-inline method to do so.
img-src
If you use our editor to inject an image from your computer, this ressource will be uploaded to our CDN, editor-assets.abtasty.com, and downloaded by your visitors. We strongly advise you only use resources that are hosted on your own domains. This policy is not mandatory to allowlist if you are not planning on injecting images through AB Tasty.
frame-src
The QA Assistant will load into an iframe.
Finally, this is an example of what your CSP could look like:
default-src 'self';
script-src 'self' 'unsafe-inline' try.abtasty.com;
frame-src 'self';
connect-src 'self' *.abtasty.com;
style-src 'self' 'unsafe-inline' try.abtasty.com;
Editor's policies
Our editor encapsulates your website into an iframe to operate. Knowing that, you have two options: opening up the additional policies for the editor or using a third-party browser extension to bypass the CSP. For your information, our editor only loads when a query parameter, ?abtasty_editor{{testID}}, exists in the URL.
Here are the policies to allowlist:
script-src 'unsafe-eval' 'unsafe-inline' blob: *.abtasty.com;
frame-src 'self';
connect-src *.abtasty.com;
img-src *.abtasty.com;
style-src 'unsafe-inline' *.abtasty.com;
font-src *.abtasty.com;
script-src 'unsafe-eval' 'unsafe-inline' blob:
The editor will require unsafe-* policies to execute JavaScript on your website to render your modifications live.
connect-src
The editor will also try to connect to remote AB Tasty services.
image-src
Our editor uses images and loads the images you host on our CDN.
style-src 'unsafe-inline'
As for the tag, the editor will require to inject CSS on your website to render your modifications.
font-src
Our editor is also using custom fonts.
frame-src
Our editor will load your website into an iframe.
And a complete example of what your CSP could look like:
default-src 'self';
script-src 'self' 'unsafe-eval' 'unsafe-inline' blob: *.abtasty.com;
frame-src 'self';
connect-src 'self' *.abtasty.com;
img-src 'self' *.abtasty.com;
style-src 'self' 'unsafe-inline' *.abtasty.com;
font-src 'self' *.abtasty.com;
Note that as the editor is using the tag to display and execute modifications. Should you need to allowlist both tools, using the editor's one is enough.
Working with nonce
You can add a nonce property to our tag and your CSP. In that case, you would need to generate it and set it on both side. When using a nonce property, unsafe-inline is not required anymore but strict-dynamic has to be added to propagate the nonce to the other files.
Previous complete example with added nonce property:
default-src 'self';
script-src 'self' 'unsafe-inline' blob: *.abtasty.com 'nonce-[your-nonce-value]' 'strict-dynamic';
frame-src 'self';
connect-src 'self' *.abtasty.com;
img-src 'self' *.abtasty.com;
style-src 'self' 'unsafe-inline' *.abtasty.com;
font-src 'self' *.abtasty.com;
And how the tag should be adjusted to fit with the new addon:
<script type="text/javascript" nonce="[your-nonce-value]" src="https://try.abtasty.com/[tag-identifier].js"></script>