Home › Go to production

Security

Trust model, what AngeLite protects by default and how to use trustHtml, trustUrl, CSP and Trusted Types.

The trust model#

Templates are your code; the data you show is not to be trusted. The framework is built so that a piece of data does not turn into HTML, script or a dangerous URL by accident.

Situation	What AngeLite does
`{{ value }}`	Always inserted as text.
`href`, `src`, `action`…	Only `http(s)`, `mailto`, `tel`, `sms`, `ftp` and relative paths pass; anything else becomes `unsafe:…` and warns in the console.
`[innerHTML]`	Only paints HTML wrapped in `trustHtml()`; any other value is inserted as text.
`[onclick]`, `[srcdoc]`, bindings on `<script>`, `<base>`, `<link>`	Compile error.
Expressions	They never receive `window` or `document`, wherever they come from.
`eval` / `new Function`	Not used: it works with a CSP without `unsafe-eval` and supports Trusted Types.

When you do want HTML or your own scheme#

import { signal, trustHtml, trustUrl } from '@duvanjamid/angelite';

html = signal(trustHtml(DOMPurify.sanitize(comment)));      // sanitize first: you take responsibility
link = signal(trustUrl('whatsapp://send?text=hello'));      // scheme allowed on purpose

trustHtml does not sanitize

It only marks the value as trusted. If the HTML comes from a user, run it through a sanitizer such as DOMPurify first.

CSP and Trusted Types#

Content-Security-Policy: default-src 'self'; script-src 'self';
  require-trusted-types-for 'script'; trusted-types angelite

With the angelite policy the browser only accepts HTML that has gone through trustHtml().

Defense in depth, not a boundary

The expression sandbox reduces the damage, but it is not a security boundary. Never compile templates that include user data; in production precompile. More detail in the security policy.