Components Select, TextField and Slider violate Content Security Policy

[db6edr]

Describe the bug
The components Select, TextField and Slider are violating the Content Security Policy style-src: 'self';. This makes it rather difficult to utilize the library when 'unsafe-inline' is not acceptable. Hashes and nonces are not (yet?) feasible with Svelte.

To Reproduce
Steps to reproduce the behavior:

1. Clone the sample repo at https://github.com/db6edr/smui-csp-violations
2. Run npm install
3. Run npm run dev
4. Open your browser and its dev tools. Navigate to http://localhost:4200.

The sample repo essentially sets up a local ExpressJS to announce the following Content Security Policy to the browser:

Content-Security-Policy:
    default-src 'self';
    base-uri 'self';
    form-action 'self';
    script-src 'self';
    script-src-elem 'self' http://localhost:*/;
    style-src 'self';
    style-src-elem 'self' https://fonts.googleapis.com/;
    font-src 'self' https://fonts.gstatic.com/;
    connect-src 'self' ws://localhost:*/;

Allowing localhost:* is required for the live reload feature.

The Svelte App uses the three components in

Expected behavior
There should be no error messages in the browser console Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'".

Desktop:

• OS: Linux Mint 20.2
• Chrome 94.0.4606.71 (official build, 64 bit)

[jaygiang]

Having same issue as well. Anyone have a workaround for this?

[dexterouschen]

@hperrin @jaygiang svelte seems to use setAttribute behind the scenes, which triggers CSP. I think we could potentially stop binding to style attribute directly and apply style per property, since direct manipulation on the element won't trigger CSP. we would need a lot of bind:this={someElement} and someElement.style['someAttribute'] = newValue for all elements with style changes. I could submit a PR if you think it's worth a try.