Hacer que Angular funcione con una Política de Seguridad de Contenido restrictiva (CSP)


No puedo hacer que la aplicación base Angular2 (final) funcione con el siguiente CSP restrictivo.

default-src 'none';
script-src 'self';
style-src 'self';
font-src 'self';
img-src 'self' data:;
connect-src 'self'

Hay un error unsafe-eval en lang.js y dos en la zona .js. Podría dar una solución ?

Paso a reproducir con Angular CLI

He creado un repositorio de GitHub . También puede seguir las instrucciones a continuación.

Utilice la última CLI Angular con webpack 6.0.8 y la nueva aplicación creada con el instrucciones a continuación.

ng new csp-test

Insertar en el índice.html la meta etiqueta que define la siguiente directiva de seguridad de contenido restrictiva.

<meta 
  http-equiv="Content-Security-Policy" 
  content="default-src 'none';script-src 'self';style-src 'self';font-src 'self';img-src 'self' data:;connect-src 'self'">

Luego entregue la solicitud.

ng serve

Acceso http://localhost:4200 / , la página no se carga ya que los scripts están bloqueados por CSP.

Errores

Error en Chrome

Lang.js

lang.js:335 Uncaught EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

Con el código fuente.

335: return new (Function.bind.apply(Function, [void 0].concat(fnArgNames.concat(fnBody))))().apply(void 0, fnArgValues);

Zona.js

zone.js:344 Unhandled Promise rejection: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".
 ; Zone: <root> ; Task: Promise.then ; Value: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".

zone.js:346 Error: Uncaught (in promise): EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self'".(…)

Con el código fuente.

343: if (rejection) {
344:     console.error('Unhandled Promise rejection:', rejection instanceof Error ? rejection.message : rejection, '; Zone:', e.zone.name, '; Task:', e.task && e.task.source, '; Value:', rejection, rejection instanceof Error ? rejection.stack : undefined);
345: }
346: console.error(e);
Author: Nicolas Henneaux, 2016-08-03

2 answers

 3
Author: Günter Zöchbauer,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-03 05:00:02

El problema se ha resuelto usando la última versión de Angular CLI (comenzando con 1.0.0-beta.17). El siguiente comando sirve a una aplicación en funcionamiento porque incluye una compilación-head-of-time.

ng serve --prod
 3
Author: Nicolas Henneaux,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-18 19:25:08