CSP blocks a line of code

[habibmousavi]

While extending my deep appreciations to the author, I wanted to ask him to rewrite a line of code, as it is getting blocked by the CSP directives even though we use a nonce. The line is the following
ripple.setAttribute('style', convertStyle(rippleStyle));
This just throws the following error:
Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).
I'd be really grateful if some action is taken to fix this issue.

[marconue]

You can create a new .js file with the following code, it's a little "hack" that allows you to replace the .setAttribute, more info in the webpage https://csplite.com/csp/test343/

`var setAttribute_ = Element.prototype.setAttribute; // Save source of Elem.setAttribute funct
Element.prototype.setAttribute = function (attr, val) {
if (attr.toLowerCase() !== 'style') {
setAttribute_.apply(this, [attr, val]); // Call the saved native Elem.setAttribute funct
}
else { // 'color:red; background-color:#ddd' -> el.style.color='red'; el.style.backgroundColor='#ddd';
var arr = val.split(';').map((el, index) => el.trim());
for (var i = 0, tmp; i < arr.length; ++i) {
if (! /:/.test(arr[i])) continue; // Empty or wrong
tmp = arr[i].split(':').map((el, index) => el.trim());
this.style[camelize(tmp[0])] = tmp[1];
//console.log(camelize(tmp[0]) + ' = '+ tmp[1]);
}
}
}

function camelize(str) {
return str
.split('-') // Parse 'my-long-word' to ['my', 'long', 'word']
.map(
// Coverts all elements to uppercase except first: ['my', 'long', 'word'] -> ['my', 'Long', 'Word']
(word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
)
.join(''); // Join ['my', 'Long', 'Word'] to 'myLongWord'
}`