原文：https://beenle-xiaojie.github.io/2019/01/07/ClickJacking/
引言 当我们的页面嵌入到一个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. 相关知识点 防盗链攻击