# 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:

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```bash
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:

```js
<script type="text/javascript" nonce="[your-nonce-value]" src="https://try.abtasty.com/[tag-identifier].js"></script>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.abtasty.com/client-side/tag/troubleshootings/tag-troubleshooting-csp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.