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

2021-05-31 14:29 更新

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

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号