feat: support json content (without disabling sanitizers) (#415)

* feat: add json prop to bypass sanitizers

* chore: fix lint

* feat: escape keys as well

test: fix json escaping

* add escapeKeys into escapeOptions

test/unit/escaping.test.js

@@ -1,6 +1,7 @@
 import _getMetaInfo from '../../src/shared/getMetaInfo'
 import { loadVueMetaPlugin } from '../utils'
 import { defaultOptions } from '../../src/shared/constants'
+import { serverSequences } from '../../src/shared/escaping'
 
 const getMetaInfo = (component, escapeSequences) => _getMetaInfo(defaultOptions, component, escapeSequences)
 
@@ -96,4 +97,43 @@ describe('escaping', () => {
       __dangerouslyDisableSanitizersByTagID: { noscape: ['innerHTML'] }
     })
   })
+
+  test('json is still safely escaped', () => {
+    const component = new Vue({
+      metaInfo: {
+        script: [
+          {
+            json: {
+              perfectlySave: '</script><p class="unsafe">This is safe</p><script>',
+              '</script>unsafeKey': 'This is also still safe'
+            }
+          }
+        ]
+      }
+    })
+
+    expect(getMetaInfo(component, serverSequences)).toEqual({
+      title: undefined,
+      titleChunk: '',
+      titleTemplate: '%s',
+      htmlAttrs: {},
+      headAttrs: {},
+      bodyAttrs: {},
+      meta: [],
+      base: [],
+      link: [],
+      style: [],
+      script: [
+        {
+          json: {
+            perfectlySave: '&lt;/script&gt;&lt;p class=&quot;unsafe&quot;&gt;This is safe&lt;/p&gt;&lt;script&gt;',
+            '&lt;/script&gt;unsafeKey': 'This is also still safe'
+          }
+        }
+      ],
+      noscript: [],
+      __dangerouslyDisableSanitizers: [],
+      __dangerouslyDisableSanitizersByTagID: {}
+    })
+  })
 })

test/utils/meta-info-data.js

@@ -116,12 +116,22 @@ const metaInfoData = {
         { src: 'src1', async: false, defer: true, [defaultOptions.tagIDKeyName]: 'content', callback: () => {} },
         { src: 'src-prepend', async: true, defer: false, pbody: true },
         { src: 'src2', async: false, defer: true, body: true },
-        { src: 'src3', async: false, skip: true }
+        { src: 'src3', async: false, skip: true },
+        { type: 'application/ld+json',
+          json: {
+            '@context': 'http://schema.org',
+            '@type': 'Organization',
+            'name': 'MyApp',
+            'url': 'https://www.myurl.com',
+            'logo': 'https://www.myurl.com/images/logo.png'
+          }
+        }
       ],
       expect: [
         '<script data-vue-meta="ssr" src="src1" defer data-vmid="content" onload="this.__vm_l=1"></script>',
         '<script data-vue-meta="ssr" src="src-prepend" async data-pbody="true"></script>',
-        '<script data-vue-meta="ssr" src="src2" defer data-body="true"></script>'
+        '<script data-vue-meta="ssr" src="src2" defer data-body="true"></script>',
+        '<script data-vue-meta="ssr" type="application/ld+json">{"@context":"http://schema.org","@type":"Organization","name":"MyApp","url":"https://www.myurl.com","logo":"https://www.myurl.com/images/logo.png"}</script>'
       ],
       test (side, defaultTest) {
         return () => {
@@ -139,12 +149,13 @@ const metaInfoData = {
             // ssr doesnt generate data-body tags
             const bodyPrepended = this.expect[1]
             const bodyAppended = this.expect[2]
-            this.expect = [this.expect[0]]
+            this.expect = [this.expect.shift(), this.expect.pop()]
 
             const tags = defaultTest()
+            const html = tags.text()
 
-            expect(tags.text()).not.toContain(bodyPrepended)
-            expect(tags.text()).not.toContain(bodyAppended)
+            expect(html).not.toContain(bodyPrepended)
+            expect(html).not.toContain(bodyAppended)
           }
         }
       }