--- theme: cyanosis --- 本文正在参加[「金石计划」](https://juejin.cn/post/7207698564641996856) 最近在部门晋升过程中，碰到了关于前端安全方面的问答环节，感觉自己知识有欠缺，这里总结一下自己的学习心得。本文总结的是作为一个前端工程师，需要掌握的安全策略。 ## XSS XSS（Cross Site Scripting）叫做跨站脚本攻击，其攻击原理是利用登录用户的权限，在页面中注入一段脚本，来伪造用户进行请求后端。 ### 被攻击的场景 - 有不安全表单输入的页面 - 不明链接的推广或弹窗 ### 用途 - 盗号 - 篡改、盗取、删除企业信息数据 - 非法转账 - 利用宿主机对他人进行DDos攻击 - ... ### 攻击类型 - 反射型 XSS脚本隐藏在连接中，欺骗用户去点击后，就会执行黑客的脚本；或者是利用博客网站的漏洞，在输入框中输入攻击脚本，并触发用户点击或被动访问。 - 存储型 XSS脚本（例如：``）会存储在服务器上，比如在线博客等，每次从服务器读取数据后渲染时或者渲染后诱导用户点击时，就会执行黑客脚本。一个存储+反射的例子如下图所示： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a78528e3c9e46b6846e36581223f620~tplv-k3u1fbpfcp-watermark.image?) 表单里填写以后保存，再次打开编辑时，input里不但会有 value字段，还会多一个 onckick事件，每次点击输入框就会触发 alert。 - DOM型与反射性类似，但是会改变当前HTML的DOM树结构，比如脚本`let str = document.getElementById("text").value; document.getElementById("dom").innerHTML = "你跳转到了我输入的地址啦！?"` ### 案例 - 新浪微博XSS事件：用户被引诱点击一个不明链接，进入一个页面中，被自动关注了一个用户：hellosamy，并且自动转发私信给他人，最终导致该用户短时间内有了大量粉丝。 - 百度贴吧XSS事件：点击某贴的推广链接后会被自动转发，导致点击人员账号被封禁。 - 2011新浪微博蠕虫事件攻击方式是反射型：在微博访问路径下加了一段 script: `https://weibo.com/xx/xx/yy"> ``` 然后在浏览器中设置一个不明链接，点击后就会访问这个form。 ### 防御手段防御原理是利用伪造请求和合法请求的url不一样。 - 检测请求来源服务器校验请求的 referer，来判断发送请求的域名是否为合法的来源。 - token校验 token一般是登录信息+时间戳随机合成的一长串唯一性字符串，别的网站中模拟的请求，是不存在这个token的。 ## SQL注入通过把SQL命令注入到表单或输入框中，达到欺骗服务器来执行该SQL的目的。 ### 案例 - 2013年美国海军 Smart Web Move 应用被攻击 - 陆续有银行账户数据修改 ### 攻击方式 - 登录注入在不知道正确密码的前提下，执行如下sql是会查到正确的用户信息的： ```sql select * from users where user='dudu' and pass='abc' or (1=1 and user='dudu') --" ``` 因此，如果服务器对于密码校验只是简单的字符串拼接的话，只需要在密码框中输入： ```sql abc' or (1=1 and user='dudu') --" ``` 此时点击登录后，就能绕过密码校验了。 - 搜索框注入一般的页面搜索都是模糊查询： ```sql title like '%name%' ``` 我们可以在搜索框中输入： ```sql name'/**/or/**/1=1/**/#' ``` 上述输入将后面所有的sql都注释掉，并且使查询条件失效。 ### 防御手段 - 用户权限管理对于关系到系统数据库创建、删除等高危操作，设立超级管理员，以避免普通用户入侵。 - SQL语句使用参数传值 - 过滤SQL语句 - 定期漏洞扫描 - 对输入的内容进行多级验证 ## 文件上传漏洞指利用Windows文件命名规则，上传了可执行脚本文件，并通过脚本文件获得了执行服务器命令的能力。 ### 漏洞原因 - windows文件名中不能使用冒号、问号、星号、斜杠等特殊字符。 - 利用编程语言的漏洞，例如 php的move_uploaded_file函数在移动文件时，会忽略非法字符及其之后的字符（例如：a.php:a.jpg --> a.php） ## 攻击方式 - 代理上传通过一些中间工具（例如：fiddler）完成非法上传。 ### 防御手段 - 权限控制在上传文件时，一般会新建一个 temp 文件夹，将该文件夹设置为不可执行，这样上传上来的文件，即使后缀变了，也不会去执行。 - 不使用用户的文件名，而使用随机生成的名字此时，a.php:a.jpg 文件会变成 xxxxx.jpg ，而不是a.php ## 项目实践这里讲一下在具体开发业务中使用到的安全处理实践。 - XSS 1. 使用`dangerouslySetInnerHTML`、`InnerHTML`时，确保输入的是前端自己定义的不可修改的内容，严禁用户自定义输入。 2. query参数需经解析后以转移字符串显示 3. 使用Token用户信息校验，直接禁止Http请求携带Cookie 4. 对于登录和安全认证的Cookies字段设置HttpOnly 5. 使用XSS库过滤入参 - CSRF 1. 登陆验证使用Token请求头，前后端不传递Cookie 2. Form表单提交使用Post提交 3. 限制第三方请求，像第三方的库和图片都自行部署 - SQL注入 1. 使用数据库模型Gorm和Sequelize处理数据库语句 2. 不用Get方法查询用户信息且接口必须增加鉴权 3. 严格限定和校验数据库查询语句拼接的参数