Cannot addRelatedStyleRule, probably due to strict CSP...

Error message

Cannot addRelatedStyleRule, probably due to strict CSP...

What it means

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.

Source

Thrown at src/lib/dom.js:77

 */
function addRelatedStyleRule(uid, selector, styleString) {
    var id = 'plotly.js-style-' + uid;
    var style = document.getElementById(id);
    if(style && style.matches('.no-inline-styles')) {
        // Do not proceed if user disable inline styles explicitly...
        return;
    }
    if(!style) {
        style = document.createElement('style');
        style.setAttribute('id', id);
        // WebKit hack :(
        style.appendChild(document.createTextNode(''));
        document.head.appendChild(style);
    }
    var styleSheet = style.sheet;

    if(!styleSheet) {
        loggers.warn('Cannot addRelatedStyleRule, probably due to strict CSP...');
    } else if(styleSheet.insertRule) {
        styleSheet.insertRule(selector + '{' + styleString + '}', 0);
    } else if(styleSheet.addRule) {
        styleSheet.addRule(selector, styleString, 0);
    } else loggers.warn('addStyleRule failed');
}

/**
 * to remove from the page a stylesheet identified by a given uid
 */
function deleteRelatedStyleRule(uid) {
    var id = 'plotly.js-style-' + uid;
    var style = document.getElementById(id);
    if(style) removeElement(style);
}

/**
 * Setup event listeners on button elements to emulate the ':hover' state without using inline styles,

View on GitHub (pinned to 1d090e0b5f)

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.

Example fix

// before (server CSP)
Content-Security-Policy: style-src 'self'
// after
Content-Security-Policy: style-src 'self' 'unsafe-inline'

Defensive patterns

Strategy: fallback

Validate before calling

function canInjectStyles() {
  const s = document.createElement('style');
  document.head.appendChild(s);
  const ok = !!s.sheet;
  s.remove();
  return ok;
}
if (!canInjectStyles()) console.warn('CSP blocks plotly dynamic styles');

Try / catch

if (!canInjectStyles()) {
  // fallback: apply equivalent rules via a bundled static stylesheet
  document.body.classList.add('plotly-static-styles');
} else {
  addRelatedStyleRule(uid, selector, styleString);
}

Prevention

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.

When it happens

Trigger: 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.

Common situations: 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.

Related errors

addStyleRule failed

AI-assisted analysis of plotly/plotly.js@1d090e0b5f (2026-09-02). Data as JSON: /api/errors/9a2f4854b8bc89ce. Report an issue: GitHub.