前言

2001 年前后，电脑杂志还流行附光盘，买杂志一半是为了那张盘。有一张盘里装了个小游戏，我到现在记得它的玩法：开局给你几颗球、几块木板、蜡烛、滑轮、传送带，把它们摆成一套连锁机关，按下启动，看球滚下坡、撞翻杠杆、点燃蜡烛、烧断绳子……最后一环正好把目标搞定。关卡设计得很「坏」，道具永远只给差一个，逼着你想「能不能用蜡烛延时替代传送带」。那阵子放学就蹲在电脑前摆机关，一关能琢磨一晚上。

前端js开发 – 转自腾讯github

I. 代码实现

1.1 原生DOM API的安全操作

1.1.1【必须】HTML标签操作，限定/过滤传入变量值

使用innerHTML=、outerHTML=、document.write()、document.writeln()时，如变量值外部可控，应对特殊字符（&, <, >, ", '）做编码转义，或使用安全的DOM API替代，包括：innerText=

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


// 假设 params 为用户输入， text 为 DOM 节点
// bad：将不可信内容带入HTML标签操作
const { user } = params;
// ...
text.innerHTML = `Follow @${user}`;

// good: innerHTML操作前，对特殊字符编码转义
function htmlEncode(iStr) {
	let sStr = iStr;
	sStr = sStr.replace(/&/g, "&amp;");
	sStr = sStr.replace(/>/g, "&gt;");
	sStr = sStr.replace(/</g, "&lt;");
	sStr = sStr.replace(/"/g, "&quot;");
	sStr = sStr.replace(/'/g, "&#39;");
	return sStr;
}

let { user } = params;
user = htmlEncode(user);
// ...
text.innerHTML = `Follow @${user}`;

// good: 使用安全的DOM API替代innerHTML
const { user } = params;
// ...
text.innerText = `Follow @${user}`;

1.1.2【必须】HTML属性操作，限定/过滤传入变量值

……

阅读全文

分类前端中的文章

从弄丢的杂志光盘到女儿的物理启蒙：网页版机关游戏 Contraption Lab 开发调测记

前言

前端编码安全

前端js开发 – 转自腾讯github

I. 代码实现

1.1 原生DOM API的安全操作

最近文章

分类

标签

其它

分类 前端 中的文章

前言

前端js开发 – 转自腾讯github

I. 代码实现

1.1 原生DOM API的安全操作

最近文章

分类

标签

其它

分类前端中的文章