javascript - insecure - electron security warning this renderer process has node js
Define CSP HTTP Header en Electron App (2)
No estoy seguro de por qué la documentación contiene este código roto. Me confundió muchísimo, pero encontré una solución funcional por prueba y error:
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({ responseHeaders: Object.assign({
"Content-Security-Policy": [ "default-src ''self''" ]
}, details.responseHeaders)});
});
Por lo tanto, el argumento de los encabezados debe ser un objeto con la misma estructura que los encabezados originales recibidos en details.responseHeaders . Y los encabezados originales también deben incluirse en el objeto pasado, ya que este objeto parece reemplazar completamente los encabezados de respuesta originales.
La opción extraHeaders no es para encabezados de respuesta. Es para los encabezados de solicitud enviados al servidor.
Siguiendo la documentación de la API , no entiendo cómo definir un encabezado HTTP de política de seguridad de contenido para el renderizador de mi aplicación Electron. Siempre recibo una advertencia en el DevTools.
Lo intenté:
1) Copie / pegue el código en el documento API, a ciegas:
app.on(''ready'', () => {
const {session} = require(''electron'')
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({responseHeaders: `default-src ''self''`})
})
win = new BrowserWindow(...)
win.loadUrl(...)
}
(Por cierto, no entiendo por qué falta "Content-Security-Policy:" en la cadena. Pero agregarlo no cambia nada)
2) Modificando la sesión del renderizador con el mismo código:
win = new BrowserWindow(...)
win.loadUrl(...)
const ses = win.webContents.session;
ses.webRequest.onHeadersReceived((details, callback) => {
callback({responseHeaders: `default-src ''self''`})
})
3) Agregue un encabezado adicional al otro procesador:
win = new BrowserWindow(...)
win.loadURL(`file://${__dirname}/renderer.html`,{
extraHeaders: `Content-Security-Policy: default-src ''self''`
});
...
Lo único que funciona es usar una etiqueta meta en el archivo HTML del procesador:
<meta http-equiv="Content-Security-Policy" content="default-src ''self''>
Si su objetivo es poder usar CSP tanto en modo dev (con recursos cargados por http:// protocol) como en modo prod ( file:// protocol), puede hacerlo de la siguiente manera:
Primero, elimine el meta Content-Security-Policy de src/index.html , necesitamos inyectarlo solo para el modo prod, porque
-
onHeadersReceivedno funcionará parafile://protocol como confirm documentos de Electron, y también porque - si lo mantenemos en
src/index.htmlpara el modo Dev, se anularáonHeadersReceivedal menos para parte de los recursos, y para el modo Dev necesitamos diferentes configuraciones.
Luego podemos inyectarlo para el modo Prod con gulp-inject :
// in project dir
npm install --save-dev gulp-inject gulp
// src/index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<base href="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:prod-headers -->
<!-- src/prod-headers.html content will be injected here -->
<!-- endinject -->
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
// src/prod-headers.html
<meta http-equiv="Content-Security-Policy" content="default-src ''self''>
// gulpfile.js
var gulp = require(''gulp'');
var inject = require(''gulp-inject'');
gulp.task(''insert-prod-headers'', function () {
return gulp.src(''./dist/index.html'')
.pipe(inject(gulp.src(''./src/prod-headers.html''), {
starttag: ''<!-- inject:prod-headers -->'',
transform: function (filePath, file) {
// return file contents as string
return file.contents.toString(''utf8'')
}
}))
.pipe(gulp.dest(''./dist''));
});
Luego, asegúrese de que npx gulp insert-prod-headers se ejecute, por ejemplo, ng build genera dist/index.html .
Y para el modo dev, usemos onHeadersReceived de manera similar al ejemplo de documentos electrónicos:
const args = process.argv.slice(1);
const devMode = args.some((val) => val === ''--serve'');
app.on(''ready'', () => {
if (devMode) {
const {session} = require(''electron'')
session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
callback({responseHeaders: `default-src http: ws:`})
})
}
win = new BrowserWindow(...)
win.loadUrl(...)
}
Esta solución fue probada en Electron 4.0.3.