Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

208
Visualizações
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
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda