Electron iframe报错Refused to display ‘**‘ in a frame because it set ‘X-Frame-Options‘ to ‘sameorigin‘

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中跳转

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
该错误提示是由内容安全策略(Content Security Policy)引起的,意思是拒绝执行内联脚本,因为它违反了"script-src 'self'"的安全策略指令。 要解决这个问题,有几种方法可以尝试: 1. 方法一是去掉或修改Content Security Policy的策略指令。可以在页面的头部添加以下内容来修改策略指令: `<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">`[2] 这样可以将script-src指令设置为允许从同源('self')加载脚本。 2. 方法二是不采用内联脚本,而是将脚本代码放在外部文件中,然后通过`<script>`标签引入外部文件。这样可以避免内联脚本被拒绝执行的问题。 3. 方法三是修改内容安全策略,列出允许执行的脚本代码的Hash值。这个方法比较复杂,需要计算脚本代码的Hash值并在策略指令中指定。详细的步骤可以参考相关资料。 总结起来,你可以通过修改或去掉Content Security Policy策略指令,或者将脚本代码放在外部文件中来解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Chrome扩展页面动态绑定JS事件提示错误](https://download.csdn.net/download/weixin_38716563/13585425)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [ElectronRefused to execute inline script because it violates the following Content Security Policy](https://blog.csdn.net/qq_42374676/article/details/121336166)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值