Electron中试用iframe标签,访问https://www.baidu.com/结果iframe标签显示空白,并且报错
:9080/#/:1 Refused to display 'https://www.baidu.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
大意已同源策略的限制,可以通过服务器端的配置允许iframe的访问,但是如果访问第三方的url,就无法控制了,electron中可以通过webContents.session.webRequest.onHeadersReceived修改x-frame-options属性
let mainWindow
const winURL = process.env.NODE_ENV === 'development'
? `http://localhost:9080`
: `file://${__dirname}/index.html`
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 563,
useContentSize: true,
width: 1000,
webPreferences: {
webSecurity: false,
nodeIntegration: true,
}
})
mainWindow.loadURL(winURL)
// 允许iframe访问第三方url
mainWindow.webContents.session.webRequest.onHeadersReceived({ urls: [ "*://*/*" ] },
(d, c)=>{
if(d.responseHeaders['X-Frame-Options']){
delete d.responseHeaders['X-Frame-Options'];
} else if(d.responseHeaders['x-frame-options']) {
delete d.responseHeaders['x-frame-options'];
}
c({cancel: false, responseHeaders: d.responseHeaders});
}
);
}
app.on('ready', createWindow)
如果第三方的url页面中有跳转,可能会直接让整个页面一起跳转,而不是仅仅在iframe中跳转