Content Security Policy (CSP) is an HTTP response header that adds an extra layer of security to your website. It helps browsers detect and block potential attacks such as cross-site scripting (XSS), clickjacking, and other client-side threats that may try to inject malicious content.
When enabled, browsers validate all applications and resources (e.g., JavaScript, CSS, images) against the policies you define. If a resource is not listed in your CSP, the browser restricts it and prevents it from loading.
CSP directives for panels created on or after November 19, 2024
If your panel was created on or after November 19, 2024, and if you have enabled the CSP header on your website, you might need to add the following directives to your CSP header to allow the Insider Tag:
http-equiv="Content-Security-Policy"
content="
connect-src 'self' https://*.useinsider.com https://*.api.useinsider.com wss://*.useinsider.com;
font-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
frame-src 'self' 'unsafe-inline' blob: *.useinsider.com *.api.useinsider.com;
img-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
style-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
script-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
script-src-elem 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
worker-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
object-src 'self' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;"CSP directives for panels created before November 19, 2024
If your panel was created before November 19, 2024, you’ll need to use a slightly different set of directives:
http-equiv="Content-Security-Policy"
content="
connect-src 'self' https://*.useinsider.com https://*.api.useinsider.com wss://*.useinsider.com;
font-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
frame-src 'self' 'unsafe-eval' 'unsafe-inline' blob: *.useinsider.com *.api.useinsider.com;
img-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
style-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
script-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
script-src-elem 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
worker-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;
object-src 'self' 'unsafe-eval' 'unsafe-inline' *.useinsider.com *.api.useinsider.com;"Working with nonce
If you prefer not to use 'unsafe-inline', you can use a nonce-based CSP instead.
When using a nonce, 'unsafe-inline' is no longer required.
You must include 'strict-dynamic' to propagate the nonce to dynamically loaded resources.
If any element on the page (e.g., a <script> tag) contains a nonce attribute, the Insider Tag will automatically read and reuse that nonce for dynamically injected <style> tags.
If no nonce is present on the page, it must be explicitly added to the Insider Tag during integration.
Example Integration:
<script src="//{partnerName}.api.useinsider.com/ins.js?id={id}"
nonce="your-nonce-value"></script>Insider Tag will automatically read the nonce value from its own <script> tag and apply the same nonce to the dynamically injected <style> tag.
The nonce value should be dynamically generated per request and must match the value defined in the style-src directive of the CSP header.
The necessary CSP header with the nonce attribute:
http-equiv="Content-Security-Policy"
content="
connect-src 'self' https://*.useinsider.com https://*.api.useinsider.com wss://*.useinsider.com;
font-src 'self' *.useinsider.com *.api.useinsider.com;
frame-src 'self' blob: *.useinsider.com *.api.useinsider.com;
img-src 'self' *.useinsider.com *.api.useinsider.com;
style-src 'self' *.useinsider.com *.api.useinsider.com 'nonce-<RANDOM_VALUE>';
script-src 'self' *.useinsider.com *.api.useinsider.com 'nonce-<RANDOM_VALUE>' 'strict-dynamic';
script-src-elem 'self' *.useinsider.com *.api.useinsider.com 'nonce-<RANDOM_VALUE>' 'strict-dynamic';
worker-src 'self' *.useinsider.com *.api.useinsider.com;
object-src 'self' *.useinsider.com *.api.useinsider.com;"When 'strict-dynamic' is used, modern browsers rely only on the nonce to allow script execution and ignore host-based rules like wildcards or 'self'.
These host rules remain in the policy as a fallback for older browsers that do not support 'strict-dynamic'.