Create dynamic style tag violates Content Security Policy in style.ts

[donick]

Environment

• Browser:
  • Chrome 80.0.3987.116
  • Firefox 73.0.1
  • Safari 13.0.5
• Version of smooth-scrollbar: 8.2.7 +

Issue Summary

Browser prompts:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' *.google.com". Either the 'unsafe-inline' keyword, a hash ('sha256-2tmqUQz4XHnCf/FsD37KyOheoO1zwbDqUd/zUCFPqW0='), or a nonce ('nonce-...') is required to enable inline execution.

It caused by creating style tag and set its content with textContent property in style.ts.

export function attachStyle() { if (isStyleAttached || typeof window === 'undefined') { return; }

const styleEl = document.createElement('style'); styleEl.id = STYLE_ID; styleEl.textContent = SCROLLBAR_STYLE;

if (document.head) { document.head.appendChild(styleEl); }

isStyleAttached = true; }

Current Behavior

Smooth-scrollbar was blocked to invoke continuously, since it violates CSP.

Expected Behavior

Smooth-scrollbar can works normally without CSP issues.

Steps to Reproduce

Run smooth-scrollbar on a page with restricted style-src in CSP.

[idiotWu]

Thanks for reporting! I'll consider using separate css files in the next major release (i.e. v9.0.0).

[donick]

@idiotWu Can you provide a parameter in init method for choosing create style tag or not? So that user can determine to use the dynamic