【JS篇】web前端代码安全总结

web代码安全总结

参考文章：
软件开发之常见前端安全漏洞：https://www.jianshu.com/p/bd4c6d749446?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
常见前端漏洞：https://www.jianshu.com/p/60a17bef22ae

前言

项目验收时，第三方机构进行了安全漏洞检查，发现了许多安全漏洞，参考相关文章后整理总结如下，望后续进行编码的过程中尽量避免类似问题：

一. 常见前端安全漏洞：

1. 跨站脚本（XSS）漏洞
2. 跨站请求伪造（CSRF）漏洞 （此处有详细说明：https://www.jianshu.com/p/00fa457f6d3e ）
3. HTTP Header注入漏洞
4. a链接可造成钓鱼攻击

二. 防御措施：

1. 后端在接收请求数据时，需要做输入检查，过滤特殊符号和标签
2. 前端在显示后端数据时，需要做输出检查，不仅是标签内容需要过滤、转义，就连属性值和样式也都可能需要。
3. 在处理富文本时可以设置标签白名单
4. 设置HttpOnlly防止cookie劫持

三. 项目中遇到的具体问题

1.跨站脚本（xss）漏洞

• window.location.href 跳转：对参数做HTML转义过滤，要过滤的字符包括：单引号、双引号、大于号、小于号、&符号 ，防止脚本执行；使用 encodeURIComponent 转义。

function htmlEncode(str) {
  var entry = { "'": "&apos;", '"': '&quot;', '<': '&lt;', '>': '&gt;' };
  str = str.replace(/(['")-><&\\\/\.])/g, function ($0) { return entry[$0] || $0; });
  return str;
}

• 避免使用 动态插入script标签 方式
  依靠 HTML、XML 或其他类型编码验证用户输入可能会导致浏览器执行恶意代码。

2.动态代码赋值

• 不推荐使用eval 方法，会有执行动态注入代码的风险：尽量不用，可使用替代方法

function evil(fn) {
	var Fn = Function; // 一个变量指向Function，防止有些前端编译工具报错
	return new Fn('return ' + fn)();
}

• 消息可信源校验

// 接收消息时新增可信源校验，如下：
window.addEventListener('message', function (e) {
    if (e.origin !== window.location.origin) {
        return; // 不是可信源，则返回
    }
    // ……
});

3. 不要通过get请求以json格式发送合理数据(缺陷等级：高风险)

// get请求且以json格式发送数据 - 危险
$.ajax({
	type: 'GET',
    url: xxx,
    contentType: 'application/json',
    async: false,
    data: {
		a:xxx,
		b:xxx
	},
	success: function(res) {
    	// xxx
    }, error: function(res) {
    	// xxx
    }
})

可将请求方式修改为post,或将请求参数通过 JSON.stringify 转换：

$.ajax({
	type: 'POST',
    url: xxx,
    contentType: 'application/json',
    async: false,
    data: JSON.stringify(data),
	success: function(res) {
    	// xxx
    }, error: function(res) {
    	// xxx
    }
})

4.注释代码中不可出现"password"、"username"等字眼（缺陷等级：中风险）

“password”、"username"等字眼会被认为以明文形式在系统或系统代码中存储密码或密码详细信息可能会以无法轻松修复的方式危及系统安全。