在Electron中使用iframe标签，出现X-Frame-Options和Content Security Policy拦截有效解决办法

在上篇文章中，野人是写了关于《Electron使用iframe标签，出现跨域问题的有效解决办法》

所以，对于跨域问题，怎么解决的方法，大家看上面的那篇文章即可，然而在Electron中又出现了另外一个错误，可以简单的理解，是对方的站点做了第二重的安全性防护，就是禁止别人通用iframe标签来套用浏览他们的网站，具体的报错信息是这样的。

//这是腾讯的网站，加了CSP策略
Refused to frame 'https://www.qq.com/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors https://*.qq.com".

//这是百度的网站，加了X-Frame-Options，即禁止站点嵌套在iframe标签中
chromewebdata/:1 Refused to display 'https://www.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

那么怎么解决这个问题呢，废话就不多说了，直接上代码：

const { app, BrowserWindow } = require('electron');
let mainWindow = null;
app.on('ready', () => {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
    });
    mainWindow.loadURL(path.join('file://', __dirname, '../build/index.html'));
    mainWindow.webContents.session.webRequest.onHeadersReceived({ urls: ['*://*/*'] }, (d, c) => {
        const resHeadersStr = JSON.stringify(Object.keys(d.responseHeaders));
        const removeHeaders = ['X-Frame-Options', 'Content-Security-Policy'];//在这里把你想要移除的header头部添加上，代码中已经实现了忽略大小了，所以不用担心匹配不到大小写的问题
        removeHeaders.forEach(header => {
            let regPattern = new RegExp(header, 'ig');
            let matchResult = resHeadersStr.match(regPattern);
            if (matchResult && matchResult.length) {
                matchResult.forEach(i => {
                    delete d.responseHeaders[i];
                });
            }
        });
        c({ cancel: false, responseHeaders: d.responseHeaders });
    });
});

代码，大概的原理是，在收到站点回应的头部时，进行拦截，并把指定的header头部的值给去掉，然后返回新的header头部，这样就实现了，可以在iframe标签中嵌套做了限制的站点。