这是我参与「第四届青训营 」笔记创作活动的的第3天
前端常见的安全问题
CSRF（跨域请求伪造）
CSRF攻击可以这样理解：攻击者盗用了你的身份，以你的名义进行恶意请求。它能做的事情有很多包括：以你的名义发送邮件、发信息、盗取账号、购买商品、虚拟货币转账等。总结起来就是：个人隐私暴露及财产安全问题。
-
CSRF的攻击思想
1、浏览并登录信任网站（举例：淘宝）
2、登录成功后在浏览器产生信息存储（举例：cookie）
3、用户在没有登出淘宝的情况下，访问危险网站
4、危险网站中存在恶意代码，代码为发送一个恶意请求（举例：购买商品/余额转账）
5、携带刚刚在浏览器产生的信息进行恶意请求
6、淘宝验证请求为合法请求（区分不出是否是该用户发送）
7、达到了恶意目标
-
防御措施
1、涉及到数据修改操作严格使用 post 请求而不是 get 请求
2、HTTP 协议中使用 Referer 属性来确定请求来源进行过滤（禁止外域）
3、请求地址添加 token ，使黑客无法伪造用户请求
4、HTTP 头自定义属性验证（类似上一条）
5、显示验证方式：添加验证码、密码等
XSS/CSS（跨站脚本攻击）
XSS又叫CSS（Cross Site Script），跨站脚本攻击：攻击者在目标网站植入恶意脚本（js / html），用户在浏览器上运行时可以获取用户敏感信息（cookie / session）、修改web页面以欺骗用户、与其他漏洞相结合形成蠕虫等。
浏览器遇到 html 中的 script 标签时，会解析并执行其中的js代码
针对这种情况，我们对特殊字符进行转译就好了（vue/react等主流框架已经避免类似问题，vue举例：不能在template中写script标签，无法在js中通过ref或append等方式动态改变或添加script标签）
XSS类型：
- 持久型XSS：将脚本植入到服务器上，从而导致每个访问的用户都会执行
- 非持久型XSS：对个体用户某url的参数进行攻击
防御措施（对用户输入内容和服务端返回内容进行过滤和转译）
- 现代大部分浏览器都自带 XSS 筛选器，vue / react 等成熟框架也对 XSS 进行一些防护
- 即便如此，我们在开发时也要注意和小心
- 对用户输入内容和服务端返回内容进行过滤和转译
- 重要内容加密传输
- 合理使用get/post等请求方式
- 对于URL携带参数谨慎使用
- 我们无法做到彻底阻止，但是能增加黑客攻击成本，当成本与利益不符时自然会降低风险
