chart

Docs › Frameworks and server

Security: strict CSP and Trusted Types

A CSP without 'unsafe-inline', the '82chart' Trusted Types policy, and outbound requests.

A Content Security Policy (CSP) is an HTTP header that tells the browser where scripts and styles may come from, which blocks attacks such as XSS; Trusted Types make risky DOM sinks such as innerHTML accept only values that went through an allowed policy.

Public-sector and financial sites often drop 'unsafe-inline' from their Content-Security-Policy and turn on Trusted Types against XSS. Since 0.4, 82chart works under exactly this policy:

Content-Security-Policy: default-src 'self'; style-src 'self'; require-trusted-types-for 'script'; trusted-types 82chart
  • No inline styles. The generated SVG has no style="…" attributes: entrance delays are classes (c82-d1…c82-d15), grow origins are SVG transform-origin attributes, and the rest is in 82chart.css. Values that change (sizes, tooltip position) are set through the CSSOM (element.style), which style-src does not govern.
  • Trusted Types. On pages that enforce them (require-trusted-types-for 'script'), 82chart creates one policy named 82chart and inserts its SVG only through it, so add 82chart to the trusted-types directive. Every piece of text the chart writes is escaped as it is built, so the policy passes the string through unchanged. Several copies of 82chart on a page share one policy.
  • No eval. Neither the CDN files nor the npm package use eval or new Function.
  • The stylesheet. Load 82chart.css with a same-origin <link> and style-src 'self' is enough. Dev servers that inject CSS as <style> may need their own allowance.
  • PNG download draws the SVG through a blob: image, so it needs img-src 'self' blob:. SVG and CSV downloads need nothing extra.

The repository's e2e test (apps/e2e/tests/csp.spec.ts) serves a page with this policy, draws several chart types, uses tooltips, the keyboard, the zoom buttons, the legend overflow and the menu, and checks that not a single CSP violation was reported.

Outbound requests

The only request 82chart makes on its own is a once-a-day usage report (domain and version, no data). It never runs on localhost, IP addresses, single-label hosts (http://intranet) or intranet names such as .local, .internal, .corp, .lan, .intra and .home.arpa. Turn it off for a page with <html data-82chart-telemetry="off">, for one chart with telemetry: false; blocking it with connect-src 'self' does not affect the chart. No fonts or other files are fetched.

For networks without internet access, use the offline bundle (zip) on the CDN files page.