主要是分析3种前端安全问题：sql注入、XSS跨站脚本攻击、CSRF– 恶意跨站伪造请求。

一、SQL 注入

SQL 注入漏洞（SQL Injection）是 Web 开发中最常见的一种安全漏洞。但现在的处理sql注入以及防范sql攻击都是交给了后端进行处理。到目前（2019-11）为止，开发的项目中，前端都是没有特殊处理sql注入，都是在后端进行处理sql注入。在我的这篇文章node 环境，mysql 注入有重现sql注入，以及sql注入过程。

sql注入核心就是后端把sql 执行语句当作字符串进行拼接，从而导致sql注入。

后端项目中防范sql注入方式：
一、采用sql参数化查询。
二、使用sql映射框架处理sql注入，例如：MyBatis

所以sql注入应该归于后端安全。

二、XSS跨站脚本攻击

这个是前端需要重点考虑的安全问题，也是最最严重的安全问题，如果前端出现了这个漏洞，那对整个网站来说都是灾难性的。

XSS跨站脚本攻击核心就是前端执行了不安全的代码/JavaScript。

XSS跨站脚本攻击可能出现的场景：
1 将字符串当作作html 拼接在页面中。例如使用innerHTML、$.html()、v-html等。
2 使用了eval() 函数，而参数不安全
3 使用了第三方不安全的框架/类库
4 使用了jsop解决跨域问题

如何防御XSS攻击：
对于场景1防范方式：
1 从数据源入手，数据来源是否安全，用户输入/第三方输入的数据都是不安全的数据。
2 代码审查，对于不安全的数据来源，显示时是否使用了innerHTML、$.html()、v-html等api，如果使用了就需要将代码退回重新开发。
3 尽量少使用innerHTML、$.html()、v-html等，并在使用时考虑数据来源是否安全。

对于场景2防范方式：
方式1： 尽量少使用或者不使用eval 函数。
方式2： 在项目中对eval函数进行多一层封装，当开发人员使用eval函数时，打印提示信息，提示该容函数易导致xss攻击，需要谨慎使用。
方式3： 代码审查，只要发现使用了eval 就需要开发人员进行说明，为什么要使用eval，使用eval 是出于什么考虑，是否可以使用其他方式实现。如果一定要使用eval函数，就需要考虑数据来源是否安全。

对于场景3防范方式：
方式1：当需要使用第三方框架/类库时，尽量将代码下载到本地，开发时引入本地文件的方式使用第三方框架/类库，而不是使用 <JavaScript>标签中的src 属性引入第三方框架/类库。
方式2: 尽量使用最新的框架/类库版本。例如jquery中低版本漏洞：https://snyk.io/vuln/npm:jquery

对于场景4防范方式：
方式1：解决跨域可以采用 CORS 后端配置允许跨域

三、CSRF– 恶意跨站伪造请求

解决这个安全问题，需要前后端进行配合解决。
核心是区分哪个是请求是真实用户的请求，哪个是恶意请求。

后端验证是否为真实用户方式方式一是判断用户登陆用户名和密码是否正确。如果正确则判定为真实用户。这样存在问题是，当用户的密码泄露时则无法区分。如何在代码层面，最大化的减少用户密码泄露概率，这就是项目中需要考虑的。

• 用户密码不能明文传输，不能使用get请求进行登录，将用户密码暴露在url中。
• 使用post传输登录信息
• 将密码进行加密，使用RSA加密后进行传输。
• 使用HTTPS
• 不能在cookie中存储用户密码
• 处理浏览器记住密码后，使用调试工具将type ="password" 删除后显示明文密码问题。目前看过好多项目，只有阿里大厂进行了特殊处理。
• 不使用cookie, 推荐后端生成 token，前后端使用token交互判断是否已经登录

前后端交互中token 或者session 可能被截取。

• 时效性，设置token/session 过期间隔，越是重要的数据，过期间隔应该越短，就算token/session 被截取，也能将损失降到最低
• ip限制，指定可获取获取数据的IP，除外其他IP都不能访问