API Reference

Content Security Policy (CSP)

Content Security Policy (CSP) is a security feature that helps prevent a range of attacks such as cross-site scripting (XSS) and data injection by specifying which sources of content are considered safe. CSP allows you to control resources the user agent is allowed to load, reducing the risk of malicious content being executed on a user's browser. Implementing CSP is good practice because it strengthens the security of web applications by mitigating vulnerabilities introduced through third-party content or untrusted sources.

If you are using a CSP then you will need to add the Unless domains to the CSP for it to work. This is the minimum setup you need:

script-src 'self' 'unsafe-inline' https://unless.com https://*.unless.com;
style-src 'self' 'unsafe-inline' https://unless.com https://*.unless.com fonts.googleapis.com;
connect-src 'self' https://unless.com https://*.unless.com wss://*.unless.com;
font-src 'self' https://unless.com https://*.unless.com fonts.gstatic.com;
frame-src 'self' https://unless.com https://*.unless.com;
img-src 'self' data: https://unless.com https://*.unless.com;

Explanation:

  • script-src is needed to load our initial script
    note: 'unsafe-inline' is only needed if you don't use a nonce or hash method, see "Strict CSP" below.
    note: 'unsafe-eval' is optional and only necessary if you want to be able to run custom javascript on component-load, or on a button click.
  • style-src is required with 'unsafe-inline' for us to be able to load the styles for our components.
  • connect-src connects to our backend with XHR and to our websocket endpoint for the AI conversations.
  • font-src is needed to load fonts & icons in the components.
    note: the endpoints fonts.googleapis.com and fonts.gstatic.com are needed to load the default Lato font used by the components. This is not needed in case you configure the components to use your own local website font instead.
  • frame-src is required to load our editor from the dashboard. The editor loads your own website in an iframe so we can add extra functionality like point-and-click selector generation for inline components.
  • img-src is needed to load images used in components.

Strict CSP

To improve security even further you can add a nonce to your CSP headers and the scripts on your page. This will work fine with our script if you add the nonce with 'strict-dynamic'.

For more information see: https://web.dev/articles/strict-csp

Example of a strict CSP using a nonce (the ${nonce} should be dynamically generated on the server):

script-src 'nonce-${nonce}' 'strict-dynamic' https://unless.com https://*.unless.com;
object-src 'none';
base-uri 'none';
style-src 'self' 'unsafe-inline' https://unless.com https://*.unless.com fonts.googleapis.com;
connect-src 'self' https://unless.com https://*.unless.com wss://*.unless.com;
font-src 'self' https://unless.com https://*.unless.com fonts.gstatic.com;
frame-src 'self' https://unless.com https://*.unless.com;
img-src 'self' data: https://unless.com https://*.unless.com;

The same nonce should then also be added to all the scripts on your page including the Unless snippet.