Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSP violation without 'unsafe-inline' #6434

Open
Soham3-1415 opened this issue Aug 17, 2019 · 5 comments
Open

CSP violation without 'unsafe-inline' #6434

Soham3-1415 opened this issue Aug 17, 2019 · 5 comments

Comments

@Soham3-1415
Copy link

Soham3-1415 commented Aug 17, 2019 •
edited

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

jlmakes/scrollreveal@f75c0c2
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 Soham3-1415 changed the title CSP Violation without 'unsafe-inline' CSP violation without 'unsafe-inline' Aug 17, 2019
@Soham3-1415
Copy link
Author

Soham3-1415 commented Aug 17, 2019 •
edited

Using the _applyStyle function from jlmakes/scrollreveal@f75c0c2 seems to fix the issue in this project, but that code is from a project licensed under GPL.

@mxdpeep
Copy link

mxdpeep commented Aug 20, 2019 •
edited

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

@Soham3-1415
Copy link
Author

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
Copy link
Contributor

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

e5fbad2

@lsfxz
Copy link

lsfxz commented Oct 31, 2019

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mxdpeep @DanielRuf @lsfxz @Soham3-1415