Skip to content

Commit 83aa39a

Browse files
n-zeplomichalsnik
authored andcommitted
⭐️New: Add vue/no-v-html rule (#435)
* New: Add `vue/no-v-html` rule * Update category to undefined as categories are defined in major releases * Update no-v-html category * Update no-v-html rule link
1 parent 8027916 commit 83aa39a

File tree

3 files changed

+128
-0
lines changed

3 files changed

+128
-0
lines changed

Diff for: docs/rules/no-v-html.md

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# disallow use of v-html to prevent XSS attack (no-v-html)
2+
3+
This rule reports use of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross Side Scripting (XSS) attacks.
4+
5+
## :book: Rule Details
6+
7+
This rule reports all uses of `v-html` to help prevent XSS attacks.
8+
9+
This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.
10+
11+
:-1: Examples of **incorrect** code for this rule:
12+
13+
```html
14+
<template>
15+
<div v-html="someHTML"></div>
16+
</template>
17+
```
18+
19+
:+1: Examples of **correct** code for this rule:
20+
21+
```html
22+
<template>
23+
<div>{{someHTML}}</div>
24+
</template>
25+
```
26+
27+
## :wrench: Options
28+
29+
Nothing.
30+
31+
## When Not To Use It
32+
33+
If you are certain the content passed `to v-html` is sanitized HTML you can disable this rule.
34+
35+
## Further Reading
36+
37+
* (XSS in Vue.js)[https://blog.sqreen.io/xss-in-vue-js/]

Diff for: lib/rules/no-v-html.js

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/**
2+
* @fileoverview Restrict or warn use of v-html to prevent XSS attack
3+
* @author Nathan Zeplowitz
4+
*/
5+
'use strict'
6+
const utils = require('../utils')
7+
8+
// ------------------------------------------------------------------------------
9+
// Rule Definitionutilu
10+
// ------------------------------------------------------------------------------
11+
12+
module.exports = {
13+
meta: {
14+
docs: {
15+
description: 'disallow use of v-html to prevent XSS attack',
16+
category: undefined,
17+
url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.6.0/docs/rules/no-v-html.md'
18+
},
19+
fixable: null,
20+
schema: []
21+
},
22+
create (context) {
23+
return utils.defineTemplateBodyVisitor(context, {
24+
"VAttribute[directive=true][key.name='html']" (node) {
25+
context.report({
26+
node,
27+
loc: node.loc,
28+
message: "'v-html' directive can lead to XSS attack."
29+
})
30+
}
31+
})
32+
}
33+
}

Diff for: tests/lib/rules/no-v-html.js

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/**
2+
* @fileoverview Restrict or warn use of v-html to prevent XSS attack
3+
* @author Nathan Zeplowitz
4+
*/
5+
'use strict'
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
const RuleTester = require('eslint').RuleTester
12+
const rule = require('../../../lib/rules/no-v-html')
13+
14+
// ------------------------------------------------------------------------------
15+
// Tests
16+
// ------------------------------------------------------------------------------
17+
const ruleTester = new RuleTester({
18+
parser: 'vue-eslint-parser',
19+
parserOptions: { ecmaVersion: 2015 }
20+
})
21+
22+
ruleTester.run('no-v-html', rule, {
23+
valid: [
24+
{
25+
filename: 'test.vue',
26+
code: ''
27+
},
28+
{
29+
filename: 'test.vue',
30+
code: '<template></template>'
31+
},
32+
{
33+
filename: 'test.vue',
34+
code: '<template><div v-if="foo"></div></template>'
35+
},
36+
{
37+
filename: 'test.vue',
38+
code: '<template><div v-if="foo" v-bind="bar"></div></template>'
39+
}
40+
],
41+
invalid: [
42+
{
43+
filename: 'test.vue',
44+
code: '<template><div v-html="foo"></div></template>',
45+
errors: ["'v-html' directive can lead to XSS attack."]
46+
},
47+
{
48+
filename: 'test.vue',
49+
code: '<template><ul v-html:aaa="userHTML"></ul></template>',
50+
errors: ["'v-html' directive can lead to XSS attack."]
51+
},
52+
{
53+
filename: 'test.vue',
54+
code: '<template><section v-html/></template>',
55+
errors: ["'v-html' directive can lead to XSS attack."]
56+
}
57+
]
58+
})

0 commit comments

Comments
 (0)