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' *.abtasty.com;
frame-src 'self'; 
connect-src *.abtasty.com; 
style-src 'unsafe-inline' *.abtasty.com;
img-src *.abtasty.com;

script-src 'unsafe-inline' Recognizes 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 resource 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' *.abtasty.com; 
frame-src 'self'; 
connect-src 'self' *.abtasty.com; 
style-src 'self' 'unsafe-inline' *.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 blob: *.abtasty.com; 
frame-src 'self'; 
connect-src *.abtasty.com; 
img-src *.abtasty.com; 
style-src *.abtasty.com; 
font-src *.abtasty.com;

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.

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' blob: *.abtasty.com;
frame-src 'self';
connect-src 'self' *.abtasty.com; 
img-src 'self' *.abtasty.com; 
style-src 'self' *.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'  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' *.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>