JavaScript 原生 DOM API 的安全操作

2021-05-31 14:22 更新

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.hrefifame.srcform.actionembed.srcobject.datalink.hrefarea.hrefinput.formactionbutton.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);
}
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号