前端常见的安全问题及防御

1.跨站脚本攻击XSS（Cross-Site Scripting）

（1）简介

跨站脚本攻击，Cross Site Script（简称 XSS）。指黑客通过“HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，控制用户浏览器的一种攻击。因为最初的攻击案例时跨域的，所以称为“跨站脚本”。因为浏览器无法区分脚本是被恶意注入的还是正常的内容，它都会执行，况且 HTML 非常灵活，可以在任何时候对它进行修改。它分为三种类型：

反射型XSS：诱导用户点击URL，当浏览器向服务器发送请求时，服务器将带有恶意脚本的网页返回，浏览器执行恶意脚本。

基于DOM型XSS：在URL中写入攻击脚本，然后诱导用户点击URL。如果 URL 被解析，攻击脚本将被执行，这种攻击不需要经过服务器。

存储型XSS：又叫持久型 XSS，黑客将恶意 JavaScript 脚本长期保存在服务端数据库中，用户一旦访问相关页面数据，恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。

（2）防御方法

HttpOnly：浏览器将禁止页面的 Javascript 访问带有 HttpOnly 属性的 Cookie，主要是解决 Cookie 劫持攻击。

输入检查：限制用户的输入格式和规范，比如限制只能为数字和字母的组合，从而让一些基于特殊字符的攻击失效。

输出检查：除了富文本的输出外手机您请求的网址url无法获取，在变量输出到 HTML 页面时，使用编码或转义的方式来防御。当编码影响业务时，使用白名单规则进行检测和过滤。

开启csp：开启白名单，可以防止加载运行白名单外的资源。使用内容安全策略是一种有效的 XSS 攻击预防形式。它需要一个 HTTP 标志来通知浏览器有关可以信任的来源，并作为 iFrame 包含在 Web 应用程序中。在 HTTP 标头中启用 CSP 是一种在很大程度上防止 XSS 攻击的有效方法。

2.跨站点请求伪造（CSRF）

（1）简介

跨站点请求伪造，Cross site Request Forgery。指利用用户的身份操作用户账户的一种攻击方式，如果黑客在网站上放置了指向另一个网站的外部链接，例如 ，默认情况下，如果用户已登录该网站，浏览器将使用 xxx.com 的 cookie 访问该网站。而如果网站没有防御CSRF攻击，服务器就会认为是用户自己调用了这个接口并进行了相关操作，从而导致账号被劫持。

（2）防御方法

验证码：CSRF 攻击的过程手机您请求的网址url无法获取，往往是在用户不知情的情况下构造的网络请求，而验证码强制用户必须与应用进行交互，才能完成最终请求。

验证 Token：浏览器请求服务器时，服务器返回一个 Token，每次请求都需要带上 Token和 cookie 才算合法请求

验证 Referer：通过验证请求头的 Referer来验证源站，但是请求头容易伪造

验证同源网站： 为cookie设置SameSite，这样cookie就不会随着跨域请求一起发送，但是浏览器兼容性不同

3.点击劫持

（1）简介

点击劫持，是一种视觉上的欺骗。攻击者使用一个透明的、不可见的 iframe，覆盖在一个网页上，然后诱使用户在该网页上进行操作，此时用户将在不知情的情况下点击透明的 iframe 页面。

（2）防御方法

使用HTTP头——X-Frame-Options。X-Frame-Options是为了解决点击劫持而生的，它有三个可选的值：

DENY：浏览器会拒绝当前页面加载任何frame页面；

SAMEORIGIN：frame页面的地址只能为同源域名下的页面；

ALLOW-FROM origin：允许frame加载的页面地址。

4.第三方依赖安全隐患

（1）简介

对于前端开发来说，项目中可能会引入大部分 NPM 仓库的包，而在 NPM 发布作品，NPM 不会做任何质量检查，只要包名没有重复，就可以发布，因此一旦这些来自第三方的代码有安全漏洞（例如曾经的 lodash 原型污染），那么对应用整体的安全性依然会造成严峻的挑战。

（2）防御

尽量减少第三方依赖，选用相对成熟的依赖包，或尽量自己开发相应的功能，或使用公司自己的 npm 仓库；

定期检测依赖包的风险；

在项目中使用：npm audit,这个命令可以递归的分析当前项目的依赖树，将依赖包的信息发送给官方 registry，根据维护的漏洞数据库，生成并返回一个包含包名称、漏洞严重性（cvss）、简介、路径等信息的报告。然后根据报告，具体信息来做漏洞的风险评估和修复工作。