web安全之 — XSS攻击

什么是XSS攻击

XSS, 即为（Cross Site Scripting）, 中文名为跨站脚本, 是发生在目标客户的浏览器层面上的，当渲染DOM树的过程成发生了不在预期内执行的JS代码时，就发生了XSS攻击。

跨站脚本的重点不在‘跨站’上，而在于‘脚本’上。大多数XSS攻击的主要方式是嵌入一段远程或者者第三方域上的JS代码。实际上是在目标网站的作用域下执行了这段js代码。

为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。

XSS的攻击方式

反射型 XSS

反射型XSS，也叫非持久型XSS，是指发生请求时，XSS代码出现在请求URL中，作为参数提交到服务器，服务器解析并响应。响应结果中包含XSS代码，最后浏览器解析并执行。

从概念上可以看出，反射型XSS代码是首先出现在URL中的，而后需要服务端解析，最后需要浏览器解析之后XSS代码才能够攻击。

我们举一个小栗子：
使用express起一个web服务器，而后设置一下请求接口。通过ajax的GET请求将参数发往服务器，服务器解析成json后响应。将返回的数据直接解析后显示到页面上，没有对返回的数据进行解码和过滤等操作。

html代码

<textarea name="txt" id="txt" cols="80" rows="10"><button type="button" id="test">测试</button>

js代码

var test = document.querySelector('#test')test.addEventListener('click', function () {  var url = `/test?test=${txt.value}`   // 1. 发送一个GET请求  var xhr = new XMLHttpRequest()  xhr.onreadystatechange = function () {    if (xhr.readyState === 4) {      if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {        // 3. 用户端解析JSON，并执行        var str = JSON.parse(xhr.responseText).test        var node = `${str}`        document.body.insertAdjacentHTML('beforeend', node)      } else {        console.log('error', xhr.responseText)      }    }  }  xhr.open('GET', url, true)  xhr.send(null)}, false)

express代码

var express = require('express');var router = express.Router();router.get('/test', function (req, res, next) { // 2. 服务端解析成JSON后响应  res.json({    test: req.query.test  })})

现在我们通过给textarea增加一段有攻击目的的img标签

<img src="null" onerror='alert(document.cookie)' />

现在，我们点击<测试>按钮，一个XSS攻击就发生了。下面图片中是获取了本地的部分cookie信息

xss

实际上，我们只是模拟攻击，通过alert获取到了个人的cookie信息。但是假如是黑客的话，他们会注入一段第三方的js代码，而后将获取到的cookie信息存到他们的服务器上。这样的话黑客们就有机会拿到我们的身份认证做少量违法的事情了。

以上，存在的少量问题，主要在于没有对客户输入的信息进行过滤，同时没有剔除掉DOM节点中存在的少量有危害的事件和少量有危害的DOM节点。

存储型 XSS

存储型XSS，也叫持久型XSS，主要是将XSS代码发送到服务器（不论是数据库、内存还是文件系统等。），而后在下次请求页面的时候就不用带上XSS代码了。

最典型的就是留言板XSS。客户提交了一条包含XSS代码的留言到数据库。当目标客户查询留言时，那些留言的内容会从服务器解析之后加载出来。浏览器发现有XSS代码，就当做正常的HTML和JS解析执行。XSS攻击就发生了。

DOM XSS

DOM XSS攻击不同于反射型XSS和存储型XSS，DOM XSS代码不需要服务器端的解析响应的直接参加，而是通过浏览器端的DOM解析。这完全是用户端的事情。

DOM XSS代码的攻击发生的可能在于我们编写JS代码造成的。我们知道eval语句有一个作用是将一段字符串转换为真正的JS语句，因而在JS中使用eval是很危险的事情，容易造成XSS攻击，应避免使用eval语句。

XSS危害

• 通过document.cookie盗取cookie
• 使用js或者css破坏页面正常的结构与样式
• 流量劫持（通过访问某段具备window.location.href定位到其余页面）
• Dos攻击：利用正当的用户端请求来占用过多的服务器资源，从而使合法客户无法得到服务器响应。
• 利用iframe、frame、XMLHttpRequest或者上述Flash等方式，以（被攻击）客户的身份执行少量管理动作，或者执行少量一般的如发微博、加好友、发私信等操作。
• 利用可被攻击的域受到其余域信任的特点，以受信任来源的身份请求少量平常不允许的操作，如进行不当的投票活动。

XSS防御

从以上的反射型和DOM XSS攻击可以看出，我们不能原样的将客户输入的数据直接输出到页面，或者者存到服务器，需要对数据进行少量解决。“永远不要相信誉户输入！”，这句话是真理。

首先，对于少量能明确参数类型的，必需使用类型转换
比方说intval,doubleval等转换。再者，假如有固定值的（比方只有BJ，SH，TJ等固定字符串值的），应该要判断客户提交的值能否在这些固定值内。

PHP直接输出 html 的，可以采用以下的方法进行过滤
1.htmlspecialchars函数
2.htmlentities函数
3.HTMLPurifier.auto.php插件
4.remove_xss函数

function remove_xss($val) {   // remove all non-printable characters. CR(0a) and LF(0b) and TAB(9) are allowed   // this prevents some character re-spacing such as <java\0script>   // note that you have to handle splits with \n, \r, and \t later since they *are* allowed in some inputs   $val = preg_replace('/([\x00-\x08,\x0b-\x0c,\x0e-\x19])/', '', $val);    // straight replacements, the user should never need these since they're normal characters   // this prevents like <IMG SRC=@avascript:alert('XSS')>   $search = 'abcdefghijklmnopqrstuvwxyz';   $search .= 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';   $search .= '1234567890!@#$%^&*()';   $search .= '~`";:?+/={}[]-_|\'\\';   for ($i = 0; $i < strlen($search); $i++) {      // ;? matches the ;, which is optional      // 0{0,7} matches any padded zeros, which are optional and go up to 8 chars       // @ @ search for the hex values      $val = preg_replace('/(&#[xX]0{0,8}'.dechex(ord($search[$i])).';?)/i', $search[$i], $val); // with a ;      // @ @ 0{0,7} matches '0' zero to seven times      $val = preg_replace('/(&#0{0,8}'.ord($search[$i]).';?)/', $search[$i], $val); // with a ;   }    // now the only remaining whitespace attacks are \t, \n, and \r   $ra1 = array('javascript', 'vbscript', 'expression', 'applet', 'meta', 'xml', 'blink', 'link', 'style', 'script', 'embed', 'object', 'iframe', 'frame', 'frameset', 'ilayer', 'layer', 'bgsound', 'title', 'base');   $ra2 = array('onabort', 'onactivate', 'onafterprint', 'onafterupdate', 'onbeforeactivate', 'onbeforecopy', 'onbeforecut', 'onbeforedeactivate', 'onbeforeeditfocus', 'onbeforepaste', 'onbeforeprint', 'onbeforeunload', 'onbeforeupdate', 'onblur', 'onbounce', 'oncellchange', 'onchange', 'onclick', 'oncontextmenu', 'oncontrolselect', 'oncopy', 'oncut', 'ondataavailable', 'ondatasetchanged', 'ondatasetcomplete', 'ondblclick', 'ondeactivate', 'ondrag', 'ondragend', 'ondragenter', 'ondragleave', 'ondragover', 'ondragstart', 'ondrop', 'onerror', 'onerrorupdate', 'onfilterchange', 'onfinish', 'onfocus', 'onfocusin', 'onfocusout', 'onhelp', 'onkeydown', 'onkeypress', 'onkeyup', 'onlayoutcomplete', 'onload', 'onlosecapture', 'onmousedown', 'onmouseenter', 'onmouseleave', 'onmousemove', 'onmouseout', 'onmouseover', 'onmouseup', 'onmousewheel', 'onmove', 'onmoveend', 'onmovestart', 'onpaste', 'onpropertychange', 'onreadystatechange', 'onreset', 'onresize', 'onresizeend', 'onresizestart', 'onrowenter', 'onrowexit', 'onrowsdelete', 'onrowsinserted', 'onscroll', 'onselect', 'onselectionchange', 'onselectstart', 'onstart', 'onstop', 'onsubmit', 'onunload');   $ra = array_merge($ra1, $ra2);    $found = true; // keep replacing as long as the previous round replaced something   while ($found == true) {      $val_before = $val;      for ($i = 0; $i < sizeof($ra); $i++) {         $pattern = '/';         for ($j = 0; $j < strlen($ra[$i]); $j++) {            if ($j > 0) {               $pattern .= '(';               $pattern .= '(&#[xX]0{0,8}([9ab]);)';               $pattern .= '|';               $pattern .= '|(&#0{0,8}([9|10|13]);)';               $pattern .= ')*';            }            $pattern .= $ra[$i][$j];         }         $pattern .= '/i';         $replacement = substr($ra[$i], 0, 2).'<x>'.substr($ra[$i], 2); // add in <> to nerf the tag         $val = preg_replace($pattern, $replacement, $val); // filter out the hex tags         if ($val_before == $val) {            // no replacements were made, so exit the loop            $found = false;         }      }   }   return $val;}

PHP输出到JS代码中，或者者开发Json API的，则需要前台在JS中进行过滤
1.使用下面的parse函数，对输入的数据进行解决，返回解决之后的数据
2.对输入的数据（如DOM节点）进行解码（使用第三方库 he.js）
3.过滤掉少量元素有危害的元素节点与属性节点。如script标签，onerror事件等。（使用第三方库HTMLParser.js）

function parse (str) {      // str如果为某个DOM字符串      // 1. result为解决之后的DOM节点      let result = ''      // 2. 解码      let decode = he.unescape(str, {          strict: true      })      HTMLParser(decode, {          start (tag, attrs, unary) {              // 3. 过滤常见危险的标签              if (tag === 'script' || tag === 'img' || tag === 'link' || tag === 'style' || tag === 'iframe' || tag === 'frame') return              result += `<${tag}`              for (let i = 0; i < attrs.length; i++) {                  let name = (attrs[i].name).toLowerCase()                  let value = attrs[i].escaped                  // 3. 过滤掉危险的style属性和js事件                  if (name === 'style' || name === 'href' || name === 'src' || ~name.indexOf('on')) continue                  result += ` ${name}=${value}`              }              result += `${unary ? ' /' : ''} >`          },          chars (text) {              result += text          },          comment (text) {              result += `<!-- ${text} -->`          },          end (tag) {              result += `</${tag}>`          }      })      return result  }

其它的通用的补充性防御手段
1.在输出html时，加上Content Security Policy的Http Header
作用：可以防止页面被XSS攻击时，嵌入第三方的脚本文件等
缺陷：IE或者低版本的浏览器可能不支持

2.在设置Cookie时，加上HttpOnly参数
作用：可以防止页面被XSS攻击时，Cookie信息被盗取，可兼容至IE6
缺陷：网站本身的JS代码也无法操作Cookie，而且作用有限，只能保证Cookie的安全

3.在开发API时，检验请求的Referer参数
作用：可以在肯定程度上防止CSRF攻击
缺陷：IE或者低版本的浏览器中，Referer参数可以被伪造