dom型xss和反射型xss的区别，从零基础到精通，收藏这篇就够了！

本文链接：https://blog.csdn.net/Libra1313/article/details/147423128

XSS，菜鸟止步？反射型和DOM型XSS的恩怨情仇

开场白：XSS？入门简单，精通难！

XSS，听起来是不是觉得很简单？反射型、存储型、DOM型，分分钟搞定？ too naive! 刚入行那会儿，我也是这么想的。结果呢？DOM型XSS直接把我干懵逼了。反射型和DOM型，傻傻分不清楚，实战中更是难得一见。今天，咱就来聊聊XSS，重点是，彻底搞懂DOM型XSS！保证看完，你也能对XSS有个更深的理解。

灵魂画师？DOM型 vs 反射型，一图胜千言？

别扯什么高大上的理论，先看图！两张图，简单粗暴，直接对比反射型和DOM型XSS的异同。

看懂了吗？没看懂？没关系，继续往下看，咱慢慢剖析。

反射型XSS：服务端搅屎棍？

反射型XSS，XSS界的“老大哥”，也是最常见的类型。简单来说，就是你提交的数据，服务器处理后，又原封不动地返回给你，让你自己执行。

来，上pikachu靶场，搞个简单的演示。

输入框里输入啥，页面就显示啥，这不就是典型的反射吗？赶紧F12，看看网页源码。

看到了吧？输入的数据直接嵌入到HTML代码里了。这还不搞事情？直接插入XSS代码：<script>alert('XSS')</script>，弹窗！

这波操作，服务端代码是这么玩的：

<?php
$html='';
if(isset($_GET['submit'])){
    if(empty($_GET['message'])){
        $html.="<p class='notice'>输入'kobe'试试-_-</p>";
    }else{
        if($_GET['message']=='kobe'){
            $html.="<p class='notice'>愿你和{$_GET['message']}一样，永远年轻，永远热血沸腾！</p><img src='{$PIKA_ROOT_DIR}assets/images/nbaplayer/kobe.png' />";
        }else{
            $html.="<p class='notice'>who is {$_GET['message']},i don't care!</p>";
        }
    }
}
?>
<div id="xssr_main">
    <p class="xssr_title">Which NBA player do you like?</p>
    <form method="get">
        <input class="xssr_in" type="text" maxlength="20" name="message" />
        <input class="xssr_submit" type="submit" name="submit" value="submit" />
    </form>
    <?php echo $html;?>
</div>

简单来说，就是通过GET请求接收message参数，然后拼接到HTML代码里，最终输出到前端页面。服务端逻辑直接改变了网页代码，这就是反射型XSS的本质。

DOM型XSS：前端内鬼？

DOM型XSS，这才是真正让人头疼的家伙。它不经过服务端，完全是前端JavaScript搞的鬼！

来，先看个例子。把这句话复制到有道词典翻译：This is a test about xss。

在线翻译_有道 (https://fanyi.youdao.com/)

看看这句话在HTML中的位置：

这个例子中，XSS语句只是在前端解析，没有经过后端，属于前端自身的安全漏洞。

Pikachu靶场：深入DOM的腹地

再通过pikachu靶场来深入了解一下DOM型xss

这是前端界面

这是源代码，接下来分析一下这个源码

<div id="xssd_main">
    <script>
        function domxss(){
            var str = document.getElementById("text").value;
            document.getElementById("dom").innerHTML = "<a href='"+str+"'>what do you see?</a>";
        }
    </script>

    <input id="text" name="text" type="text"  value="" />
    <input id="button" type="button" value="click me!" onclick="domxss()" />
    <div id="dom"></div>
</div>

简单分析一下这段代码：

<input id="text" name="text" type="text" value="" />：获取用户输入的值。
var str = document.getElementById("text").value;：JavaScript获取输入框的值。
document.getElementById("dom").innerHTML = "<a href='"+str+"'>what do you see?</a>";：将输入的值拼接到<a>标签的href属性中，并插入到id为dom的<div>中。
<div id="dom"></div>：显示最终结果。

当我们输入123时，源码会变成这样：