Content Security Policy

Current compatibility boundaries

The library uses external JavaScript without eval. Application handlers should live in external files rather than inline onclick attributes. However, some generated markup contains inline style attributes: Toast progress duration and delete-confirmation error visibility. Other components modify individual style properties at runtime. Do not assume the entire library or documentation site works under every strict policy.

The documentation site also uses external icon/highlighting assets and page-specific scripts. Its asset requirements are broader than a minimal application using self-hosted Focus UI.

Self-hosted starting policy

Start in report-only mode, exercise your real workflows, and inspect violations before enforcement. This example assumes all scripts, styles, fonts and images are self-hosted; adjust it for your application.

Content-Security-Policy-Report-Only:
  default-src 'self';
  script-src 'self';
  style-src 'self';
  img-src 'self' data:;
  font-src 'self';
  connect-src 'self';
  base-uri 'self';
  form-action 'self';
  frame-ancestors 'none';

Style attributes

An enforced style-src-attr 'none' blocks inline style attributes in generated HTML. Individual JavaScript style-property assignments have different enforcement behavior. If you need to forbid attributes, avoid the affected features or move their presentation into stylesheet classes and test that change. Do not copy a blanket unsafe-inline exception just to remove console errors.

CDN assets

When using the Focus UI CDN, allow https://cdn.focus-ui.de in the script/style directives and pin an immutable version. Font Awesome requires its own stylesheet and font origins if you choose to use it. Pair CDN resources with SRI generated from the exact downloaded bytes.

Application handlers

<button id="save" class="focus-btn focus-btn-primary">Save</button>
<script src="/vendor/focus-ui.min.js" defer></script>
<script src="/app.js" defer></script>

document.querySelector('#save').addEventListener('click', () => {
  FocusUI.Toast.show({ message: 'Saved', progress: false })
})

Verify with headers

Send policies as HTTP response headers. Report-only policies help find breakage but do not enforce restrictions. Test dialogs, search, copy controls and feedback under the enforced policy. A meta tag cannot provide every directive available in an HTTP header.

Reference: MDN style-src-attr.