Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

214
Views
CSP blocking a JS library despite setting nonce

I am using a certain theme for my php backend which uses Waves JS library. Concurrently, I am implementing CSP directives to protect the application from several vulnerabilities and attacks. The drawback here is that CSP blocks some parts of the Waves library from being run, and since it's 4 years since last the developer updated the library, I couldn't get any threads in the official website to overcome this setback.Now I need to set the Waves library free from the sturdy and robust hands of CSP.

The followings are the code blocks related to the problem at hand.

CSP header in php:

header("Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self' $nonce; script-src 'self' $nonce");

Loading Waves JS library:

<script src="assets/libs/node-waves/waves.min.js" nonce="<?php echo $nonce; ?>"></script>

Even though I use a nonce for the Waves script source, as shown above (though I'm not sure whether I'm doing it correctly or not), CSP just blocks the Waves JS library, and throws this error:

Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-048f2d51a0fd06d8e2f8b336f671201e1ecaf1f6'. Either the 'unsafe-inline' keyword, a hash ('sha256-qVj0FuZJP3W5M+MbWTwdl4yXZd2EyYdl9luuQtKVLLo='), or a nonce ('nonce-...') is required to enable inline execution.

When I just track down the lines that are blocked by CSP, I just come to know that all the three errors belong to just one similar line of code; the following:

ripple.setAttribute('style', convertStyle(rippleStyle));

The function that it is calling is also the following:

function convertStyle(styleObj) {
    var style = '';

    for (var prop in styleObj) {
        if (styleObj.hasOwnProperty(prop)) {
            style += (prop + ':' + styleObj[prop] + ';');
        }
    }

    return style;
}

With these in mind, how can I change ripple.setAttribute('style', convertStyle(rippleStyle)) so that the library is not blocked by CSP? By the way, I'm not going to surrender to unsafe-inline, if you help me though :) .

Any professional hints are much appreciated.

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!