vue使用iframe,embed,video报错because it set ‘X-Frame-Options‘ to ‘DENY‘
场景页面上使用iframe,embed,video插入音频,pdf等控制台报错Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.X-Frame-Options简介The X-Frame-Options HTTP 响应头是用来给浏览器 指示允
·
场景
页面上使用iframe,embed,video插入音频,pdf等
控制台报错
Refused to display 'http://127.0.0.1:8000/console' in a frame because it set 'X-Frame-Options' to 'DENY'.
X-Frame-Options
- 简介
The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 , 或者
中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免点击劫持(clickjacking)攻击。
- 可取值
X-Frame-Options 有三个值:
1. DENY :表示该页面不允许在 frame 中展示,即便是在相同域名的页面中嵌套也不允许
2. SAMEORIGIN :表示该页面可以在相同域名页面的 frame 中展示
3。 ALLOW-FROM uri :表示该页面可以在指定来源的 frame 中展示
根据上述 X-Frame-Options的三个值描述,只要修改django的X-Frame-Options为SAMEORIGIN ,那么相同域名页面就可以使用frame中展示。
- 作用
1. 点击劫持保护
当恶意站点诱使用户单击他们已加载到隐藏框架或iframe中的另一个站点的隐藏元素时,会发生这种类型的攻击。
2. 防止点击劫持
现代浏览器采用X-Frame-Options HTTP标头,该标头指示是否允许在框架或iframe中加载资源。如果响应包含标头值为的标头,SAMEORIGIN则浏览器将仅在请求源自同一站点时才将资源加载到框架中。如果将标头设置为,DENY则无论哪个站点发出请求,浏览器都将阻止资源加载到框架中。
解决
后端添加 response.setHeader(“X-Frame-Options”, “SAMEORIGIN”);// 解决IFrame拒绝的问题
更多推荐
已为社区贡献7条内容
所有评论(0)