首页 > 代码库 > 前端安全须知
前端安全须知
一、网络安全
机密性（加密）、完整性（防伪造）、来源可靠性（签名）
程序漏洞
二、web前端安全
XSS：Cross Site Script（跨站攻击脚本）
往Web页面里插入恶意html代码，当用户浏览该页之时，嵌入其中Web里面的html代码会被执行。
XSS的种类：
1.XSS-基于DOM的XSS
产生原因：当web page含有一些不受服务器端控制的DOM的时候发生，通过form、referer、location修改页面DOM。
解决方法：避免客户端的脚本对DOM的重写、重定向及其它敏感的操作，需要在客户端对form输入进行过滤。
可被攻击者利用的脚本：
URL相关操作
document.location=…
document.location.hostname=…
document.location.replace(…)
document.location.assign(…)
document.URL=…
document.referrer
document.URLUnencoded
window.navigate(…)
window.location
直接运行脚本
eval(…)
window.execScript(…)
window.setInterval(…)
window.setTimeout(…)
直接写入html代码
document.write(…)
document.writeln(…)
document.body.innerHtml=…
直接修改DOM
document.forms[0].action=…
document.attachEvent(…)
document.create…(…)
document.execCommand(…)
document.body
window.attachEvent(…)
打开或修改窗口
document.open(…)
window.open(…)
window.location.href=http://www.mamicode.com/…
2.XSS-非持久性跨站
产生原因：直接将form或者query（cookie）中的字符带入到页面中，危险query字符参与html的构成（query字符并不被存储）。
解决方法：对输入进行过滤，对输出进行编码。
3.XSS-持久性跨站
产生原因：其破坏页面html结构的原理和非持久XSS一样，只是危险脚本来源不是query字符，而是数据库数据。
解决办法：对输入进行过滤，对输出进行编码。
4.XSS-基于字符集的跨站
产生原因：页面字符集不固定，用户输入非期望字符集的字符，有时会绕过前端的过滤。
解决办法：Web页面一定要指定字符集（GBK），XML中不仅要指定字符集，而且标签要闭合。
5.XSS-基于flash的跨站
产生原因：As脚本可以接受用户输入并操作cookie，攻击者可以配合其他XSS方法将恶意swf文件嵌入页面中。
解决办法：严格管理cookie的读写权限，对flash能接受的用户输入进行过滤和限定。
6.XSS- Self-inflicted XSS
产生原因：攻击者先把页面搞出漏洞，让其他用户再浏览这个有漏洞的页面的时候遭受攻击。这里已经不是严格意义上的XSS了。
解决方法：页面登录超时。
7.XSS-未经验证的跳转构成的跨站
产生原因：如果服务器端做302跳转，跳转的地址来自用户的输入，攻击者可以输入一个恶意的跳转地址来执行脚本。
解决方法：在后端来限定所接收的URL来自淘宝并做过滤。
8.XSS-Cookie构成的跨站
产生原因：破坏页面结构的原理和非持久跨站一致，Js或as可操作cookie，通过cookies提交query。
解决办法：一切来自客户端的cookie是不可信的，后端必须对客户端cookie做验证。
9.XSS- Escape-based XSS
产生原因：其破坏页面语义构成的原理和非持久XSS一致，使用畸形的UTF8字符串拼成URL。
解决方法：对输入进行过滤，对输出进行编码。
CSRF：Cross Site Request Forgery（通过肉鸡）（跨站伪造请求）
CSRF的发生：所有需要登录页面中的交互、表单提交、AJAX
CSRF的防范：临时签名（验证码、时间戳）、crumb
淘宝对CSRF的防范：在表单中指定token；
<input type=”hidden” value=http://www.mamicode.com/”{$token}” name=”_tb_token_”>
类似
var token = {igame_token: ‘194c93bf571ee6246c591b16911d92e6‘}; $("#signup_form").validate({ rules: { "invite_code": { rangelength: [6,6], remote:{ url: "/action/validInviteCode", type: "POSt", data: token, beforeSend: function(){ $(‘label‘, $(‘#invite_code‘).parent().next()).html("邀请码正在验证"); } } }, "email": { email: true, maxlength: 30, remote:{ url: "/action/isEmailAvailable", type: "POST", dataType: ‘json‘, data: token, beforeSend: function(){ $(‘label‘, $(‘#email‘).parent().next()).html("邮箱正在验证"); } } },
在cookie中指定_tb_token_；尽量使用POST方法；Ajax时附带token。
三、Javascript安全须知
- 禁止使用外部引用的js，外链应当完全使用a.tbcdn.cn上的资源文件
- 慎用eval,setTimeout,setInterval和从不可信站点获取的字符串操作的函数。
- cookies操作一定要征询后端工程师的意见，避免撑破cookies的大小限制了。
- 前端代码禁止获取referer，所有referer的操作由后端工程师处理。
- 禁止发送页面相关信息到第三方站点
- 如果JSON返回的信息里含有用户的私密信息，需要加_tb_token_
- 禁止使用script标签来达到跨域访问的目的，应当使用flash实现跨域访问，可信域之间的跨域可以使用iframe
- 所有使用的数据必须经过服务端的验证。
- js代码需要经过jslint的测试
我们还需要安全规范
页面级的html规范/标准
- 统一的编码标准（URL/GBK/js unicode）
- 标签完整性
代码级的coding规范
- 统一的ajax接口规格
- 页面中php/jsp和js代码的参数传递
- 规范的javascript编写习惯
代码review制度
前端安全须知