Content Security Policy (CSP)

TokenFlight widgets inject styles into Shadow DOM. If your page has a strict Content Security Policy, you need to allow these styles.

The csp-nonce Attribute

Pass a nonce to the widget, and it will include it on all injected <style> elements:

<tokenflight-widget csp-nonce="abc123" theme="dark" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>

Or via the imperative API — the nonce is set at the registration level:

// The csp-nonce is an HTML attribute on the custom element
const el = document.createElement('tokenflight-widget');
el.setAttribute('csp-nonce', 'abc123');
el.setAttribute('theme', 'dark');
el.setAttribute('to-token', 'eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913');
el.setAttribute('trade-type', 'EXACT_OUTPUT');
el.setAttribute('amount', '100');
document.getElementById('container').appendChild(el);

Required CSP Directives

Content-Security-Policy:
  style-src 'nonce-{your-nonce}';
  connect-src https://your-api-endpoint.example.com;
  img-src https://your-api-endpoint.example.com;

Directive	Value	Purpose
style-src	'nonce-{value}'	Shadow DOM inline styles
connect-src	https://your-api-endpoint.example.com	API requests (quotes, orders, tokens)
img-src	https://your-api-endpoint.example.com	Chain icons (/v1/chain/{id}/icon)

Replace your-api-endpoint.example.com with the domain of your configured apiEndpoint.

Full CSP Header Example

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  style-src 'self' 'nonce-abc123';
  connect-src 'self' https://your-api-endpoint.example.com;
  img-src 'self' https://your-api-endpoint.example.com https://*.githubusercontent.com;
  font-src 'self';

INFO

Token icon images (logoURI) may come from various CDNs. If you see broken token icons, check your img-src directive and add the necessary domains.

Without a Nonce

If you cannot use nonces (e.g., static hosting without server-side header injection), you can use 'unsafe-inline' for style-src:

style-src 'self' 'unsafe-inline';

This is less secure but allows the widget's Shadow DOM styles to load without a nonce.