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' }`