Estoy usando un tema determinado para mi backend php que usa la biblioteca Waves JS. Al mismo tiempo, estoy implementando directivas CSP para proteger la aplicación de varias vulnerabilidades y ataques. El inconveniente aquí es que CSP bloquea la ejecución de algunas partes de la biblioteca de Waves , y dado que han pasado 4 años desde la última vez que el desarrollador actualizó la biblioteca, no pude obtener ningún hilo en el sitio web oficial para superar este contratiempo. Ahora necesito libere la biblioteca de Waves de las manos robustas y robustas de CSP.
Los siguientes son los bloques de código relacionados con el problema en cuestión.
Encabezado CSP en php :
header("Content-Security-Policy: default-src 'self'; img-src 'self' data:; style-src 'self' $nonce; script-src 'self' $nonce");Cargando la biblioteca de Waves JS :
<script src="assets/libs/node-waves/waves.min.js" nonce="<?php echo $nonce; ?>"></script> Aunque uso un nonce para el código fuente de Waves, como se muestra arriba (aunque no estoy seguro de si lo estoy haciendo correctamente o no), CSP simplemente bloquea la biblioteca de Waves JS y arroja este 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.Cuando busco las líneas que están bloqueadas por CSP, me doy cuenta de que los tres errores pertenecen a una sola línea de código similar; el seguimiento:
ripple.setAttribute('style', convertStyle(rippleStyle));La función a la que llama también es la siguiente:
function convertStyle(styleObj) { var style = ''; for (var prop in styleObj) { if (styleObj.hasOwnProperty(prop)) { style += (prop + ':' + styleObj[prop] + ';'); } } return style; } Con esto en mente, ¿cómo puedo cambiar ripple.setAttribute('style', convertStyle(rippleStyle)) para que CSP no bloquee la biblioteca? Por cierto, no voy a rendirme ante unsafe-inline , si me ayudan :).
Cualquier sugerencia profesional es muy apreciada.