josdejong/svelte-jsoneditor

vanilla-jsoneditor: inline style violates CSP directive

Open

#572 ouverte le 26 févr. 2026

Voir sur GitHub
 (1 commentaire) (0 réactions) (0 assignés)TypeScript (149 forks)github user discovery
enhancementhelp wanted

Métriques du dépôt

Stars
 (1 237 stars)
Métriques de merge PR
 (Métriques PR en attente)

Description

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?

Guide contributeur