josdejong/svelte-jsoneditor

vanilla-jsoneditor: inline style violates CSP directive

开放

#572 创建于 2026年2月26日

 (1 条评论) (0 个反应) (0 位负责人)TypeScript (147 个派生)github user discovery
enhancementhelp wanted

仓库指标

星标
 (1,260 个星标)
PR 合并指标
 (平均合并 9小时 26分钟) (30 天内合并 5 个 PR)

描述

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?

贡献者指南