Skip to content

Content Security Policy (CSP)

Selkit is designed to run under a strict Content Security Policy. It needs no 'unsafe-eval' and no 'unsafe-inline' — the following policy is enough:

default-src 'self'; script-src 'self'; style-src 'self';

(Adjust 'self' to wherever your app actually serves its scripts and styles — e.g. a CDN or nonce/hash for your own bundle.)

Why it works

CSP concernSelkitNeeds a relaxation?
script-srcNo eval / new Function anywhereNo 'unsafe-eval'
style-srcAll dynamic styling goes through the CSSOM (element.style.*), never markup style="…" attributes or <style> blocksNo 'unsafe-inline'
Trusted TypesOption text is set via textContent; custom markup is appended as DOM Nodes. No innerHTML / insertAdjacentHTMLCompatible with require-trusted-types-for 'script'
Runtime stylesheet injectionNone — no <style> creation, insertRule, or adoptedStyleSheets

The key point about style-src: it gates inline styles parsed from markup (the HTML style="…" attribute and <style> elements), not style properties set through the CSSOM. Selkit positions dropdowns and applies layout by assigning to element.style in JavaScript, so a strict style-src 'self' does not break it. The Vue (:style) and React (style={}) adapters apply their styles the same way, through the CSSOM.

Themes are normal stylesheets

@selkit/themes ships plain .css files (base.css, bs5.css). Bundle or serve them like any other stylesheet so they fall under style-src 'self' (or your nonce/hash). They are CSS-variable driven and contain no inline scripts.

@selkit/floating

The optional @selkit/floating positioner wraps @floating-ui/dom, which also computes and applies positions through the CSSOM and uses no eval. It runs under the same strict policy — no extra directives needed.

Released under the MIT License.