闲庭信步聊前端漫谈XSS

什么是XSS？

众所周知XSS是Cross-Site Scripting（跨站脚本攻击）的简称，但是英文的缩写明明是CSS为什么叫XSS呢？———历史遗留问题，因为CSS层叠样式表(Cascading Style Sheets)已经被大家所熟知，怕有所混淆，X的发音可能是与Cross发音有那么一丢丢相似，所以改名为XSS啦

言归正传，XSS是一种代码注入攻击，通常指的是利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，恶意代码未经过滤，与网站正常的代码混在一起，浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

XSS是最普遍的Web应用安全漏洞。由于直接在用户的终端执行，恶意代码能够直接获取用户的信息如 COOKIE、SessionID 等，进而危害数据安全或者利用这些信息冒充用户向网站发起攻击者定义的请求。

根据攻击来源，XXS攻击分为存储型、反射型 和 DOM 型三种。

存储型

存储型 XSS 的攻击步骤 ：

1. 攻击者将恶意代码提交到目标网站的数据库中。

2. 用户打开目标网站时，网站服务端将恶意代码从数据库取出，拼接在 HTML中返回给浏览器。

3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码里被执行。

4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

常见的场景是攻击者在社区或论坛上写下一篇包含恶意 Javascript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 Javascript 代码。这种攻击常见于带有用户保存数据的网站功能，如论坛发帖、商品评论等。

例：当用户点击提交按钮将输入信息提交到服务端时，服务端通过 userInput 变量保存了输入内容。

测试存储型XSS攻击

// Nodejs代码
const http = require('http');
let userInput = '';
function handleReequest(req, res) {
    const method = req.method;
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
    if (method === 'POST' && req.url === '/submit') {
        let body = '';
        req.on('data', chunk => {
            body += chunk;
        });
        req.on('end', () => {
            if (body) {
                userInput = body;
            }
            res.end();
        });
    } else {
        res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
        res.write(userInput);
        res.end();
    }
}
const server = new http.Server();
server.listen(8008, '127.0.0.1');
server.on('request', handleReequest);


如下图所示：当用户通过 http://localhost:8008/${id} 访问时，服务端会返回与 id 对应的内容。如果用户输入了恶意脚本内容，则其他用户访问该内容时，恶意脚本就会在浏览器端执行：

反射型

反射型 XSS 的攻击步骤：

1. 攻击者构造出特殊的URL，其中包含恶意代码。

2. 用户打开带有恶意代码的 URL 时，网站服务端将恶意代码从 URL 中取出，拼接在 HTML 中返回给浏览器。

3. 用户浏览器接收到响应后解析执行，混在其中的恶意代码也被执行。

4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

例：一个恶意链接的地址指向了 http://127.0.0.1:8008//?test=1&request=2。

如下图所示：然后，我再启一个简单的 Node 服务处理恶意链接的请求，代码如下：

//创建一个nodejs服务器
let http =require('http');
let app = http.createServer((req,res)=>{
 // req:请求对象，包含一些查询参数、请求体，请求路径，COOKIE 请求域..
 // res :响应对象
 res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
 res.write('');
})
// 监听端口
app.listen(8008,()=>{
 console.log('the server running at http://127.0.0.1:8008');
})


当用户点击恶意链接时，页面跳转到攻击者预先准备的页面，会发现在攻击者的页面执行了 js 脚本，这样就产生了反射型 XSS 攻击。

反射型 XSS 漏洞常见于通过 URL 传递参数的功能，如网站搜索、跳转等。

由于需要用户主动打开恶意的 URL 才能生效，攻击者往往会结合多种手段诱导用户点击。POST 的内容也可以触发反射型 XSS，只不过其触发条件比较苛刻（需要构造表单提交页面，并引导用户点击），所以非常少见。

DOM型

DOM 型 XSS 的攻击步骤：

1. 攻击者构造出特殊的 URL，其中包含恶意代码。

2. 用户打开带有恶意代码的 URL。

3. 用户浏览器接收到响应后解析执行，前端 Javascript 取出 URL中的恶意代码并执行。

4. 恶意代码窃取用户数据并发送到攻击者的网站，或者冒充用户的行为，调用目标网站接口执行攻击者指定的操作。

例如：

测试DOM型XSS攻击