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.