Devcursor

外观风格

目录

Vue 的安全操作

限定/过滤传入Vue.js不安全函数的变量值

  1. 使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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

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

<template>
// 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>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14