JavaScript 原生 DOM API 的安全操作

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

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

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


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


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


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

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

• 使用element.setAttribute(name, value);时，如第一个参数值name外部可控，应用白名单限定允许操作的属性范围。

• 使用element.setAttribute(name, value);时，操作a.href、ifame.src、form.action、embed.src、object.data、link.href、area.href、input.formaction、button.formaction属性时，如第二个参数值value外部可控，应参考JavaScript页面类规范1.3.1部分，限定页面重定向或引入资源的目标地址。

// good: setAttribute操作前，限定引入资源的目标地址
function addExternalCss(e) {
    const t = document.createElement('link');
    t.setAttribute('href', e),
    t.setAttribute('rel', 'stylesheet'),
    t.setAttribute('type', 'text/css'),
    document.head.appendChild(t)
}


function validURL(sUrl) {
    return !!((/^(https?:\/\/)?[\w\-.]+\.(qq|tencent)\.com($|\/|\\)/i).test(sUrl) || (/^[\w][\w/.\-_%]+$/i).test(sUrl) || (/^[/\\][^/\\]/i).test(sUrl));
}


let sUrl = "https://evil.com/1.css"
if (validURL(sUrl)) {
    addExternalCss(sUrl);
}