1 | import { shallowMount } from '@vue/test-utils';
|
2 | import safeHtml from './safe_html';
|
3 |
|
4 | describe('safe html directive', () => {
|
5 | let wrapper;
|
6 |
|
7 | const createComponent = ({ template, html, config } = {}) => {
|
8 | const defaultTemplate = `<div v-safe-html="rawHtml"></div>`;
|
9 | const defaultHtml = 'hello <script>alert(1)</script>world';
|
10 |
|
11 | const component = {
|
12 | directives: {
|
13 | safeHtml,
|
14 | },
|
15 | data() {
|
16 | return {
|
17 | rawHtml: html || defaultHtml,
|
18 | config: config || {},
|
19 | };
|
20 | },
|
21 | template: template || defaultTemplate,
|
22 | };
|
23 |
|
24 | wrapper = shallowMount(component);
|
25 | };
|
26 |
|
27 | afterEach(() => {
|
28 | wrapper.destroy();
|
29 | });
|
30 |
|
31 | describe('default', () => {
|
32 | it('should remove the script tag', () => {
|
33 | createComponent();
|
34 |
|
35 | expect(wrapper.html()).toEqual('<div>hello world</div>');
|
36 | });
|
37 |
|
38 | it('should remove javascript hrefs', () => {
|
39 | createComponent({ html: '<a href="javascript:prompt(1)">click here</a>' });
|
40 |
|
41 | expect(wrapper.html()).toEqual('<div><a>click here</a></div>');
|
42 | });
|
43 |
|
44 | it('should remove any existing children', () => {
|
45 | createComponent({
|
46 | template: `<div v-safe-html="rawHtml">foo <i>bar</i></div>`,
|
47 | });
|
48 |
|
49 | expect(wrapper.html()).toEqual('<div>hello world</div>');
|
50 | });
|
51 | });
|
52 |
|
53 | describe('advance config', () => {
|
54 | const template = '<div v-safe-html:[config]="rawHtml"></div>';
|
55 | it('should only allow <b> tags', () => {
|
56 | createComponent({
|
57 | template,
|
58 | html: '<a href="javascript:prompt(1)"><b>click here</b></a>',
|
59 | config: { ALLOWED_TAGS: ['b'] },
|
60 | });
|
61 |
|
62 | expect(wrapper.html()).toEqual('<div><b>click here</b></div>');
|
63 | });
|
64 |
|
65 | it('should strip all html tags', () => {
|
66 | createComponent({
|
67 | template,
|
68 | html: '<a href="javascript:prompt(1)"><u>click here</u></a>',
|
69 | config: { ALLOWED_TAGS: [] },
|
70 | });
|
71 |
|
72 | expect(wrapper.html()).toEqual('<div>click here</div>');
|
73 | });
|
74 | });
|
75 | });
|