feat(web): Integrate trusted types into Vue

src/core/config.js

@@ -33,6 +33,9 @@ export type Config = {
 
   // legacy
   _lifecycleHooks: Array<string>;
+
+  // trusted types (https://github.com/WICG/trusted-types)
+  trustedTypesPolicyName: string;
 };
 
 export default ({
@@ -126,5 +129,11 @@ export default ({
   /**
    * Exposed for legacy reasons
    */
-  _lifecycleHooks: LIFECYCLE_HOOKS
+  _lifecycleHooks: LIFECYCLE_HOOKS,
+
+  /**
+   * Trusted Types policy name which will be used by Vue. More
+   * info about Trusted Types on https://github.com/WICG/trusted-types.
+   */
+  trustedTypesPolicyName: 'vue'
 }: Config)

src/platforms/web/runtime/modules/dom-props.js

@@ -2,6 +2,7 @@
 
 import { isDef, isUndef, extend, toNumber } from 'shared/util'
 import { isSVG } from 'web/util/index'
+import {maybeCreateDangerousSvgHTML} from 'web/security'
 
 let svgContainer
 
@@ -20,6 +21,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
 
   for (key in oldProps) {
     if (!(key in props)) {
+      // TT_TODO: when (how) is this even called
       elm[key] = ''
     }
   }
@@ -51,7 +53,7 @@ function updateDOMProps (oldVnode: VNodeWithData, vnode: VNodeWithData) {
     } else if (key === 'innerHTML' && isSVG(elm.tagName) && isUndef(elm.innerHTML)) {
       // IE doesn't support innerHTML for SVG elements
       svgContainer = svgContainer || document.createElement('div')
-      svgContainer.innerHTML = `<svg>${cur}</svg>`
+      svgContainer.innerHTML = maybeCreateDangerousSvgHTML(cur)
       const svg = svgContainer.firstChild
       while (elm.firstChild) {
         elm.removeChild(elm.firstChild)

src/platforms/web/security.js

@@ -0,0 +1,41 @@
+/* @flow */
+import Vue from 'core/index'
+import {getTrustedTypes, isTrustedValue} from 'shared/util'
+
+type TrustedTypePolicy = {
+  // value returned is actually an object with toString method returning the wrapped value
+  createHTML: (value: any) => string;
+};
+
+let policy: ?TrustedTypePolicy
+// create policy lazily to simplify testing
+function getOrCreatePolicy() {
+  const tt = getTrustedTypes()
+  if (tt && !policy) {
+    policy = tt.createPolicy(Vue.config.trustedTypesPolicyName, {createHTML: (s) => s});
+  }
+
+  return policy
+}
+
+if (process.env.NODE_ENV !== 'production') {
+  // we need this function to clear the policy in tests
+  Vue.prototype.$clearTrustedTypesPolicy = function() {
+    policy = undefined
+  }
+}
+
+export function maybeCreateDangerousSvgHTML(value: any): string {
+  const tt = getTrustedTypes()
+
+  if (!tt || !isTrustedValue(value)) return `<svg>${value}</svg>`;
+  // flow complains that 'getOrCreatePolicy()' might return null
+  else return (getOrCreatePolicy(): any).createHTML(`<svg>${value}</svg>`);
+}
+
+export function getTrustedShouldDecodeInnerHTML(href: boolean): string {
+  const html = href ? `<a href="\n"/>` : `<div a="\n"/>`;
+  const p = getOrCreatePolicy()
+  if (!p) return html;
+  else return p.createHTML(html);
+}

src/platforms/web/util/compat.js

@@ -1,12 +1,13 @@
 /* @flow */
 
 import { inBrowser } from 'core/util/index'
+import {getTrustedShouldDecodeInnerHTML} from 'web/security'
 
 // check whether current browser encodes a char inside attribute values
 let div
 function getShouldDecode (href: boolean): boolean {
   div = div || document.createElement('div')
-  div.innerHTML = href ? `<a href="\n"/>` : `<div a="\n"/>`
+  div.innerHTML = getTrustedShouldDecodeInnerHTML(href)
   return div.innerHTML.indexOf('&#10;') > 0
 }
 

src/shared/util.js

@@ -79,15 +79,35 @@ export function isPromise (val: any): boolean {
   )
 }
 
+let trustedTypes = undefined
+export function getTrustedTypes() {
+  if (trustedTypes === undefined) {
+    // TrustedTypes have been renamed to trustedTypes https://github.com/WICG/trusted-types/issues/177
+    trustedTypes = typeof window !== 'undefined' ? (window.trustedTypes || window.TrustedTypes) : null;
+  }
+  return trustedTypes;
+}
+
+export function isTrustedValue(value: any): boolean {
+  const tt = getTrustedTypes();
+  if (!tt) return false;
+  // TrustedURLs are deprecated and will be removed soon: https://github.com/WICG/trusted-types/pull/204
+  else return tt.isHTML(value) || tt.isScript(value) || tt.isScriptURL(value) || (tt.isURL && tt.isURL(value))
+}
+
 /**
  * Convert a value to a string that is actually rendered.
  */
 export function toString (val: any): string {
-  return val == null
-    ? ''
-    : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
-      ? JSON.stringify(val, null, 2)
-      : String(val)
+  if (isTrustedValue(val)) {
+    return val;
+  } else {
+    return val == null
+      ? ''
+      : Array.isArray(val) || (isPlainObject(val) && val.toString === _toString)
+        ? JSON.stringify(val, null, 2)
+        : String(val)
+  }
 }
 
 /**