JavaScript 原生 DOM API 的安全操作

1.1.1【必須】HTML標(biāo)簽操作，限定/過濾傳入變量值

• 使用innerHTML=、outerHTML=、document.write()、document.writeln()時，如變量值外部可控，應(yīng)對特殊字符（&, <, >, ", '）做編碼轉(zhuǎn)義，或使用安全的 DOM API 替代，包括：innerText=

// 假設(shè) params 為用戶輸入， text 為 DOM 節(jié)點
// bad：將不可信內(nèi)容帶入HTML標(biāo)簽操作
const { user } = params;
// ...
text.innerHTML = `Follow @${user}`;
// good: innerHTML操作前，對特殊字符編碼轉(zhuǎn)義
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);時，如第一個參數(shù)值name外部可控，應(yīng)用白名單限定允許操作的屬性范圍。

• 使用element.setAttribute(name, value);時，操作a.href、ifame.src、form.action、embed.src、object.data、link.href、area.href、input.formaction、button.formaction屬性時，如第二個參數(shù)值value外部可控，應(yīng)參考JavaScript頁面類規(guī)范1.3.1部分，限定頁面重定向或引入資源的目標(biāo)地址。

// good: setAttribute操作前，限定引入資源的目標(biāo)地址
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);
}