From 41907ed6527188eddd06e4905df58b90a959d5e8 Mon Sep 17 00:00:00 2001 From: pimlie Date: Fri, 24 Nov 2017 15:10:12 +0100 Subject: [PATCH] Add __dangerouslyDisableSanitizersByTagID property Specify which property for which tagIDKeyName should not be sanitized --- README.md | 22 ++++++++++++++++++++ examples/ssr.tagid.js | 44 +++++++++++++++++++++++++++++++++++++++ src/shared/getMetaInfo.js | 15 +++++++++---- test/getMetaInfo.spec.js | 15 ++++++++----- 4 files changed, 87 insertions(+), 9 deletions(-) create mode 100644 examples/ssr.tagid.js diff --git a/README.md b/README.md index a54aa81..8e2aa2c 100644 --- a/README.md +++ b/README.md @@ -68,6 +68,7 @@ - [`script` ([Object])](#script-object) - [`noscript` ([Object])](#noscript-object) - [`__dangerouslyDisableSanitizers` ([String])](#__dangerouslydisablesanitizers-string) + - [`__dangerouslyDisableSanitizersByTagID` ({[String]})](#__dangerouslydisablesanitizersbytagid-string) - [`changed` (Function)](#changed-function) - [How `metaInfo` is Resolved](#how-metainfo-is-resolved) - [Lists of Tags](#lists-of-tags) @@ -563,6 +564,27 @@ By default, `vue-meta` sanitizes HTML entities in _every_ property. You can disa :warning: **Using this option is not recommended unless you know exactly what you are doing.** By disabling sanitization, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application. +#### `__dangerouslyDisableSanitizersByTagID` ({[String]}) + +Provides same functionality as `__dangerouslyDisableSanitizers` but you can specify which property for which `tagIDKeyName`'s sanitization should be disabled. It expects an object with the vmid's as key and an array with property names value: + +```js +{ + metaInfo: { + title: '', + meta: [{ vmid: 'description', name: 'still-&-sanitized', content: '& I will not be '}], + __dangerouslyDisableSanitizersByTagID: { description: ['content'] } + } +} +``` + +```html +<I will be sanitized> + +``` + +:warning: **Using this option is not recommended unless you know exactly what you are doing.** By disabling sanitization, you are opening potential vectors for attacks such as SQL injection & Cross-Site Scripting (XSS). Be very careful to not compromise your application. + #### `changed` (Function) Will be called when the client `metaInfo` updates/changes. Receives the following parameters: diff --git a/examples/ssr.tagid.js b/examples/ssr.tagid.js new file mode 100644 index 0000000..fef1f69 --- /dev/null +++ b/examples/ssr.tagid.js @@ -0,0 +1,44 @@ +const Vue = require('vue') +const renderer = require('vue-server-renderer').createRenderer() +const VueMeta = require('../') + +Vue.use(VueMeta, { + tagIDKeyName: 'hid' +}) + +const vm = new Vue({ + template: '', + metaInfo: { + title: 'Hello', + htmlAttrs: { amp: undefined }, + meta: [ + { hid: 'description', name: 'description', content: 'Hello World' } + ], + script: [ + { hid: 'schema', innerHTML: '{ "@context": "http://www.schema.org", "@type": "Organization" }', type: 'application/ld+json' }, + { innerHTML: '{ "body": "yes" }', body: true, type: 'application/ld+json' } + ], + __dangerouslyDisableSanitizersByTagID: { schema: ['innerHTML'] } + }, + components: { + Hello: { + template: '

Hello

', + metaInfo: { + title: 'Coucou', + meta: [ + { hid: 'description', name: 'description', content: 'Coucou' } + ] + } + } + } +}) + +renderer.renderToString(vm, function (err, html) { + if (err) throw err + const $meta = vm.$meta().inject() + console.log('Title:\n' + $meta.title.text()) + console.log('\nHTML attrs:\n' + $meta.htmlAttrs.text()) + console.log('\nMeta:\n' + $meta.meta.text()) + console.log('\nHead Script:\n' + $meta.script.text()) + console.log('\nBody Script:\n' + $meta.script.text({ body: true })) +}) diff --git a/src/shared/getMetaInfo.js b/src/shared/getMetaInfo.js index 119c3bd..8774487 100644 --- a/src/shared/getMetaInfo.js +++ b/src/shared/getMetaInfo.js @@ -43,7 +43,8 @@ export default function _getMetaInfo (options = {}) { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} } // collect & aggregate all metaInfo $options @@ -97,13 +98,19 @@ export default function _getMetaInfo (options = {}) { info.base = Object.keys(info.base).length ? [info.base] : [] } + const ref = info.__dangerouslyDisableSanitizers + const refByTagID = info.__dangerouslyDisableSanitizersByTagID + // sanitizes potentially dangerous characters const escape = (info) => Object.keys(info).reduce((escaped, key) => { - const ref = info.__dangerouslyDisableSanitizers - const isDisabled = ref && ref.indexOf(key) > -1 + let isDisabled = ref && ref.indexOf(key) > -1 + const tagID = info[tagIDKeyName] + if (!isDisabled && tagID) { + isDisabled = refByTagID && refByTagID[tagID] && refByTagID[tagID].indexOf(key) > -1 + } const val = info[key] escaped[key] = val - if (key === '__dangerouslyDisableSanitizers') { + if (key === '__dangerouslyDisableSanitizers' || key === '__dangerouslyDisableSanitizersByTagID') { return escaped } if (!isDisabled) { diff --git a/test/getMetaInfo.spec.js b/test/getMetaInfo.spec.js index c69a644..acf1c09 100644 --- a/test/getMetaInfo.spec.js +++ b/test/getMetaInfo.spec.js @@ -38,7 +38,8 @@ describe('getMetaInfo', () => { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} }) }) @@ -66,7 +67,8 @@ describe('getMetaInfo', () => { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} }) }) @@ -95,7 +97,8 @@ describe('getMetaInfo', () => { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} }) }) @@ -126,7 +129,8 @@ describe('getMetaInfo', () => { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} }) }) @@ -164,7 +168,8 @@ describe('getMetaInfo', () => { style: [], script: [], noscript: [], - __dangerouslyDisableSanitizers: [] + __dangerouslyDisableSanitizers: [], + __dangerouslyDisableSanitizersByTagID: {} }) }) })