前言
没有绝对安全的网站，web常见的攻击也是永远绕不开的话题，今天简单聊聊XSS。
XSS攻击
XSS 全称是Cross Site Scripting（跨站脚本）, 为了与“CSS”区分开，故简称XSS。是指黑客往HTML文件中或者DOM中注入恶意脚本，从而再用户浏览页面时利用注入的恶意脚本对用户实施攻击的一种手段。
恶意脚本可以做哪些事情
- 可以窃取Cookie信息。恶意脚本可以通过“document.cookie”获取Cookie信息，然后通过XMLHttpRequest或者Fetch加上CORS功能将数据发送给恶意服务器；恶意服务器拿到用户的Cookie信息之后，就可以模拟用户登录，然后进行其他操作了。
- 可以监听用户行为，恶意脚本可以使用“addEventListener"来监听键盘事件，比如可以获取用户输入的个人信息，将其发送到恶意服务器，黑客掌握这些信息之后，又可以进行其他操作了。
- 可以通过修改DOM伪造假的登录窗口，用来欺骗用户输入用户名和密码等个人信息
- 还可以再页面内生成浮窗广告，影响用户体验。
......
XSS类型
存储型XSS攻击
- 首先黑客利用站点漏洞将一段恶意脚本代码提交到网站的数据库中；
- 然后用户向网站请求包含了恶意JS脚本的页面
- 当用户浏览该页面的时候，恶意脚本就会将用户的Cookie等信息数据上传到服务器
反射型XSS攻击
在一个反射型XSS攻击过程中，恶意JS脚本属于用户发送给网站请求中的一部分，随后网站又把恶意JS脚本返回给用户，当恶意脚本再用户页面中被执行时，黑客就可以利用该脚本做一些恶意操作。
server.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next) => {
res.render('index', {
title: 'Express',
xss: req.query.xss,
})
});
module.exports = router;index.eje
<!DOCUMENT html>
<html>
<head>
<title><%= title %> </title>
</head>
<body>
<h1><%= title %></h1>
<p>Weclome to <%= title %></p>
<div> <%= xss %> </div>
</body>
</html>在浏览器打开
http://localhost:3000/?xss=123页面正常展示
但是打开下面的链接
http://localhost:3000/?xss=<script>alert('你被 xss 攻击了')</script>页面如下
通过这个例子，可以看出用户将一段含有恶意JS脚本请求提交给Web服务器，Web服务器收到请求时，又将恶意代码发送给浏览器，这就是反射型XSS攻击。在现实生活中，黑客经常会通过Q群或者邮件等方式诱导用户去点击这些恶意链接，所以平时不要乱点链接。
与存储型XSS攻击的区别：Web服务器不会存储反射型XSS攻击的代码。
基于DOM的XSS攻击
基于DOM的XSS攻击是不牵涉到页面Web服务器的。黑客通过各种手段将恶意脚本注入到用户页面中，比如通过网络劫持（Wifi路由器劫持、本地恶意软件）在页面传输过程中修改HTML页面的内容。
备注：https只能增加攻击难度，不能防止所有场景的基于DOM的XSS攻击
阻止XSS攻击
- 服务器对输入脚本进行过滤或转码
- 前端对输入进行转码或者限制输入
- Cookie使用HttpOnly属性
- 添加验证码防止脚本冒充用户提交危险操作
- CSP
CSP有如下几个功能：
- 限制加载其他域下的资源文件，这样即使黑客插入了一个JS文件，这个文件也是无法被加载的
- 禁止向第三方域提交数据，这样用户数据也不会外泄
- 禁止执行内联脚本和未授权脚本
- 还提供上报机制，这样可以帮助我们尽快发现有哪些XSS攻击，以便尽快修复问题。
最后
没有绝对安全的系统，所以我们只能尽量做到知道原理，然后预防，提高攻击难度。
技术本身是个好东西，但是好技术要用在对的地方才能显示出它的价值
我的其他文章：
JS代码运行过程简述（一）
欢迎一起快乐的挖坑、填坑。哈哈哈
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。