Tengo que usar una política de seguridad de contenido para una aplicación de reacción.
Sin embargo, la razón, que no es un gran problema aquí, es que estoy creando una WebExtension/Browser Extension/add-on y estos tienen una política de seguridad de contenido de este tipo, y hay cosas como 'unsafe-eval' y 'unsafe-inline' están estrictamente prohibidos :
Las extensiones con 'unsafe-eval', 'unsafe-inline', script remoto, blob o fuentes remotas en su CSP no están permitidas para las extensiones enumeradas en addons.mozilla.org debido a importantes problemas de seguridad.
He creado la aplicación con create-react-app vagamente siguiendo esta guía . El objetivo sería poder usar reaccionar allí con el CSP predeterminado de WebExtensions , o, al menos, solo ajustes menores.
Sin embargo , tenga en cuenta que los CSP (tan estrictos) también deberían usarse en sitios web "normales" por razones de seguridad, por lo que esta pregunta no es solo para los creadores de complementos.
Pero cuando ejecuto npm run build el index.html generado contiene más que suficiente código JS en línea .
Entonces, ¿cómo puedo configurar / usar reaccionar para no hacer esto y ...
En realidad, parece que la versión de desarrollo (creada cuando ejecuto npm start ) no tiene tales minificaciones. Así que hice una pregunta separada sobre cómo obtener los archivos desde allí: ¿Cómo construir una versión de producción de React sin minificación?
De hecho, gracias a @heyimalex encontré una respuesta muy fácil para mi problema. Simplemente ejecute el script de compilación de esta manera:
INLINE_RUNTIME_CHUNK=false npm run buildPosteriormente, debería ser compatible con CSP.
Cualquiera que tenga un problema con INLINE_RUNTIME_CHUNK=false con un comando no reconocido en el sistema Windows, a continuación se muestra la forma correcta de ejecutar el comando para evitar el fragmento en línea en la compilación.
set "INLINE_RUNTIME_CHUNK=false" && react-scripts build
Cree un script para ejecutarlo en su archivo package.json .
"scripts": { "build": "set \"INLINE_RUNTIME_CHUNK=false\" && react-scripts build" }Descubrí que las comillas alrededor de INLINE_RUNTIME_CHUNK también son necesarias && Si el comando se ejecuta en la línea de comando predeterminada de Windows.
Para Linux, puede seguir la respuesta aceptada.
Utilice la variable de entorno para que no tenga que preocuparse por ejecutar el comando.
Cree un archivo .env y agregue INLINE_RUNTIME_CHUNK=false .