XSS 和 CSRF 比较

参考文章： developer.mozilla.org/zh-CN/ 《前端面试宝典》

XSS

跨站脚本攻击（Cross Site Scripting）, 简写和css名称冲突， 改成xss。 攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。当被攻击者登陆网站时就会自动运行这些恶意代码，从而，攻击者可以突破网站的访问权限，冒充受害者。

XSS 攻击可以分为3类：存储型（持久型）、反射型（非持久型）、DOM 型。

• 存储型 XSS

注入型脚本永久存储在目标服务器上。当浏览器请求数据时，脚本从服务器上传回并执行。

• 反射型 XSS

当用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。Web服务器将注入脚本，比如一个错误信息，搜索结果等 返回到用户的浏览器上。由于浏览器认为这个响应来自"可信任"的服务器，所以会执行这段脚本。

• 基于 DOM 的 XSS

通过修改原始的客户端代码，受害者浏览器的 DOM 环境改变，导致有效载荷的执行。也就是说，页面本身并没有变化，但由于DOM环境被恶意修改，有客户端代码被包含进了页面，并且意外执行。

XSS 通过修改 HTML 节点或者执行 JS 代码来攻击网站

• 修改html， 例如通过url获取参数

url输入：

http://www.domain.com?name=<script>alert(1)</script> 

dom中获取url参数：

<div>{{name}}</div> 

结果： 上述 URL 输入可能会将 HTML 改为 <div><script>alert(1)</script></div>，这样页面中就凭空多了一段可执行脚本。这种攻击类型是反射型攻击，也可以说是 DOM-based 攻击。

• 执行js代码， 例如发布的一片文章中包含一段代码

文章中包含<script>alert(1)</script>， 那么可能浏览文章的用户都会被攻击到。这种攻击类型是存储型攻击，也可以说是 DOM-based 攻击，并且这种攻击打击面更广。

如何防御xss攻击

• 最普遍的做法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义

function escape(str) {str = str.replace(/&/g, '&')str = str.replace(/</g, '<')str = str.replace(/>/g, '>')str = str.replace(/"/g, '&quto;')str = str.replace(/'/g, '&#39;')str = str.replace(/`/g, '&#96;')str = str.replace(/\//g, '&#x2F;')return str
} 

• 对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法，当然也可以通过黑名单过滤

CSRF

跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。例如，这些非预期请求可能是通过在跳转链接后的 URL 中加入恶意参数来完成:

<img src="https://www.example.com/index.php?action=delete&id=123"> 

对于在 www.example.com 有权限的用户，这个 <img src="https://juejin.cn/) 标签会在他们根本注意不到的情况下对 www.example.com 执行这个操作，即使这个标签根本不在 www.example.com 内亦可" style="margin: auto" />

简单点说，CSRF 就是利用用户的登录态发起恶意请求。

如何防御CSRF

防范 CSRF 可以遵循以下几种规则：1. Get 请求不对数据进行修改 2. 不让第三方网站访问到用户 Cookie 3. 阻止第三方网站请求接口 4. 请求时附带验证信息，比如验证码或者 token

二者比较

XSS利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。