web前端安全性——iframe安全问题-CSDN博客

本文链接：https://blog.csdn.net/qq_53911056/article/details/136241915

本文探讨了iframe安全问题，特别是界面劫持现象，通过CSS技巧实现透明劫持。提出了前端防护方法，如检测是否在iframe中并尝试跳出，以及使用X-Frame-Options服务器端防护机制来防止点击劫持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、概念

iframe安全问题可称作界面劫持，像点击劫持、拖放劫持、触屏劫持。就是我们的点击，拖放，触屏操作被劫持了，而去操作了其它的透明隐藏的界面。
**原理是利用透明层iframe,使用了CSS中的opacity或z-index等属性，来到达透明和位于其它界面的上方，然后使用iframe来嵌入劫持页面。**到达了用户操作的不是它看到的界面，不是他以为的那个界面，而是那个透明的位于上层的界面。
代码：
黑客可能会尝试在一个隐藏的iframe中嵌入你的页面，并诱使用户在该iframe上进行操作。
html

	<body style="height: 100%; margin: 0;">
		<iframe width="100%" height="100%" frameborder="0" src="https://www.taobao.com/"></iframe>
		<div id="box">
			黑客网站
		</div>
	</body>

css

			#box {
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0;
				top: 0;
				background: transparent;
				opacity: 0
			}

2、界面劫持的防范

（1）前端防护
将下面这段代码放到网站页面的body标签前

主要用于检查当前页面是否在一个iframe中。如果是，它会尝试将顶级窗口（top）的URL设置为当前窗口（self）的URL，从而尝试从iframe中“跳出”到主页面。这样别人在通过iframe框架引用你的网站网页时，浏览器会自动跳转到你的网站所引用的页面上。这通常也是为了防止点击劫持攻击。

		<script>
			if(top.location!=self.location){
				top.location=self.location;
			}
		</script>

（2）服务器防护
使用X-Frame-Options防止网页被iframe，X-FRAME-OPTIONS是微软提出的一个http头，专门用来防御利用iframe嵌套的点击劫持攻击

DENY   //拒绝任何域加载（不允许任何页面通过iframe嵌入当前页面）
SAMEORIGIN   // 允许同源域下加载（只有同源的页面才能通过iframe嵌入）
ALLOW-FROM   // 可以定义允许iframe加载的页面地址