@gluonjs/core / src / TrustedTypesConfig

Interface: TrustedTypesConfig

Properties

policy

readonly policy: TrustedTypePolicy

policyName

readonly policyName: string

Example

Bind one validated CSP policy name to its application-owned createHTML policy for runtime, hydration, and SSR parser handoff:

import {
  createApp,
  html,
  hydrate,
  trustedHTML,
  type HydrationOptions,
  type TrustedHtmlResult,
  type TrustedTypePolicy,
  type TrustedTypesConfig,
} from '@gluonjs/core';

const factory = (globalThis as typeof globalThis & {
  trustedTypes: { createPolicy(name: string, rules: { createHTML(value: string): string }): TrustedTypePolicy };
}).trustedTypes;
const policy: TrustedTypePolicy = factory.createPolicy('gluon-shop', { createHTML: (value) => value });
const trustedTypes = { policyName: 'gluon-shop', policy } satisfies TrustedTypesConfig;
const reviewedMarkup: TrustedHtmlResult = trustedHTML('<strong>Reviewed application markup</strong>');
const app = createApp(() => html`<main>${reviewedMarkup}</main>`);
app.config.trustedTypes = trustedTypes;
const root = document.querySelector<HTMLElement>('#app')!;
const mount = app.mount(root);
const hydrationOptions = { expectedMarkup: root.innerHTML, trustedTypes } satisfies HydrationOptions;
hydrate(html`<main>${reviewedMarkup}</main>`, root, hydrationOptions);
mount.unmount();