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 <style> or provide style.css themselves.
And there is little effort for you to do this change.

static init(elem: HTMLElement, options?: Partial<I.ScrollbarOptions>, useBuiltinStyle: boolean): Scrollbar {
  if (useBuiltinStyle) {
       attachStyle();
  }
}

And in react-smooth-scrollbar will also provide a static method to set the useBuiltinStyle parameter.

static useBuildinStyle(willUse = true) {
    Scrollbar.useBuiltinStyle = willUse;
}
componentDidMount() {
    this.scrollbar = SmoothScrollbar.init(this.$container, this.props, Scrollbar.useBuiltinStyle);
}

User side: set useBuiltinStyle to false, will not cause the CSP issue.

import SmoothScrollbar from "react-smooth-scrollbar";
SmoothScrollbar.useBuildinStyle(false);

[s-pilkhwal]

any update on this issue ?