Content-Security-Policy

Domains to allow so the widget works under strict CSP.

≈ 4 min read

Minimum directives

http
Content-Security-Policy:
  default-src 'self';
  script-src 'self' https://share.guidia.dev;
  connect-src 'self' https://guidia.dev https://share.guidia.dev;
  img-src 'self' https://guidia.dev https://share.guidia.dev data:;
  style-src 'self' 'unsafe-inline';
  font-src 'self' data:;
  media-src 'self' blob:;
  worker-src 'self' blob:;
  child-src 'self' blob:

Why 'unsafe-inline' for styles?

The widget uses a Shadow DOM with inlined styles to guarantee visual isolation from your CSS. If you cannot tolerate 'unsafe-inline', use the nonce variant.

Nonce variant

http
Content-Security-Policy:
  default-src 'self';
  script-src 'self' 'nonce-RANDOM' https://share.guidia.dev;
  style-src 'self' 'nonce-RANDOM';
  ...

You then need to add nonce="RANDOM" on the loader <script> tag. The widget propagates the nonce to internal styles automatically.

Domains to allow

  • https://share.guidia.dev (widget loader and related scripts)
  • https://guidia.dev
You can host the 3D avatar and libraries on your own CDN. See the docs/avatars folder in the repository.