记录使用iframe嵌入第三方url页面时遇到的问题

需求:需要在iframe中嵌入第三方url，该url需要访问视频和音频

以为只需要 <iframe src="url" style="width:100%; height:99%" frameborder="0"></iframe>，然后使用http://lan-ip:port就万事大吉了，没想到出现了如下两个问题：

问题1：F12查看错误提示：Only secure origins are allowed (see: https://goo.gl/Y0ZkNV)？

提示指出“只有安全的来源才能被允许访问"音视频,即如下情况下才能进行http访问：

• (https, *, *)

• (wss, *, *)

• (*, localhost, *)

• (*, 127/8, *)

• (*, ::1/128, *)

• (file, *, —)

• (chrome-extension, *, —)

实践中发现通过localhost和127.0.0.1访问的时候没有该错误提示，因此若不使用这些安全来源，那么，就需要使用https，进行访问，通过搭建https环境，也没有这类错误出现

问题2：F12 出现：permission denied，伴随着警告Video Capture permission has been blockedbecause of a Feature Policy applied to the current document？

这里就是一些权限问题了，给iframe添加allow属性：

属性值：

geolocation
microphone
camera
midi
encrypted-media

这里只用到了音频和视频，添加camera和midi，如下

<iframe src="url" style="width:100%; height:99%" allow="camera;midi" frameborder="0"></iframe>

最后完美的实现了要求。

总结：需要安全来源才能访问音视频；需要设置权限

参考文章：

https://segmentfault.com/q/1010000013012999

https://segmentfault.com/a/1190000009249162