禁止网站被iframe嵌套的几种方式

这是我参与8月更文挑战的第20天，活动详情查看： 8月更文挑战

前言

昨天写了一篇文章，是关于 iframe的跨域通信问题，是嵌套iframe，由于跨域导致不能与主页面通信的问题，然后提出了几种解决方案。

iframe跨域不能通信，但是页面还是可以展示。今天来讲讲如何限制网站不能被iframe嵌套，也就是页面都不能展示。

效果类似如下：

禁止iframe嵌套

第一种方式

添加X-Frame-Options响应头

这个响应头是用来是否允许网页通过iframe元素嵌套的，它有三个值

deny

禁止，不允许任何网页嵌套，包括是同源的域名也不可以。
sameorigin

只允许同源的域名访问
- 比如https://test.aaa.com/abc嵌套https://test.aaa.com/test的网页,同源，允许嵌套
- 比如https://test.aaa.com/abc嵌套https://cp3.abc.com/test的网页，不同源，不可以嵌套
allow-from url

允许url的域名可以嵌套，多个可以逗号隔开，比如allow-from http://aaa.com, 允许http://aaa.com嵌套本网页。

谷歌浏览器不支持该设置allow-from，firefox可以

下面来实践一下：

新建一个文件

index.js

const http = require('http')
http.createServer((req, res) => {
  res.writeHead(200, {
   'Content-Type': 'text/html; charset=UTF-8',
   'X-Frame-Options': 'sameorigin'   // 只允许同源域名
  })
  res.end('hello 我是cp3！')
}).listen(8081)

console.log('服务已开启，请打开http://127.0.0.1:8081')

使用node index.js开启服务

然后新建一个页面a.html, 嵌入该页面

<div>
  <iframe src="http://127.0.0.1:8081" frameborder="0"></iframe>
</div>

再用 http-server开启一个服务，然后浏览器打开http://127.0.0.1:8080

可以了，生效了

设置Content-Security-Policy

Content-Security-Policy，叫做内容安全策略，简称CSP，限定网页允许加载的资源策略，一定程度上防范外部的xss等攻击。

它可以设置很多限定策略，这里我们是要限定iframe的嵌套，所以用"Content-Security-Policy": "frame-ancestors 'self'"。

const http = require('http')
http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/html; charset=UTF-8',
    "Content-Security-Policy": "frame-ancestors 'self'"
  })
  res.end('hello 我是cp3！')
}).listen(8081)

console.log('服务已开启，请打开http://127.0.0.1:8081')

生效了，效果如下：

通过窗口判断

根据当前的页面的顶级窗口window.top和自身窗口window.self是否相等

如果不相等，则是因为嵌入了iframe，因为iframe的自身窗口和顶级的窗口是不相等的。

  if (window.top != window.self) {
    window.top.location = window.self.location; // 替换顶级窗口的地址
  }

总结

以上就是禁止网站被iframe嵌套的几种方式

添加X-Frame-Options响应头`
设置Content-Security-Policy
通过窗口判断

感谢大家的阅读。