点击劫持ClickJacking

2019-01-07

引言

当我们的页面嵌入到一个iframe中时，安全测试提出一个于我而言很新鲜的词汇–点击劫持,会造成安全隐患。

1. 什么是点击劫持？

点击劫持（ClickJacking）是一种视觉上的欺骗手段。大概有两种方式，一是攻击者使用一个透明的iframe，覆盖在一个网页上，然后诱使用户在该页面上进行操作，此时用户将在不知情的情况下点击透明的iframe页面；二是攻击者使用一张图片覆盖在网页，遮挡网页原有位置的含义；

简单的说，就是用户点击了一个按钮，但是触发的操作不是正常期待的事件，而是触发了别的非意愿操作…

2. 解决办法

X-Frame-Options 响应头配置避免点击劫持攻击

原理：
X-Frame-Options HTTP响应头是用来给浏览器指示允许一个页面可否在<frame>,<iframe>或者<object>中展现的标记。网站可以使用此功能，来确保自己网站的内容没有被嵌到别人的网站中去，也从而避免了点击劫持 (clickjacking) 的攻击。

X-Frame-Options有三种可配置值，（属性值不区分大小写）

1
2
3

X-Frame-Options: DENY
X-Frame-Options: SAMEORIGIN
X-Frame-Options: ALLOW-FROM

指令
如果指定DENY，从其他站点加载时，不仅尝试在框架中加载页面失败，从同一站点加载时尝试这样做将失败。另一方面，如果指定SAMEORIGIN，只要包含在框架中的站点与为页面提供服务的站点相同，仍然可以在框架中使用该页面。

DENY无论站点尝试这样做，页面都不能显示在框架中。SAMEORIGIN该页面只能显示在与页面本身相同的源框架中。ALLOW-FROM_ uri_页面只能显示在指定原点的框架中。

当前项目是部署在nginx上的，那就以nginx为例来做个配置，除此还可以配置在 Apache,IIS等。

配置过程：

#1. 在nginx下 /opt/nginx/conf.d/example.conf下写入

1
2
3

add_header X-Frame-Options "allow-from https://example.com/";
也可以直接写域名
add_header X-Frame-Options "allow-from example.com/";

#2. 踩坑

发现在chrome下会报错，报错信息如下：

1	Invalid 'X-Frame-Options' header encountered when loading 'example.com:8081/app.html': 'allow-from example.com/' is not a recognized directive. The header will be ignored.

经过排查发现是在Chrome和Safari要使用Content-Security-Policy参数

#3. 设置用Content-Security-Policy

1	add_header Content-Security-Policy "frame-ancestors example.com";

3. 参考链接

web安全之–点击劫持攻击与防御技术简介

ClickJacking漏洞的原理

4. 相关知识点

防盗链攻击