josdejong/svelte-jsoneditor

vanilla-jsoneditor: inline style violates CSP directive

Open

#572 aperta il 26 feb 2026

Vedi su GitHub
 (1 commento) (0 reazioni) (0 assegnatari)TypeScript (149 fork)github user discovery
enhancementhelp wanted

Metriche repository

Star
 (1237 star)
Metriche merge PR
 (Metriche PR in attesa)

Descrizione

I'm using vanilla-jsoneditor (3.11.0) in a Vue project with Vite. When I restrict the Content Security Policy settings to not allow unsafe-inline anymore, I get the CSP violations like this:

Applying inline style violates the following Content Security Policy directive 'style-src 'self''. Either the 'unsafe-inline' keyword, a hash ('sha256-ge1tReHgzUvqsk0NovbL3BYeiU4W6DQCBUcCvk4L9SA='), or a nonce ('nonce-...') is required to enable inline execution. The action has been blocked.

The issues stem from CSS-in-JS embedded styles like this:

function nn(t, e) {
        e === void 0 && (e = {});
        var n = e.insertAt;
        if (t && typeof document < "u") {
            var r = document.head || document.getElementsByTagName("head")[0]
              , i = document.createElement("style");
            i.type = "text/css",
            n === "top" && r.firstChild ? r.insertBefore(i, r.firstChild) : r.appendChild(i),
            i.styleSheet ? i.styleSheet.cssText = t : i.appendChild(document.createTextNode(t))
        }
    }
    nn(`.jse-absolute-popup.svelte-enkkpn {
  position: relative;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 1001;
}

I already tried Hash- and Nonce-based CSP rules. These work for everything but the embedded CSS styles. Is there a version of vanilla-jsoneditor that does not bundle everything inside JS code, i.e. with static CSS? How do other users of this library avoid CSP issues in a safe manner?

Guida contributor