神族九帝's blog 神族九帝's blog
首页
  • 神卡套餐 (opens new window)
  • 神族九帝 (opens new window)
  • 网盘资源 (opens new window)
  • 今日热点 (opens new window)
  • 在线PS (opens new window)
  • IT工具 (opens new window)
  • FC游戏 (opens new window)
  • 在线壁纸 (opens new window)
  • 面试突击
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 工作笔记
  • 前端基础建设与架构 30 讲
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • 思维导图
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • React
  • 更多
  • 未来要做的事
  • Stirling-PDF
  • ComfyUI
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 收藏夹
  • 更多
GitHub (opens new window)

神族九帝,永不言弃

首页
  • 神卡套餐 (opens new window)
  • 神族九帝 (opens new window)
  • 网盘资源 (opens new window)
  • 今日热点 (opens new window)
  • 在线PS (opens new window)
  • IT工具 (opens new window)
  • FC游戏 (opens new window)
  • 在线壁纸 (opens new window)
  • 面试突击
  • 复习指导
  • HTML
  • CSS
  • JavaScript
  • 设计模式
  • 浏览器
  • 手写系列
  • Vue
  • Webpack
  • Http
  • 前端优化
  • 项目
  • 面试真题
  • 算法
  • 精选文章
  • 八股文
  • 前端工程化
  • 工作笔记
  • 前端基础建设与架构 30 讲
  • vue2源码学习
  • 剖析vuejs内部运行机制
  • TypeScript 入门实战笔记
  • vue3源码学习
  • 2周刷完100道前端优质面试真题
  • 思维导图
  • npm发包
  • 重学node
  • 前端性能优化方法与实战
  • webpack原理与实战
  • webGl
  • 前端优化
  • Web3
  • React
  • 更多
  • 未来要做的事
  • Stirling-PDF
  • ComfyUI
  • 宝塔面板+青龙面板
  • 安卓手机当服务器使用
  • 京东自动评价代码
  • 搭建x-ui免流服务器(已失效)
  • 海外联盟
  • 好玩的docker
  • 收藏夹
  • 更多
GitHub (opens new window)
  • 面试突击

  • 复习指导

  • HTML

  • CSS

  • JavaScript

  • 设计模式

  • 浏览器

    • XSS攻击
    • CSRF攻击
    • 浏览器缓存
    • 重绘和回流
    • web安全
      • 如何防范 iframe 被钓鱼网站嵌套导致的安全问题
        • 正确的做法就是后端添加响应头 X-Frame-Options
    • 地址栏URL回车
  • 手写系列

  • Vue

  • Webpack

  • Http

  • 前端优化

  • 项目

  • 面试真题

  • 算法

  • 精选文章

  • 八股文

  • 前端工程化

  • 面试题
  • 浏览器
wu529778790
2022-01-15

web安全

https://websec.readthedocs.io/zh/latest/ (opens new window)

1642257523(1)

# 如何防范 iframe 被钓鱼网站嵌套导致的安全问题

面试官提示,iframe 如何判断是否被嵌套?(想到可以通过 top 变量值是否等于 window 来判断)

if (top.location != location) {
  top.location.href = location.href;
}

可以有多种方式绕开,不建议这样做

比如下面的方法就可以绕过

document.write(
  '<iframe seamless sandbox security="restricted" id="url_mainframe" frameborder="0" scrolling="yes" name="main" src="http://192.168.57.1:8023/" style="height:100%; visibility: inherit; width: 100%; z-index: 1;overflow: visible;"></iframe>'
);

虽然网页无法获取非同域名下的内嵌网页的 DOM 相关信息,但是假如用户习惯了在某个非官方的登入入口进入,当该非官方的页面某天更改代码,假设前几次进入的是一个伪造的界面(钓鱼网站),之后登陆出错后再切成 iframe,用户信息就会被盗取,所以有这个风险,参考 baidu、youku、youtube 都有做这个处理;

Refused to display 'https://youku.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

https://blog.csdn.net/weixin_33769125/article/details/91434181 (opens new window)

mdn https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP (opens new window)

阮一峰的 csp http://www.ruanyifeng.com/blog/2016/09/csp.html (opens new window)

https://juejin.cn/post/6844903843658989576 (opens new window)

禁止网站被 iframe 嵌套的几种方式 https://juejin.cn/post/6998541496945213477 (opens new window)

# 正确的做法就是后端添加响应头 X-Frame-Options

X-Frame-Options 有三个值

建议后端通过添加响应头的方法实现

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Frame-Options (opens new window)

deny

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

sameorigin

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

allow-from uri

表示该页面可以在指定来源的 frame 中展示。

编辑 (opens new window)
上次更新: 2025/03/17, 12:21:00
重绘和回流
地址栏URL回车

← 重绘和回流 地址栏URL回车→

最近更新
01
Code Review
10-14
02
ComfyUI
10-11
03
vscode插件开发
08-24
更多文章>
Power by vuepress | Copyright © 2015-2025 神族九帝
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式
×