Merge pull request #166 from pimlie/feat-partial-disable-sanitize

Add __dangerouslyDisableSanitizersByTagID property

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: '<I will be sanitized>',
+    meta: [{ vmid: 'description', name: 'still-&-sanitized', content: '& I will not be <sanitized>'}],
+    __dangerouslyDisableSanitizersByTagID: { description: ['content'] }
+  }
+}
+```
+
+```html
+<title>&lt;I will be sanitized&gt;</title>
+<meta vmid="description" name="still-&amp;-sanitized" content="& I will not 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:

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: '<hello/>',
+  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: '<p>Hello</p>',
+      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 }))
+})

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
+      let isDisabled = ref && ref.indexOf(key) > -1
-      const 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) {

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: {}
     })
   })
 })