2.设置按钮button的top值
注意： 这里不要傻傻的用工具去测像素，因为屏幕分辨率不同，你测的像素也会不同;很多时候，标签若不是采用绝对定位便很难获取它距离顶部的距离。
所以这里用个很骚的操作：
按下F12,滑动滚动条至按钮的上边框与浏览器边框大致重合，在控制台输入这个函数document.documentElement.scrollTop，这个函数的大致意思就是获取你的滚动条滚动了多长，然后就得到大致的距离了——这里是345px：
然后top值这里就可以写345px了：
保存看结果，基本在一条平行线了：
3.设置按钮button的width和height值
这里有两种方法，都是用F12来完成。第二种方法可以做到和i f rame嵌套页面的属性值一模一样，就是外观等等，但是有的可能找不到i f rame嵌套页面的按钮的一些属性值；第一种就是直接F12选取元素移到按钮上查看width和height值。这种是没有限制的，所以我基本都用这种。
第一种方法：
因为这里给挡住了，不太好看i f rame嵌套页面的按钮的大小，那么这里可以直接访问该页面进行测量。可以看到width为52.5166px，height为20.8px：
这里按钮的大小就是一模一样了
可是其中的字体过大变成两行，就不容易成功了，那么就给button加上style属性：<button style='font-size:7px'>点击脱衣</button>。然后字体如下偏小，那么也可以慢慢调大按钮大小，再调大字体等等来达到最完美的状态：
第二种方法：
以火狐浏览器为例，首先按下F12，然后选中按钮，在右下角便可以看到按钮的样式了，选择一些决定按钮形状的css属性即可。
如我这里选择了：display: block;、border-radius:2em;
如何确定按钮大小呢？看到图片中的第二步，在选中标签的时候，上面提供了标签的大小(上面的黑框框)，也就是：width: 68.8px;、height: 25.6px;
标签内的字体大小需要根据具体字数来决定，我这里三个字，也就相应的设置为：font-size: 12px;
颜色边框什么的就随便设置一下，这里我就直接复制的cnblog按钮的颜色属性：background-color: #f2fddb;、border: 1px solid #aecd3d;
4.设置按钮button的left值
这里要经常利用到QQ的截图，因为上面有长度和宽度px的标识。这里最左边的页面到dvwa的Login按钮的左边是1171px：
那我们先写left: 1171px;，看结果，有点偏差：
那么这里只能自己慢慢调整了，最后调出来left: 933px;是长这样，差不多覆盖了：
到此便制作成功了。
点击劫持(ClickJacking)漏洞与其他漏洞的结合使用
那么这里点击劫持(ClickJacking)漏洞还可以来进行骗取别人来关注订阅等等骚操作，这里就贴几张截图吧：
当然点击劫持(ClickJacking)漏洞的危害可大可小，并不仅仅是关注订阅之类的东西，但是原理类似。点击劫持(ClickJacking)漏洞如果结合其他漏洞进行攻击，将突破某些安全措施，实现更大范围的攻击。
1.点击劫持(ClickJacking)漏洞结合 CSRF 漏洞
CSRF (Cross-Site Request Forgery)全称是叫做跨站请求伪造漏洞，目前广泛使用的CSRF漏洞防御技术是 token 识别技术。token这种方式是在表单页面生成一个随机数，这个随机数一定要后端生成，并且对这个随机数进行存储。客户端令牌token通常作为一种身份标识，由服务器端生成的一串字符串，当第一次登录后，服务器生成一个token返回给客户端，以后客户端只需带上token来请求数据即可，无需再次带上用户名和密码。如果来自浏览器请求中的token值与服务器发送给用户的token不匹配，或者请求中token不存在，则拒绝该请求，使用token验证可以有效防止CSRF攻击，但增加了后端数据处理的工作量。对于网站开发人员，最方便实用的方法是将 token 存储在页面隐藏的表单中，最终跟随信息共同提交到服务器端。服务器检查该参数，判断用户身份的真实性。因此如果网站用的是token这种方式来防御CSRF攻击的话，那么攻击者成功实施CSRF攻击的关键因素就是正确获取token的值了。攻击者需要将载入目标网页 i f rame 中的token自动添加到 src 属性后面。这里使用 GET方法的表单便可以自动完成上面的步骤，实现攻击。
如果已经实现了CSRF的漏洞，可是如果要进行攻击的话可能要发一串链接，有可能别人不点击从而导致没有攻击成功。那么我们可以拓展攻击面，结合点击劫持（Clickjacking）漏洞来诱骗别人点击。可是这样还是需要点击链接和按钮等，还是会担心别人不会点击的话，如果想要提高成功率，可以先拿到一台对方信任的服务器，把点击劫持页面创建在该服务器里，再发给对方，以此提高成功率。这里的意义在于拓展攻击面。
2.点击劫持(ClickJacking)漏洞结合 XSS 漏洞
点击劫持漏洞 和反射型XSS漏洞结合起来，可以转变为存储型XSS漏洞。反射型 XSS 漏洞最重要的特征是很难利用。那么攻击者通过点击劫持(ClickJacking)漏洞，反射型 XSS 可以转化为存储型 XSS 漏洞，只要用户点击触发此漏洞，就可以在用户浏览器上执行任意的j avas cript代码，因此具有极大的危害性。这里来举个例子：
其中目标站点存在反射型XSS，还是Self-XSS。页面为下面的那张图片，是一个很大的文本框，输入<s cript>a lert(document.cookie)</s cript>就弹出了cookie，这里出现的是Self-XSS：
目标站点还存在点击劫持(ClickJacking)漏洞。我们查看响应，发现目标站点并未设置X-f rame-Options头，那么就会存在点击劫持(ClickJacking)漏洞：
这时就可以编写PoC来进行XSS Jacking以此来获取用户的cookie：
<html> <head> </head> <body> Enter your email below to register: </br> <textarea autofocus style="width:220px; height:35px;"></textarea> </br> Repeat your email: </br> <i f rame style="width:230px; height:50px;" f rameBorder="0" src="index.html"></i f rame> </br> <input type="submit"></input> <s cript> document.addEventListener('copy', function(e){ console.log(e); // e.clipboardData.setData('text/plain', '\x3cs cript\x3ea lert(document.cookie)\x3c/s cript\x3e'); e.preventDefault(); }); </s cript> </body> </html>
其中网页的界面就是下面这张图所示：
在这个网页中只要使用了复制键的话，那么复制的内容就都会是<s cript>a lert(document.cookie)</s cript>，再次输入邮箱的文本框其实是利用i f rame标签打开的index.html网页，存在XSS漏洞。所以当用户输入邮箱后，为了方便就会复制上面填写好的邮箱，然后粘贴到下面确认邮箱的框当中，那么这样就是将XSS的代码插入到了index.html中自己X了自己了。
所以点击劫持(ClickJacking)漏洞结合XSS 漏洞这个组合拳利用需要结合一下钓鱼社工来实现窃取受害者的cookie等敏感信息。
点击劫持(ClickJacking)漏洞防御方案
这里可以考虑从服务器端和客户端两个方面来防御。
服务器端防御
1.通过正确设置X-f rame-Options header，不允许在网站中嵌入其它站点的i f rame。
2.使用f rameBusting代码。不过有一个条件，就是受害者的浏览器没有禁用 j avas cript 脚本。如果受害者的浏览器禁用了 j avas cript 脚本，那么将无法正常运行。其中如图来禁止i f rame的嵌套：
3.使用认证码认证用户。
客户端防御
1.升级浏览器
2.对于Firefox的用户，使用Nos cript扩展能够在一定程度上来检测和阻止。
参考：
