【前端安全】常见的安全性问题 #27
Description
一、跨站脚本攻击（Cross Site Scripting，简称XSS）
原理及危害： 指攻击者在网页中嵌入恶意脚本（如JS），当用户浏览此网页时，脚本就会在用户的浏览器上执行，从而达到攻击者的目的，比如获取用户的cookie、会话劫持等各种攻击。
攻击的基本类型： 反射型（URL参数直接注入）和存储型（存储到DB后读取时注入）
注入点： HTML节点内容（text）；HTML中DOM元素的属性，如img的onerror属性；JS代码；富文本
解决方案：
（1）输入过滤。 永远不要相信用户的输入，对用户输入的数据做一定的过滤。如输入的数据是否符合预期的格式，对电话、email等做正则校验。这样可以初步防御XSS漏洞。但是攻击者可以通过抓包工具如Charles等绕过前端输入控制，修改请求注入攻击脚本。因此，后端服务器在接收到用户输入数据时，要对数据做过滤或转义处理，然后再存储。
（2）输出编码。 服务器输出到浏览器的数据，可以进行转码或转义来防范XSS攻击。如encodeURIComponent。
（3）HttpOnly Cookie。 web应用程序在设置cookie时，将属性设为HttpOnly，以避免该网页的cookie被客户端恶意JS窃取。
（4）安全编码。 开发需尽量避免web客户端文档重写、重定向或其他敏感操作，同时要避免使用客户端数据，这些操作需尽量在服务器端使用动态页面来实现。
（5）WAF(Web Application FireWall)，web应用防火墙。 主要功能室防范诸如网页木马、XSS及CSRF等常见的web漏洞攻击。
更详细的介绍可以移步~前端安全系列（一）：如何防止XSS攻击？
二、跨站请求伪造（Cross-site Request Forgery，简称CSRF）
原理及危害： CSRF攻击过程的受害者用户登录网站A，输入个人信息，在本地保存服务器生成的cookie。然后在A网站点击由攻击者构建一条恶意链接跳转到B网站，然后B网站携带着的用户cookie信息去访问B网站，让A网站造成是用户自己访问的假象，从而来进行一系列操作，常见的就是转账。
解决方案：
（1）验证码。 应用程序和用户进行交互过程中，特别是账户交易这种核心步骤，强制用户输入验证码，才能完成最终请求。
（2）Referer Check。 当浏览器向服务器发送请求时，请求头中会带上Referer信息告诉服务器是从哪个页面链接过来的，服务器以此可以获得一些信息用于处理。可以通过检查请求的来源来防御CSRF攻击。但在某些情况下，如从https跳到http，浏览器出于安全考虑，不会发送Referer，服务器就无法进行check了。若该网站同域的其他网站有XSS漏洞，那么攻击者可以在其他网站注入恶意脚本，受害者进入了此类同域的网址，也会遭到攻击。由此可见，无法完全依赖Referer Check作为CSRF的主要手段，但是可以通过Referer Check来监控CSRF的发生。
（3）Anti CSRF Token。 发送实时请求时在http请求中以参数形式加入一个随机产生的token，并在服务器建立一个拦截器来验证这个token。服务器读取浏览器当前域cookie中这个token值，会与请求中的token进行校验，都存在且相等时才认为是合法的请求。
但在处理多页面共存问题时，当某个页面消耗掉token后，其他页面的表单保存的还是被消耗掉的token，提交时就会出错。
（4）禁止第三方网站携带本网站的cookie信息。 设置same-site属性。strict最为严格，完全禁止第三方cookie，跨站点时，任何情况下都不会发送cookie。Lax稍微放宽，大多数情况不发送第三方cookie，但是导航到目标网址的get请求除外。这种方式需要浏览器支持。
更详细的介绍可以移步~前端安全系列之二：如何防止CSRF攻击？
三、文件上传漏洞
原理： 若对文件上传路径过滤不严，并且对用户上传的文件后缀以及文件类型限制不严，攻击者可通过web访问的目录上传任意文件，包括网站后门文件（webshell），进而远程控制网站服务器。
解决方法
（1）在开发过程中，需严格限制和校验上传的文件类型和后缀，禁止上传恶意代码的文件。
（2）定义上传文件类型白名单，即只允许白名单内类型的文件上传。
（3）限制相关目录的执行权限，禁止执行脚本解析，防范攻击者进行二次攻击。
四、点击劫持
概念： 违背用户点击操作的初衷，通过用户点击完成了另一个操作，而用户毫不知情。
解决方法
（1）JS禁止内嵌。当有iframe内嵌时，top和window不相等。对top.location进行判断，若和window.location不相等，则强制相等。
if (top.location !== window.location) {
top.location = window.location;
}有可能禁用了JS，但是还是有可能发生劫持。
（2）X-FRAME-OPTIONS，用于控制网站内容在其他web网站的frame标签内的显示问题。deny表示拒绝加载任何frame，sameorigin表示仅同源域名下的页面匹配时许可。（比如，当指定http://hackr.jp/sample.html页面为sameorigin时，那么hackr.jp上所有页面的frame都被允许可加载该页面，而example.com等其他域名的页面就不行了。）allow-from https://example.com/表示该页面可以在指定来源的 frame 中展示。
（3）其他辅助手段，如加验证码。
五、SQL注入（SQL Injection）
原理： 应用程序在向后台数据库传递SQL时，攻击者将SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终打到欺骗服务器执行恶意的SQL命令。
解决方法
（1）日志处理，防止系统敏感信息泄露。如设置php.ini选项为display_errors=off，防止php脚本出错后，在页面输出敏感错误信息。
（2）数据转义或校验。
（3）增加黑名单或白名单验证。
参考：
web大前端开发中一些常见的安全性问题
web 应用常见安全漏洞一览
前端安全-常见的攻击以及防御
Web攻防之XSS,CSRF,SQL注入
前端的安全问题