XSS和CSRF也是面试中常常被问到的东西，本期就带大家认识下这两个网络攻击

XSS

XSS(Cross Site Scripting)跨站脚本攻击

这个简称本想着取为css，但是为了防止与样式css搞混，就取为xss

跨站脚本攻击就是用脚本攻击，看下面这个🌰

这里先简单模拟下情景，前后端不分离，后端用的express框架

express是koa的鼻祖，koa比express简约，express不像koa一样，安装完后无需再去安装路由

app.js

javascript 复制代码

const express = require('express') // npm i express
const path = require('path')
const app = express()
const ejs = require('ejs'); // npm i ejs

app.set('views', path.join(__dirname, 'views')); // views的文件都会被当作模板被读到
app.engine('html', ejs.__express);
app.set('view engine', 'html'); // 让模板引擎生效

app.get('/', function (req, res) { // 定义一个跟路径
  res.render('index', {title:'express', xss: req.query.xss}) // res.render向前端输出
})

app.listen(3000, () => {
  console.log('listening on 3000');
})

index.html

xml 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= title %></title>
</head>
<body>
  <h1><%= title %></h1>
  <p>hello <%= title %></p>
  <div>
    <%- xss %>
  </div>
</body>
</html>

这个页面被后端直接输出给浏览器，输入urlhttp://localhost:3000时，拼接个参数如下

我现在把参数输入一个script标签，script里面写个alert

http://localhost:3000/?xss=<script>alert('你被攻击了')</script>

这里面的参数写什么都可以，因此我也可以写一个输入框

假设我现在用XSS攻击银行网站，XSS生效，弹出一个输入账号密码的框，你肯定会误以为真，毕竟是个银行网站，输入后殊不知被黑客拿到了你的账号密码

危害

窃取cookie信息：黑客可以在其他电脑上模拟登录状态
可以监听用户行为：可以监听用户点击键盘的行为，得到用户信息
伪造登录窗口
在你的页面生成浮窗广告

比如下面，我往脚本中写个div，模拟一个弹出框

xml 复制代码

http://localhost:3000/?xss=<script>let div = document.createElement('div');document.body.appendChild(div);div.style.width = '300px';div.style.height = '200px';div.style.border = '1px solid black';div.style.position = 'fixed';div.style.top = '300px';div.style.left = '300px';</script>

如何注入

存储型攻击：将脚本提交到数据库中

比如在评论的时候，我们可以写一个script放到评论区

反射型攻击：在url中写入参数，就是上面的例子

当然，如果数据库中给你进行了字符串转译就不会有这种问题。据说以前喜马拉雅编辑专辑的时候后端没有做这个处理，导致可以被XSS攻击

基于Dom的XSS：比如我可以用些硬件去截取响应回用户的数据，然后塞入脚本返回给用户，这个方式的成本比较高

如何防范

服务端对接收到的脚本进行转码
内容安全策略CSP

内容安全策略（CSP） - HTTP | MDN (mozilla.org)

这个方法需要在meta中写入一些配置信息

3. HttpOnly：这个字段就是设置cookie可读还是不可读，Set-Cookis中若有HttpOnly就是不可读

CSRF

CSRF(Cross Site Request Forgery)跨站请求伪造

这就是我们常说的陌生的链接不要点，有可能有病毒

黑客引诱你打开一个网址，黑客拿到你的登录状态，并通过第三方站点来操作恶意行为

如何防范

利用好Cookie的SameSite属性，设置好后第三方站点无法访问到你的Cookie
服务端验证请求来源，比如Origin字段记录了请求来源地址，这样就可以杜绝第三方站点请求源

最后

XSS是跨站脚本攻击，这个攻击可以窃取你cookie信息，事件信息，伪造窗口或者生成广告，你可以通过在服务端对接收的脚本进行转码，利用好浏览器的CSP安全策略，或者设置好HttpOnly，让cookie不可读取。CSRF是跨站请求伪造攻击，这就是黑客引诱你打开一个网址，发get或者post请求，通过第三方站点来恶意操作你的行为，你可以利用设置好Cookie的SameSite属性，让第三方站点无法访问到你的Cookie，或者在服务端验证请求的来源，比如Origin或Referer字段就记录了请求的源地址，可以执行判断杜绝掉第三方站点请求源

如果你对春招感兴趣，可以加我的个人微信：Dolphin_Fung，我和我的小伙伴们有个面试群，可以进群讨论你面试过程中遇到的问题，我们一起解决

另外有不懂之处欢迎在评论区留言，如果觉得文章对你学习有所帮助，还请"点赞+评论+收藏"一键三连，感谢支持！

浅谈【XSS & CSRF】攻击

XSS

如何防范

CSRF

如何防范

最后