JavaScript 流行框架/库的安全操作

1.2.1【必须】限定/过滤传入jQuery不安全函数的变量值

• 使用.html()、.append()、.prepend()、.wrap()、.replaceWith()、.wrapAll()、.wrapInner()、.after()、.before()时，如变量值外部可控，应对特殊字符（&, <, >, ", '）做编码转义。
• 引入jQuery 1.x（等于或低于1.12）、jQuery2.x（等于或低于2.2），且使用$()时，应优先考虑替换为最新版本。如一定需要使用，应对传入参数值中的特殊字符（&, <, >, ", '）做编码转义。

// bad：将不可信内容，带入jQuery不安全函数.after()操作
const { user } = params;
// ...
$("p").after(user);
// good: jQuery不安全函数.html()操作前，对特殊字符编码转义
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;
user = htmlEncode(user);
// ...
$("p").html(user);

• 使用.attr()操作a.href、ifame.src、form.action、embed.src、object.data、link.href、area.href、input.formaction、button.formaction属性时，应参考JavaScript页面类规范1.3.1部分，限定重定向的资源目标地址。

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

• 使用$.getScript(url [, success ])时，如第一个参数值url外部可控（如：从URL取值拼接，请求jsonp接口），应限定可控变量值的字符集范围为：[a-zA-Z0-9_-]+。

1.2.2【必须】限定/过滤传入Vue.js不安全函数的变量值

• 使用v-html时，不允许对用户提供的内容使用HTML插值。如业务需要，应先对不可信内容做富文本过滤。

// bad：直接渲染外部传入的不可信内容
<div v-html="userProvidedHtml"></div>
// good：使用富文本过滤库处理不可信内容后渲染
<!-- 使用 -->
<div v-xss-html="{'mode': 'whitelist', dirty: html, options: options}" ></div>
<!-- 配置 -->
<script>
    new Vue({
    el: "#app",
    data: {
        options: {
            whiteList: {
                a: ["href", "title", "target", "class", "id"],
                div: ["class", "id"],
                span: ["class", "id"],
                img: ["src", "alt"],
            },
        },
    },
});
</script>

• 使用v-bind操作a.href、ifame.src、form.action、embed.src、object.data、link.href、area.href、input.formaction、button.formaction时，应确保后端已参考JavaScript页面类规范1.3.1部分，限定了供前端调用的重定向目标地址。

• 使用v-bind操作style属性时，应只允许外部控制特定、可控的CSS属性值

// bad：v-bind允许外部可控值，自定义CSS属性及数值
<a v-bind:href="sanitizedUrl" v-bind:style="userProvidedStyles">
click me
</a>
// good：v-bind只允许外部提供特性、可控的CSS属性值
<a v-bind:href="sanitizedUrl" v-bind:style="{
color: userProvidedColor,
background: userProvidedBackground
}" >
click me
</a>