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'What the components avoid
Section titled “What the components avoid”- 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), whichstyle-srcallows. No element writes astyleattribute. - 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-listandgui-multi-listrender into a shadow root and adopt their styles as a constructed stylesheet, whichstyle-srcdoesn’t block. - eval. Nothing calls
eval,new Functionor a string timer, soscript-srcneeds 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-srcneeds nodata:. Icons and carets of your own come from your CSS, so your policy decides what they can load.
Trusted Types
Section titled “Trusted Types”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-htmlgui-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.
Your stylesheet in development
Section titled “Your stylesheet in development”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.
Server rendering
Section titled “Server rendering”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.