Para mi sitio web personal, mi página principal tiene un efecto de lienzo de lluvia matricial que agregué en los botones para poder cambiar el color para una mayor interactividad. Funcionó durante un par de días, pero al azar comenzó a darme este error a pesar de que en realidad no había cambiado nada en la página. Este es el error que me sale:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src-attr 'none'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution. Note that hashes do not apply to event handlers, style attributes and javascript: navigations unless the 'unsafe-hashes' keyword is present.
Sé que es muy probable que esto se deba al evento onclick, pero es extraño, ya que funcionó anteriormente. Aquí está el código del html para los botones:
<button type="button" class="colorButton" onclick="changeColor('blueviolet')" style="background-color:blueviolet"></button> <button type="button" class="colorButton" onclick="changeColor('#0F0')" style="background-color:#0F0;"></button> <button type="button" class="colorButton" onclick="changeColor('dodgerblue')" style="background-color:dodgerblue"></button> <button type="button" class="colorButton" onclick="changeColor('red')" style="background-color:red"></button>Aquí está el código de mi código javascript para la función onclick que se muestra arriba:
function changeColor(newcolor) { color = newcolor; let spans = document.getElementsByClassName('spanlink'); let links = document.getElementsByTagName('a'); for(span of spans){ span.style.color = color; } for(atag of links){ atag.style.color = color; } console.log(`Changed the color to ${color}`); }Déjame saber qué está causando este error y cómo puedo solucionarlo.
Deshazte de los atributos de onevent, son basura . El siguiente ejemplo usa una propiedad onevent. Todos los <span> y <a> deberían compartir un .class para que sea mucho más fácil recopilarlos en una NodeList.
Los detalles se comentan en el ejemplo.
/* If there's more than one event origin (ie buttons to click), register the event to an ancestor tag (like document or <main>) */ // This is an onevent property document.body.onclick = changeColor; /* This is an event listener Either one can be used but don't use inline event attributes. */ /* document.body.addEventListener('click', changeColor); */ // Event handler passes Event Object function changeColor(event) { /* If the tag that the user clicked (event.target) has the .colorButton class... */ if (event.target.matches('.colorButton')) { /* ...get it's background-color... */ let color = window.getComputedStyle(event.target, null).getPropertyValue('background-color'); /* Find all tags with class .color and change each of their text colors to the same color as the clicked button */ let col = document.querySelectorAll('.color'); for (c of col) { c.style.color = color; } } } <fieldset> <legend class='color'>TEST</legend> TEST </fieldset> <a href=# class='color'>TEST</a> <section> TEST <b class='color'>TEST</b> </section> <button type="button" class="colorButton" style="background-color:blueviolet"></button> <button type="button" class="colorButton" style="background-color:#0F0;"></button> <button type="button" class="colorButton" style="background-color:dodgerblue"></button> <button type="button" class="colorButton" style="background-color:red"></button>Probablemente el encabezado HTTP Content-Security-Policy se usa en la respuesta que sirve el html/js que está usando en su escenario y eso es lo que cambió en su entorno y por qué cambió el comportamiento de su página.
Usted puede leer sobre ello aquí:
Y hace un ejemplo diciendo que si tiene una política como esta:
script-src 'self' https://js.example.com;Permitirá cosas como esta:
<!-- allowed by 'self' --> <script src="/js/some-file.js"></script> <!-- allowed by https://js.example.com --> <script src="https://js.example.com/file.js"></script>Pero no permitirá esto:
<script src="https://attacker.example.com/file.js"></script>Y en general (más relevante para su caso):
La ejecución de todos los controladores de eventos JS desde el marcado HTML en línea está bloqueada de forma predeterminada, al hacer clic, al cargar, al pasar el mouse por encima, al enviar, etc. Puede hacer que funcionen a través de una expresión de lista de origen 'hashes inseguros', sin embargo, eso solo es compatible con el nivel CSP 3 navegadores.
¿Cómo hacer que las cosas funcionen de todos modos? Puede intentar usar addEventHandler a través de js al principio usando controladores definidos en la misma página solo para cortar cualquier escenario (todavía) desconocido al cargar js externo, solo para deshacerse del ruido y llegar a una solución lo más rápido posible antes de intentar refactorizar mejor.
O existe la posibilidad de definir esa política en el elemento <meta> como muestra el documento de MDN (en el enlace que compartí arriba) en un ejemplo:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">