Content Security Policy

If your site uses Content Security Policy (CSP), you need to allow specific domains and rules for the Feedback Widget to work correctly.

Rules

• script-src — the initial Feedback Widget snippet uses an inline <script> tag. To allow it, include unsafe-inline or, more securely, pass a random nonce to authorize it. Then use the nonce on the script tag:

  <script type="text/javascript" nonce="THISISASECRETNONCE">
  // ... ybug script goes here
  </script>

• img-src — the widget uses images and icons served from our domain or as data URIs.

• style-src — some inline styles are necessary for rendering the widget, so unsafe-inline is required here. Google Fonts also need to be whitelisted.

• connect-src — used for API calls the widget makes to our backend and for loading resources.

• font-src — Google Fonts need to be whitelisted.

Example CSP setup

You can apply the policy using a <meta> tag in your HTML. Make sure to allow your own domains:

<meta http-equiv="Content-Security-Policy" content="
  script-src https://*.ybug.io 'nonce-THISISASECRETNONCE';
  img-src https://*.ybug.io data:;
  style-src 'unsafe-inline' https://fonts.googleapis.com;
  connect-src https://*.ybug.io https://*.s3.eu-central-1.amazonaws.com;
  font-src https://fonts.googleapis.com https://fonts.gstatic.com;
">

Alternatively, the CSP can be sent as an HTTP response header from your server.

Replace THISISASECRETNONCE with a secure, dynamic value generated by your server for each request.