iframe内嵌链接常见问题

QVQ梁小鱼QAQ

已于 2023-07-10 09:18:40 修改

阅读量1.3w

点赞数 7

分类专栏：报错集 html vue 文章标签：前端 bug vue.js html javascript

于 2022-12-26 18:19:58 首次发布

本文链接：https://blog.csdn.net/qq_35408366/article/details/128447408

版权

vue 同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

报错集

3 篇文章 0 订阅

订阅专栏

html

3 篇文章 1 订阅

订阅专栏

问题1： Refused to display 'http://localhost:8080/xxx' in a frame because it set 'X-Frame-Options' to 'sameorigin'

出现原因：X-Frame-Options 响应头表示浏览器是否允许一个页面在 <frame>、<iframe>、<embed> 、<object> 标签中显示。站点维护人员可以通过设置该请求头确保自己的网站没有被嵌入到别人的网站里面，从而避免点击劫持攻击。

X-Frame-Options 有三个可能的值：

deny：表示该页面不允许在 frame 中展示，即便是在相同域名的页面中嵌套也不允许。

sameorigin：表示该页面可以在相同域名页面的 frame 中展示。

allow-from uri：表示该页面可以在指定来源的 frame 中展示。

问题2：This request has been blocked; the content must be served over HTTPS.

出现原因：HTTPS 是 HTTP over Secure Socket Layer，以安全为目标的 HTTP 通道，所以在 HTTPS 承载的页面上不允许出现 http 请求，因此需要将加载的http请求替换成https请求，才能正常显示。

解决方法：

1.如果iframe加载的内容支持https请求，前端可以在页面的<head>中加入以下代码自动将http升级成https，也可以通过后端去配置。

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

2.如果iframe加载的内容不支持https请求，可以让后端通过Nginx拦截转发。

比如：在https://www.xxx.com下通过iframe内嵌一个http://www.abc.com/aaa，前端需要将http://www.abc.com替换成https://www.xxx.com，然后后端要开一个专门的ng服务对该请求进行拦截，再将https://www.xxx.com重新替换成http://www.abc.com。

问题3：Uncaught DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame。

出现原因： 跨域访问。

解决方法：百度一下，你就知道。