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

苏南大叔:electron程序,表相分析iframe和webview嵌入页面的表现 - electron-iframe-vs-webview
electron程序,表相分析iframe和webview嵌入页面的表现(图3-1)

本文测试环境:mac/electron@5.0.8。本文中的龙套演员就是苏南大叔的博客(https://newsn.net)。

基本前提

防嵌入设置

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

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

详情请点击:

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

webview标签支持

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

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嵌入页面的表现 - electron-iframe-embed
electron程序,表相分析iframe和webview嵌入页面的表现(图3-2)

webview嵌入成功

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

苏南大叔:electron程序,表相分析iframe和webview嵌入页面的表现 - electron-webview-embed
electron程序,表相分析iframe和webview嵌入页面的表现(图3-3)

总结

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

更多electron相关经验文章,欢迎点击苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   electron

本站的忠实读者小伙伴,正在阅读下面这些文章: