vanilla-jsoneditor: inline style violates CSP directive
#572 aperta il 26 feb 2026
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?