josdejong/svelte-jsoneditor

vanilla-jsoneditor: inline style violates CSP directive

Open

#572 创建于 2026年2月26日

在 GitHub 查看
 (1 评论) (0 反应) (0 负责人)TypeScript (149 fork)github user discovery
enhancementhelp wanted

仓库指标

Star
 (1,237 star)
PR 合并指标
 (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?

贡献者指南