pikachu靶场第五关——XSS（跨站脚本）之反射型xss(get)（附代码审计）

概述

Cross-Site Scripting 简称为“CSS”，为避免与前端叠成样式表的缩写"CSS"冲突，故又称XSS。一般XSS可以分为如下几种常见类型：

    1.反射性XSS;
    2.存储型XSS;
    3.DOM型XSS;

XSS漏洞一直被评估为web漏洞中危害较大的漏洞，在OWASP TOP10的排名中一直属于前三的江湖地位。
XSS是一种发生在前端浏览器端的漏洞，所以其危害的对象也是前端用户。
形成XSS漏洞的主要原因是程序对输入和输出没有做合适的处理，导致“精心构造”的字符输出在前端时被浏览器当作有效代码解析执行从而产生危害。
因此在XSS漏洞的防范上，一般会采用“对输入进行过滤”和“输出进行转义”的方式进行处理:

  输入过滤：对输入进行过滤，不允许可能导致XSS攻击的字符输入;
  输出转义：根据输出点的位置对输出到前端的内容进行适当转义;

源代码如下：

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>";
        }
    }
}

很简单，先判断message是否为空，然后判断是否为kobe

xss的关键不在源代码，而在于网页。

代码如下

 <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>

<p class="xssr_title">Which NBA player do you like?</p>

<p></p>标签用于定义段落，将网页（主要是文字部分）分为若干个段落，段落和段落之间有一定的空隙。p为pararaph的缩写。

段落内容为“Which NBA player do you like?”

 <form method="get">
                    <input class="xssr_in" type="text" maxlength="20" name="message" />
                    <input class="xssr_submit" type="submit" name="submit" value="submit" />
                </form>

<form></form>：HTML表单标签

• 作用：向服务器传递数据，form元素是块级元素，不会自动换行
• 表单提交：必须设置表单元素的name属性，否则无法获取数据
• 表单需要结合表单元素一起使用
• 默认是get请求

对属性的说明：

action 属性用来指明将表单提交到哪个页面；

target属性表示提交数据时，打开窗口的方式（_self,_blank)；    

method 属性表示使用哪个方式提交数据，包括 GET 和 POST 两种方式，它们两者的区别如下：

GET：用户点击提交按钮后，提交的信息会被显示在页面的地址栏中。一般情况下，GET提交方式中不建议包含密码，因为密码被提交到地址栏，不安全。

POST：如果表单包含密码这种敏感信息，建议使用 POST方式进行提交，这样数据会传送到后台，不显示在地址栏中，相对安全。

get与post请求的区别：

    （post请求需要服务器的支持，get可以不需要）
1.get请求时参数会跟在浏览器地址栏的后面，而post请求不会（post请求会将数据存放在请求体中）
2.get请求相对于post而言，不那么安全
3.get请求传递的数据长度是有限的，而post请求基本没有限制（长度与服务器有关）
4.get请求比post请求快（大概是2倍左右）
5.get请求有缓存（会将数据存放在游览器中，即本地磁盘中），而post请求无缓存
 
安全性：post更安全
速度：get快
缓存：get有缓存在游览器上，post无缓存

最关键的代码是这一句

<input class="xssr_in" type="text" maxlength="20" name="message" />

class属性规定元素的类名（classname）。

class属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过JavaScript来改变带有指定class的HTML元素。

type="text"

输入类型是text，这是我们见的最多也是使用最多的，

比如登陆输入用户名，注册输入电话号码，电子邮件，

家庭住址等等。当然这也是Input的默认类型。

参数name：同样是表示的该文本输入框名称。

参数size：输入框的长度大小。

参数maxlength：输入框中允许输入字符的最大数。

参数value：输入框中的默认值。

特殊参数readonly：表示该框中只能显示，不能添加修改。

type=password 密码框

type=hidden 隐藏域（第三关的token）

type=button 按键

type=checkbox 多选框

type=radio 单选框

type=file 文件输入框

type=image 图片输入框

这里输入长度限制为二十，主要就是为了防止xss或sql漏洞

毕竟kobe"><script>alert("xss")</script>，怎么看都超过20了，不过不用担心，前端的最大特点就是用户可以更改html，不过是一次性的罢了

成功了，但是为什么呢？

name="message"

当我们输入kobe的时候，则name=“kobe”

那当我们输入kobe"><script>alert("xss")</script>的时候，name=“kobe"><script>alert("xss")</script>”

这会导致什么呢，我们来看

<input class="xssr_in" type="text" maxlength="20" name="message" />

既然name="message"变成了name=“kobe"><script>alert("xss")</script>”，那么，显而易见的，

<input class="xssr_in" type="text" maxlength="20" name="message" />

就会变成

<input class="xssr_in" type="text" maxlength="20" name=“kobe"><script>alert("xss")</script>” />

大家有没有发现，语句在第一个“>”之后就已经完整了

<input class="xssr_in" type="text" maxlength="20" name=“kobe">

这和直接输入kobe的效果是一样的，但是多出来的那一部分代码呢？

它们很成功的逃逸出了<input>的包围，混进了这个html的羊群之中，执行着代码

<script>alert("xss")</script>

有人问，后面不是还有一点吗？

所剩的无非是这个：

" />

但是它表达了什么，计算机也不知道。