如何防止网站套用iframe

相信很多小伙伴都遇到过这种情况。用iframe嵌套别人的网站,结果出现这个错误

x-frame.pngx-frame.png

sameorigin.pngsameorigin.png

nginx规则

add_header X-Frame-Options SAMEORIGIN;
add_header X-Frame-Options ALLOW-FROM https://opencss.cn/;
#允许单个域名
add_header X-Frame-Options "ALLOW-FROM http://lookcss.com/,https://opencss.cn/";
#允许多个域名

The X-Frame-Options

The X-Frame-Options HTTP 响应头是用来给浏览器 指示允许一个页面 可否在 <frame><iframe><embed> 或者<object> 中展现的标记。站点可以通过确保网站没有被嵌入到别人的站点里面,从而避免 clickjacking 攻击。
The added security is only provided if the user accessing the document is using a browser supporting X-Frame-Options. Content-Security-Policy HTTP 头中的 frame-ancestors 指令会替代这个非标准的 header。CSP 的 frame-ancestors 会在 Gecko 4.0 中支持,但是并不会被所有浏览器支持。然而 X-Frame-Options 是个已广泛支持的非官方标准,可以和 CSP 结合使用。
网上有很多同学说只需要设置meta就能实现。我试了一下结果只设置meta是无法满足的
设置 meta 标签是无效的!例如 没有任何效果。不要这样用!只有当像下面示例那样设置 HTTP 头 X-Frame-Options 才会生效。