Mi servicio backend genera una Política de seguridad de contenido como la siguiente:
Content-Security-Policy default-src 'self'; frame-ancestors 'self'; form-action 'self'; script-src 'nonce-4VOtk0Uo1l7pwtC';El HTML renderizado usa nonce en las etiquetas del script para permitir su ejecución:
<script nomodule src="https://xxx/build/script1.js" nonce="4VOtk0Uo1l7pwtC"></script> <script type="module" src="https://xxx/build/script2.js" nonce="4VOtk0Uo1l7pwtC"></script>Estos scripts se cargan correctamente. El problema es que script2.js incluye una instrucción de importación para cargar otro script:
import{p as e,b as t}from"./p-cfa9fa8a.js";Este está bloqueado por la política csp, ya que no incluye el parámetro nonce:
TypeError: error loading dynamically imported module undefined p-cfa9fa8a.js:1:12156 Content Security Policy: The page's settings blocked the loading of a resource at inline (“default-src”). p-cfa9fa8a.js:1:12156La solución fue agregar la opción 'strict-dynamic' :
La expresión de fuente dinámica estricta especifica que la confianza otorgada explícitamente a un script presente en el marcado, al acompañarlo con un nonce o un hash, se propagará a todos los scripts cargados por ese script raíz. Al mismo tiempo, se ignora cualquier lista de permitidos o expresiones fuente como 'self' o 'unsafe-inline'. Consulte script-src para ver un ejemplo.
Content-Security-Policy default-src 'self'; frame-ancestors 'self'; form-action 'self'; script-src 'strict-dynamic' 'nonce-4VOtk0Uo1l7pwtC';