{"record":{"id":"9a2f4854b8bc89ce","repo":"plotly/plotly.js","slug":"cannot-addrelatedstylerule-probably-due-to-strict","errorCode":null,"errorMessage":"Cannot addRelatedStyleRule, probably due to strict CSP...","messagePattern":"Cannot addRelatedStyleRule, probably due to strict CSP\\.\\.\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/lib/dom.js","lineNumber":77,"sourceCode":" */\nfunction addRelatedStyleRule(uid, selector, styleString) {\n    var id = 'plotly.js-style-' + uid;\n    var style = document.getElementById(id);\n    if(style && style.matches('.no-inline-styles')) {\n        // Do not proceed if user disable inline styles explicitly...\n        return;\n    }\n    if(!style) {\n        style = document.createElement('style');\n        style.setAttribute('id', id);\n        // WebKit hack :(\n        style.appendChild(document.createTextNode(''));\n        document.head.appendChild(style);\n    }\n    var styleSheet = style.sheet;\n\n    if(!styleSheet) {\n        loggers.warn('Cannot addRelatedStyleRule, probably due to strict CSP...');\n    } else if(styleSheet.insertRule) {\n        styleSheet.insertRule(selector + '{' + styleString + '}', 0);\n    } else if(styleSheet.addRule) {\n        styleSheet.addRule(selector, styleString, 0);\n    } else loggers.warn('addStyleRule failed');\n}\n\n/**\n * to remove from the page a stylesheet identified by a given uid\n */\nfunction deleteRelatedStyleRule(uid) {\n    var id = 'plotly.js-style-' + uid;\n    var style = document.getElementById(id);\n    if(style) removeElement(style);\n}\n\n/**\n * Setup event listeners on button elements to emulate the ':hover' state without using inline styles,","sourceCodeStart":59,"sourceCodeEnd":95,"githubUrl":"https://github.com/plotly/plotly.js/blob/1d090e0b5ffb8d0fdf6e0e4ff51d3f3cf67f1314/src/lib/dom.js#L59-L95","documentation":"addRelatedStyleRule injects a <style> element into document.head and inserts CSS rules through the sheet object. Under a strict Content-Security-Policy (no 'unsafe-inline' for style-src), the style element may exist but its .sheet is blocked/null, so the library warns 'Cannot addRelatedStyleRule, probably due to strict CSP...' and the requested CSS rule is not applied.","triggerScenarios":"Loading plotly.js on a page served with CSP style-src that disallows inline styles (e.g. style-src 'self' without 'unsafe-inline'); any feature using dynamic style rules (e.g. selection styling, hover styling helpers, legend/shape related styles) then silently missing its CSS.","commonSituations":"Enterprise apps with hardened CSP headers; embedding plots in extensions or iframe sandboxes with restrictive CSP; adding plotly.js to a Next.js/Angular app with nonce-only style policies.","solutions":["Relax the CSP to allow inline styles for style-src, e.g. add 'unsafe-inline' or better, a nonce/hash matching the injected style tags.","Use style-src 'self' plus a nonce and configure plotly.js/injection to use it if your build supports it.","Style the affected elements via application CSS classes instead of the dynamic rule path, where feasible.","Verify with devtools: check document.head for plotly style tags and whether style.sheet is null.","Report/track the missing styles as CSP-blocked in your security config review."],"exampleFix":"// before (server CSP)\nContent-Security-Policy: style-src 'self'\n// after\nContent-Security-Policy: style-src 'self' 'unsafe-inline'","handlingStrategy":"fallback","validationCode":"function canInjectStyles() {\n  const s = document.createElement('style');\n  document.head.appendChild(s);\n  const ok = !!s.sheet;\n  s.remove();\n  return ok;\n}\nif (!canInjectStyles()) console.warn('CSP blocks plotly dynamic styles');","typeGuard":null,"tryCatchPattern":"if (!canInjectStyles()) {\n  // fallback: apply equivalent rules via a bundled static stylesheet\n  document.body.classList.add('plotly-static-styles');\n} else {\n  addRelatedStyleRule(uid, selector, styleString);\n}","preventionTips":["Serve with style-src allowing inline styles ('unsafe-inline' or nonce).","Test plots under your production CSP headers, not just locally.","Prefer static CSS for anything you can style without plotly's dynamic rules.","Document CSP requirements where plotly.js is embedded."],"tags":["csp","security","stylesheet"],"backgroundTag":"csp-blocked-inline-style","analyzedSha":"1d090e0b5ffb8d0fdf6e0e4ff51d3f3cf67f1314","analyzedAt":"2026-09-02T22:03:39.906Z","contentChangedAt":null,"schemaVersion":2},"datasetVersion":"2026-09-10T02:17:09.455Z"}