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

原创 野人  2021-10-17 09:01  阅读 23 次

在上篇文章中,野人是写了关于《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标签中嵌套做了限制的站点。

本文地址:http://www.yerenwz.com/4859.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论