Después de actualizar a Angular 12, mi política de seguridad de contenido bloquea los estilos para que no se carguen correctamente.
El kit de desarrollo Angular 12 parece agregar un nuevo controlador de eventos en línea a la referencia del paquete CSS en index.html, ejemplo a continuación.
<link rel="stylesheet" href="styles.5951e4ca367b697db091.css" crossorigin="anonymous" integrity="sha384-2031E8+oC87S0N7NzRGcF8fqx777KEJOgQ3KcUN4aX6xsR3BVaV5sh4fibR5joOc" media="print" onload="this.media='all'">Error
Refused to execute inline event handler because it violates the following Content Security Policy directive...Esto parece estar relacionado con este RFC: https://github.com/angular/angular-cli/issues/18730 pero no puedo encontrar más información sobre cómo usarlo con un estricto (no 'inseguro-en línea' ) CSP.
¡ATENCIÓN! Respuesta actualizada
La solución original publicada a continuación rompe Safari (MacOS), por lo que tuvimos que retroceder y deshabilitar la optimization.styles.inlineCritical .
Además, como comenta masterfloda a continuación, la elección debe ser la seguridad sobre el rendimiento en la mayoría de los casos, si no en todos. Mi pensamiento original era que sería difícil de explotar ( unsafe-hashes ), pero no he realizado una puntuación de riesgo de InfoSec exhaustiva al respecto.
Hay un ticket abierto para esto en el repositorio de Angular - #20864 . Le sugiero que deshabilite la optimization.styles.inlineCritical por ahora y que le guste y se suscriba a ese problema.
Sí, este problema fue introducido por las opciones de optimización de Estilos de Angular v12 ( inlineCritical: true ) que agrega un controlador de eventos de onload a la etiqueta de enlace para la hoja de estilo principal de la siguiente manera:
<link rel="stylesheet" href="styles.<hash>.css" media="all" onload="this.media='all'">
Se puede resolver sin deshabilitar inlineCritical o habilitar 'unsafe-inline' en el CSP, de la siguiente manera:
onload this.media='all'script-src en el CSP'unsafe-hashes' a la directiva script-src ; de lo contrario, se bloquea con el siguiente registro en la consola: tenga en cuenta que los hashes no se aplican a los controladores de eventos, atributos de estilo y javascript: navegaciones a menos que esté presente la palabra clave 'unsafe-hashes'Tuve el mismo problema después de la actualización de Angular 12.
La solución para mí fue establecer la optimización de la opción del espacio de trabajo "inlineCritical" en falso. La opción inlineCritical se cambió en Angular 12 al valor predeterminado verdadero para mejorar First Contentful Paint, consulte https://angular.io/guide/workspace-config#styles-optimization-options
aquí hay un ejemplo de configuración del espacio de trabajo
"project": { "architect": { "build": { "configurations": { "production": { "optimization": { "scripts": true, "styles": { "minify": true, "inlineCritical": false }, "fonts": true } } } } } },