CSP violation without 'unsafe-inline'

Soham3-1415 commented 5 years ago

Expected Behavior

A button with waves-effect should not require 'unsafe-inline' to work with a content security policy.

Current Behavior

A content security policy needs the 'unsafe-inline' option to set the attributes necessary for the waves effect on a button.

Possible Solution

https://github.com/scrollreveal/scrollreveal/pull/431/commits/f75c0c23f56f82a565351544396dec151155a054 seems to fix a similar issue in another project. Console errors are thrown with ripple.setAttribute('style', convertStyle(rippleStyle));

Steps to Reproduce (for bugs)

HTML of a simple button:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    </head>
    <body>
        <button class="waves-effect btn-large"></button>
    </body>
</html>

The button waves effect will be blocked by a content security policy without 'unsafe-inline'.

Context

I'm trying to use Materialize on a web server with a properly configured content security policy. Using 'unsafe-inline' neutralizes most of the benefits of a content security policy. I suspect this will be an issue with more than just buttons, but I have only tested buttons so far. Likely, it's an issue with using setAttribute.

Your Environment

Version used: 1.0.0
Browser Name and version: Chromium 76.0.3809.100
Operating System and version (desktop or mobile):
Link to your project (if appropriate):

Soham3-1415 commented 5 years ago

Using the _applyStyle function from https://github.com/scrollreveal/scrollreveal/pull/431/commits/f75c0c23f56f82a565351544396dec151155a054 seems to fix the issue in this project, but that code is from a project licensed under GPL.

mxdpeep commented 5 years ago

it's a general button creation problem, not a wave effect itself

Soham3-1415 commented 5 years ago

The CSP violations only show in the console after Materialize tries to apply some styles with ripple.setAttribute(). I don't see any violations with just the button.

DanielRuf commented 5 years ago

As you can see it in the blame view this code is directly from waves.js.

https://github.com/Dogfalo/materialize/commit/e5fbad2c3131894602357d608c6e0ab3590d8e0f

lsfxz commented 4 years ago

There had been a PR for that once, with a somewhat unsatisfying conclusion: #6357

Dogfalo / materialize