Skip to content
Components, switch product

Strict CSP

GolemUI Components run under a strict Content Security Policy with nothing to configure. A page that renders them in the browser passes this policy with no nonce, no hash and no 'unsafe-inline':

Content-Security-Policy:
default-src 'self';
script-src 'self';
style-src 'self';
img-src 'self';
object-src 'none';
base-uri 'none'
  • Inline styles. The few styles an element sets while it runs, such as the height of an auto-growing textarea or the offset of a list’s visible items, go through the CSSOM (element.style), which style-src allows. No element writes a style attribute.
  • Injected stylesheets. The elements render into the light DOM and take their look from the stylesheet you load, @golemui/gui-components/index.css, as a file. gui-list and gui-multi-list render into a shadow root and adopt their styles as a constructed stylesheet, which style-src doesn’t block.
  • eval. Nothing calls eval, new Function or a string timer, so script-src needs no 'unsafe-eval'.
  • Data URIs. The checkbox tick and the carets are CSS shapes, and the built-in icons, such as the upload, remove and Markdown toolbar buttons, are inline SVG elements, so img-src needs no data:. Icons and carets of your own come from your CSS, so your policy decides what they can load.

The elements build their markup with Lit templates, which go through Lit’s own Trusted Types policy, lit-html. Allow it by name when you enforce Trusted Types:

Content-Security-Policy:
require-trusted-types-for 'script';
trusted-types lit-html

gui-markdown-text puts the HTML your Markdown parser returns into the page through the same policy, so Trusted Types doesn’t check it. Sanitize Markdown that comes from your users, as Markdown text shows.

In development, Vite and the frameworks built on it inject the CSS you import as <style> elements, which a strict style-src blocks. A production build writes the CSS to a file, which the policy allows. Test the policy against a production build, or relax style-src in development only.

The server HTML of some elements holds style attributes, such as the height of a textarea or a Markdown editor, the width of a number field and min-width: 0 on the input of an empty tags or range field. A strict policy blocks them, and the browser reports each one as a style-src-attr violation. Until those elements upgrade in the browser, they can look different from their final render. Once they upgrade, they set the same styles through the CSSOM.

Before you enforce a strict policy on server-rendered pages, test them under it, or roll it out with a Content-Security-Policy-Report-Only header first.