H5W3
当前位置:H5W3 > JavaScript > 正文

electron iframe和webview嵌入页面区别

苏南大叔在本文中,对比一下electron中的iframewebview标签。当然,仅仅是对比其中可能存在的一个微小区别。因为两者iframewebview,应该存在着较大差别。所以,本篇文字,仅仅是管中窥豹罢了。主要的切入点就是:对于electron程序,渲染进程嵌入页面的时候,使用iframe和使用webview,产生了一个比较明显的区别。

electron程序,表相分析iframe和webview嵌入页面的表现

本文测试环境:mac

基本前提

防嵌入设置

因为使用iframe和使用webview,如果要产生这个巨大差异,就需要发出一个特殊的header头。而苏南大叔的博客代码,恰巧就发出了这个特殊的header头。

header("Content-Security-Policy: frame-ancestors newsn.net");

详情请点击:

正常情况下来说,这个特殊的header头,可以防止第三方页面嵌入你的网站。

webview标签支持

因为从[email protected]系列开始,默认是禁用掉了webviewTag的支持,所以,还是需要在主进程中启用一下webviewTag。示例代码如下([email protected]及更高版本,可能需要下述代码):

mainWindow = new BrowserWindow({
//...
webPreferences: {
webviewTag:true
//...
}
})

测试代码

上述防止嵌入页面的特殊header头,是针对普通的网页来说的,嵌入方式是iframe。而对于electron的渲染进程来说,能嵌入页面的tag,可不仅仅是iframe,还有webview这个特有标签可以选择。测试代码如下:

<iframe src="https://newsn.net"></iframe>
<webview src="https://newsn.net"></webview>

测试结果

测试结果是比较神奇的,在渲染进程中:

iframe嵌入失败

通过iframe标签嵌入的页面,显示空白,嵌入失败。错误提示:

Refused to display 'https://newsn.net/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
electron程序,表相分析iframe和webview嵌入页面的表现

webview嵌入成功

通过webview标签的页面,正常显示,嵌入成功。换句话说,就是:webview标签突破了某种浏览器限制,您懂的。

electron程序,表相分析iframe和webview嵌入页面的表现

总结

在本文中,苏南大叔得出的结论是:webview虽然看起来和iframe非常类似,但是webview有着更大的权限,这也许是electron官方,会默认禁用webview标签的原因之一吧。

本文地址:H5W3 » electron iframe和webview嵌入页面区别

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址