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

src/client/updaters/tag.js

@@ -56,6 +56,11 @@ export default function updateTag (appId, options = {}, type, tags, head, body)
           continue
         }
 
+        if (attr === 'json') {
+          newElement.innerHTML = JSON.stringify(tag.json)
+          continue
+        }
+
         if (attr === 'cssText') {
           if (newElement.styleSheet) {
             /* istanbul ignore next */

src/server/generators/tag.js

@@ -62,8 +62,13 @@ export default function tagGenerator ({ ssrAppId, attribute, tagIDKeyName } = {}
           attrs += ` ${prefix}${attr}` + (isBooleanAttr ? '' : `="${tag[attr]}"`)
         }
 
+        let json = ''
+        if (tag.json) {
+          json = JSON.stringify(tag.json)
+        }
+
         // grab child content from one of these attributes, if possible
-        const content = tag.innerHTML || tag.cssText || ''
+        const content = tag.innerHTML || tag.cssText || json
 
         // generate tag exactly without any other redundant attribute
 

src/shared/constants.js

@@ -90,7 +90,7 @@ export const tagsWithoutEndTag = ['base', 'meta', 'link']
 export const tagsWithInnerContent = ['noscript', 'script', 'style']
 
 // Attributes which are inserted as childNodes instead of HTMLAttribute
-export const tagAttributeAsInnerContent = ['innerHTML', 'cssText']
+export const tagAttributeAsInnerContent = ['innerHTML', 'cssText', 'json']
 
 // Attributes which should be added with data- prefix
 export const commonDataAttributes = ['body', 'pbody']

src/shared/escaping.js

@@ -21,7 +21,7 @@ export const clientSequences = [
 // sanitizes potentially dangerous characters
 export function escape (info, options, escapeOptions) {
   const { tagIDKeyName } = options
-  const { doEscape = v => v } = escapeOptions
+  const { doEscape = v => v, escapeKeys } = escapeOptions
   const escaped = {}
 
   for (const key in info) {
@@ -55,15 +55,25 @@ export function escape (info, options, escapeOptions) {
       escaped[key] = doEscape(value)
     } else if (isArray(value)) {
       escaped[key] = value.map((v) => {
-        return isPureObject(v)
-          ? escape(v, options, escapeOptions)
-          : doEscape(v)
+        if (isPureObject(v)) {
+          return escape(v, options, { ...escapeOptions, escapeKeys: true })
+        }
+
+        return doEscape(v)
       })
     } else if (isPureObject(value)) {
-      escaped[key] = escape(value, options, escapeOptions)
+      escaped[key] = escape(value, options, { ...escapeOptions, escapeKeys: true })
     } else {
       escaped[key] = value
     }
+
+    if (escapeKeys) {
+      const escapedKey = doEscape(key)
+      if (key !== escapedKey) {
+        escaped[escapedKey] = escaped[key]
+        delete escaped[key]
+      }
+    }
   }
 
   return escaped