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

1.2.1【必須】限定/過濾傳入jQuery不安全函數(shù)的變量值

• 使用.html()、.append()、.prepend()、.wrap()、.replaceWith()、.wrapAll()、.wrapInner()、.after()、.before()時(shí)，如變量值外部可控，應(yīng)對特殊字符（&, <, >, ", '）做編碼轉(zhuǎn)義。
• 引入jQuery 1.x（等于或低于1.12）、jQuery2.x（等于或低于2.2），且使用$()時(shí)，應(yīng)優(yōu)先考慮替換為最新版本。如一定需要使用，應(yīng)對傳入?yún)?shù)值中的特殊字符（&, <, >, ", '）做編碼轉(zhuǎn)義。

// bad：將不可信內(nèi)容，帶入jQuery不安全函數(shù).after()操作
const { user } = params;
// ...
$("p").after(user);


// good: jQuery不安全函數(shù).html()操作前，對特殊字符編碼轉(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;
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屬性時(shí)，應(yīng)參考JavaScript頁面類規(guī)范1.3.1部分，限定重定向的資源目標(biāo)地址。

• 使用.attr(attributeName, value)時(shí)，如第一個(gè)參數(shù)值attributeName外部可控，應(yīng)用白名單限定允許操作的屬性范圍。

• 使用$.getScript(url [, success ])時(shí)，如第一個(gè)參數(shù)值url外部可控（如：從URL取值拼接，請求jsonp接口），應(yīng)限定可控變量值的字符集范圍為：[a-zA-Z0-9_-]+。

1.2.2【必須】限定/過濾傳入Vue.js不安全函數(shù)的變量值

• 使用v-html時(shí)，不允許對用戶提供的內(nèi)容使用HTML插值。如業(yè)務(wù)需要，應(yīng)先對不可信內(nèi)容做富文本過濾。

// bad：直接渲染外部傳入的不可信內(nèi)容
<div v-html="userProvidedHtml"></div>


// good：使用富文本過濾庫處理不可信內(nèi)容后渲染
<!-- 使用 -->
<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時(shí)，應(yīng)確保后端已參考JavaScript頁面類規(guī)范1.3.1部分，限定了供前端調(diào)用的重定向目標(biāo)地址。

• 使用v-bind操作style屬性時(shí)，應(yīng)只允許外部控制特定、可控的CSS屬性值

// bad：v-bind允許外部可控值，自定義CSS屬性及數(shù)值
<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>