前端安全 #3

当我们在谈论 ” 前端安全问题 “ 的时候，我们在说什么？简单来说，所有发生在浏览器、单页面应用、Web页面当中的安全问题则算是“前端安全问题”。特别是现在前端网页从以前的浏览式，博客式的web页面，进化到现在的webApp, 富交互web应用。前端安全问题显得愈加重要。

常见前端安全问题

XSS

跨站脚本攻击 （Cross-site scripting) 是Web应用程序中最常见的漏洞之一，是代码注入的一种。恶意攻击者往Web页面里插入恶意Script代码

XSS按照恶意输入的脚本是否在应用中存储，可被分为两种

1. ”存储型XSS" ：持久化，代码是存储在服务器中的，如在个人信息或发表文章等地方，加入代码，如果没有过滤或过滤不严，那么这些代码将储存到服务器中，用户访问该页面的时候触发代码执行。这种XSS比较危险，容易造成蠕虫，盗窃cookie（虽然还有种DOM型XSS，但是也还是包括在存储型XSS内）。
2. “反射型XSS” ： 非持久化，需要欺骗用户自己去点击链接才能触发XSS代码（服务器中没有这样的页面和内容），一般容易出现在搜索页面。

如何攻击：

如何防御：

防御XSS的最佳的做法是对数据进行严格的输出编码，使得攻击者提供的数据不在被浏览器认为是脚本而被物质性。最普遍的做法是转义输入输出的内容，对于引号，尖括号，斜杠进行转义。

而对于显示富文本来说，不能通过上面的办法来转义所有字符，因为这样会把需要的格式也过滤掉，这种情况通常采用白名单过滤（如不过滤 h1 标签）的办法，当然也可以通过黑名单过滤，但是考虑到需要过滤的标签和标签属性实在太多。更加推荐使用白名单的方法。例如 jsxss

CSP

内容安全策略（CSP)(Content-Security-Policy)是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。

• 只允许加载本站资源

  Content-Security-Policy: default-src 'self'

• 只允许加载 HTTPS 协议图片

  Content-Security-Policy: img-src http://*

• 允许加载任何来源iframe

  Content-Security-Policy: child-src 'none'

CSRF （XSRF）

跨站请求伪造 （ Cross-site request forgery）,也被称为one-clik attack。是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

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

如何防御

1. get 请求 不对数据进行修改
2. 不让第三方网站访问到用户 Cookie
3. 阻止第三方网站请求接口
4. 请求时附带验证信息，比如验证码或者 token

1. SameSite

可以对Cookie设置 SameSite 属性，该属性设置 Cookie 不随着跨域请求发送，该属性可以很大程序减少CSRF 的攻击，但是目前存在兼容性问题

2. 验证 Referer

3. Token