WEB前端安全自查和加固( 二 ) _WEB前端

文章插图
checklist
下面演示一个HTTP only的例子，即使XSS攻击成功，也无法盗走token：

文章插图

避免框架中的危险特性现代前端开发中使用了一般基于常用的框架开发，框架提供了很多安全特性在输入内容到DOM避免了XSS注入，但是如果不当使用，也会有一些风险。框架为了提供更大的灵活性往往允许原生的html内容被添加到DOM中并提供了对应API，但基本上也会在文档中说明。
Vue的v-html指令。Vue的明确提示使用该指令的前提是信任输入内容，但是大量项目使用了此指令，甚至从URL上获取的部分内容。下面图片中的使用方式在项目中很常见，但是如果使用xss payload很容易像上面演示的那样被xss注入攻击。

文章插图

v-html brings security issue/ v-html属性会引发安全问题
dangerouslySetInnerHTML 。React中提供了类似的机制，不过在API的名称上非常醒目，原理上和Vue类似，不再赘述。
另外一种不当使用框架的例子是，读取原生 DOM 并添加内容的行为，这种行为不仅对项目架构造成破坏，带来维护性的困难，而且会存在XSS注入的风险。
启用CSP浏览器安全策略在银行和金融类项目，对安全要求非常重视。大家都知道的一个例子是银行项目都实现了自己的键盘输入控件，目的是防止操作系统的键盘Hook，这个超出前端开发需要考虑的内容。另外一个方法是启用CSP浏览器内容安全策略，对加载到页面上的内容进一步限制，并且CSP还提供了异常报告的机制。
Mozilla的CSP定义“内容安全策略 (CSP) 是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本 (XSS) 和数据注入攻击等”
通俗的来说，CSP就是通过HTTP头部 Content-Security-Policy或者HTML meta标签定义一系列白名单规则，限制页面上脚本的执行和资源的加载来源，例如不允许执行内联代码（<script>块内容，内联事件，内联样式），禁止执行eval() , newFunction() , setTimeout([string], ...) 和setInterval([string], ...) ，达到进一步限制页面脚本的目的。例如：

Content-Security-Policy：default-src 'self'; img-src https://*; child-src 'none';<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

CSP 策略包括多个指令和指令值组成：

文章插图
csp指令

文章插图
CSP 策略
CSP 策略中有一个特别的指令report-uri可以配置页面上违规后的报告，一旦浏览器检测到违规的资源加载，浏览器会发送一个JSON数据包到指定服务器。
应对CSRF攻击CSRF攻击者在用户已经登陆目标网站后，诱导用户访问一个攻击页面，利用用户已经获取的权限，发起伪造的请求。
举个例子:
假设GitHub提供了一个给仓库加星的接口，htttps://github.com/{repositoryName}/star 而且这个接口使用了GET方法，当然GitHub不会这样做。
这样攻击者就可以在GitHub上Readme文件中中增加一张图片：
<img src=https://www.isolves.com/it/cxkf/bk/2020-09-16/"htttps://github.com/{repositoryName}/star" />当用户浏览到这个仓库的时候就会给该仓库增加一个星。
因此业界通常的做法是避免使用GET操作对数据资源的修改，使用POST时增加一个一次性的token 。
如果Spring boot中使用Spring security，会有默认的 CsrfFilter，只需要注册CsrfFilter即可启用CSRF机制。客户端对相同的Restful资源发出POST请求之前需要首先从GET方法得到一个一次性的token，否则会得到一个403错误。
其他实际项目中我们还有其他的一些安全措施：
例如加密代码中的密码等敏感信息，加密本身对前端来说意义不大，但是可以增加攻击者反向分析代码的难度，屏蔽代码中可以直接搜索到的关键字，例如Login、Password等字符串。
另外也要防止程序报错后意外暴露一些信息给用户，面对各种各样的异常，用户不可能主动也没有能力报告错误，我们可以通过使用sentry.io之类的一些工具收集控制台报错信息。
最后这个世界上没有绝对的安全，即使CSP这类极其严格的策略都有可能被绕过，前端开发中安全也需要考虑成本，应该选用性价比高的安全策略。安全也不是独立的，应该和服务器、甚至操作系统层面联合考虑，例如后端提供的资源应该是通过ID不可枚举的，上传文件的时候也应该嗅探内容和MIME信息决定文件类型。