Skip to content
Browse the docs

Widget

Content Security Policy

Allow the ASDK widget in your site's Content Security Policy: the two sources to add, examples for headers, meta tags, nginx and Next.js, and nonces.

Last updated

On this page

A Content Security Policy (CSP) is a list your website sends to browsers, naming the places the page may load scripts from and send requests to. Many sites don't have one, and then the widget needs nothing. If your site has one, it must allow ASDK, or the browser blocks the widget and the chat button never appears.

What to allow

The widget needs two things:

DirectiveSourceWhy
script-srchttps://cdn.asdk.comThe widget script and the chat panel load from here
connect-srchttps://api.asdk.comQuestions, answers and settings go through here

Add them to your existing directives; don't replace what is there:

Text
script-src 'self' https://cdn.asdk.com;
connect-src 'self' https://api.asdk.com;

If your policy has only a default-src directive, either add both addresses to it, or add the two directives above. Browsers use default-src only for directives that are missing.

Nothing else is needed in current browsers: the widget doesn't use frames, fonts or cookies, and it sets its styles from its own script, which CSP doesn't block. If an avatar image is set for your widget, img-src must allow its address as well.

Find your policy

Open your site, then the browser's developer tools:

  • Network tab: select the page's own request and look for a Content-Security-Policy response header.
  • Elements tab: look in the head for a meta tag with http-equiv="Content-Security-Policy".

When CSP blocks the widget, the Console shows an error that mentions cdn.asdk.com or api.asdk.com and the directive that blocked it. The dashboard's Check installation reads the policy too and reports "Blocked by CSP".

Examples

HTTP header

HTTP
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.asdk.com; connect-src 'self' https://api.asdk.com; img-src 'self' data:

Meta tag

HTML
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self' https://cdn.asdk.com; connect-src 'self' https://api.asdk.com">

nginx

nginx
add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.asdk.com; connect-src 'self' https://api.asdk.com" always;

Next.js

In next.config.js, add the sources to the policy you already send:

JavaScript
const csp = [
  "default-src 'self'",
  "script-src 'self' https://cdn.asdk.com",
  "connect-src 'self' https://api.asdk.com",
].join("; ");

module.exports = {
  async headers() {
    return [{ source: "/(.*)", headers: [{ key: "Content-Security-Policy", value: csp }] }];
  },
};

These are minimal examples. Your real policy probably lists more sources, such as analytics or a payment provider: keep them.

Policies with nonces and strict-dynamic

Some sites use a nonce, a random value that changes with every page load, and 'strict-dynamic' in script-src. With 'strict-dynamic', browsers ignore host names such as https://cdn.asdk.com, so adding the address isn't enough. Give the ASDK script tag the page's nonce instead:

HTML
<script async src="https://cdn.asdk.com/v1/asdk.js" data-site-id="SITE_ID" nonce="NONCE_OF_THIS_PAGE"></script>

Scripts that a trusted script loads are trusted too, so the chat panel, which the widget script loads, works without a nonce of its own. connect-src still needs https://api.asdk.com. MDN's script-src reference explains how 'strict-dynamic' works, and its connect-src reference lists the requests that directive covers (both checked October 2026).

In Next.js, pass the nonce to the Script component; see Next.js and React.

Report-only policies

A Content-Security-Policy-Report-Only header doesn't block anything; it only reports what it would block. The widget works under it, and Check installation ignores it. It is a good way to test a new policy before you enforce it.

Tag managers

If you load ASDK through Google Tag Manager, your policy must also allow Tag Manager itself, and the inline script that sets window.asdkConfig. Follow your tag manager's own CSP guidance, then add the two ASDK sources above.

After you change the policy

Deploy the change, clear any cache in front of your site, reload the page and look for the chat button. Then run Check installation on the dashboard's Install page. MDN's Content-Security-Policy reference describes every directive (checked October 2026).

Related: Install check fails, Widget not showing.