在Electron App中定义CSP HTTP标头

Question

遵循API文档,我不明白如何为我的Electron应用程序的渲染器定义Content-Security-Policy HTTP Header.我总是在DevTools中收到警告.

我试过了:

1)盲目地复制/粘贴API文档中的代码:

app.on('ready', () => {
    const {session} = require('electron')
    session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
        callback({responseHeaders: `default-src 'self'`})
    })

    win = new BrowserWindow(...)
    win.loadUrl(...)
}

(顺便说一句,我不明白为什么字符串中缺少"Content-Security-Policy:".但添加它不会改变任何东西)

2)使用相同的代码修改渲染器的会话:

win = new BrowserWindow(...)
win.loadUrl(...)

const ses = win.webContents.session;
ses.webRequest.onHeadersReceived((details, callback) => {
  callback({responseHeaders: `default-src 'self'`})
})

3)为渲染器添加额外的标头:

win = new BrowserWindow(...)
win.loadURL(`file://${__dirname}/renderer.html`,{
    extraHeaders: `Content-Security-Policy: default-src 'self'`
});

...

唯一有效的方法是在渲染器HTML文件中使用元标记:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'>

Answer 1

不确定为什么文档包含这个破碎的代码.它让我感到困惑,但我通过反复试验找到了一个有效的解决方案:

session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({ responseHeaders: Object.assign({
        "Content-Security-Policy": [ "default-src 'self'" ]
    }, details.responseHeaders)});
});

所以headers参数必须是一个与收到的原始头相同结构的对象details.responseHeaders.并且原始标头也必须包含在传递的对象中,因为此对象似乎完全取代了原始响应标头.

该extraHeaders选项不适用于响应标头.它用于发送到服务器的请求标头.