From 60d87a5d19f5cf033f96b26f9597b32ad2732792 Mon Sep 17 00:00:00 2001
From: Mason Freed <masonfreed@chromium.org>
Date: Tue, 24 Nov 2020 00:28:55 -0800
Subject: [PATCH] Remove setInnerHTML completely

The conversation [1] about the recent changes to setInnerHTML have led
to the conclusion [2] that perhaps we shouldn't add a new XSS sink
method at all. That would "fix" the declarative Shadow DOM problem, but
would create a new sink that all security libraries would need to
know about and handle. Seems like not a good trade.

In the meantime, a polyfill can stand in for setInnerHTML:

  Element.prototype.setInnerHTML = function(content) {
    const fragment = (new DOMParser()).parseFromString(`<pre>${content}</pre>`,
       'text/html', {includeShadowRoots: true});
    this.replaceChildren(...fragment.body.firstChild.childNodes);
  };

[1] https://github.com/whatwg/dom/issues/912
[2] https://github.com/whatwg/dom/issues/912#issuecomment-732476002

Bug: 1042130
Change-Id: Ibaf15a3edf86be9a720225dea2ba2741f2882b8c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2555589
Auto-Submit: Mason Freed <masonfreed@chromium.org>
Commit-Queue: Kouhei Ueno <kouhei@chromium.org>
Reviewed-by: Kouhei Ueno <kouhei@chromium.org>
Cr-Commit-Position: refs/heads/master@{#830501}
---
 ...ative-shadow-dom-attachment.tentative.html |  3 +-
 ...eclarative-shadow-dom-basic.tentative.html | 35 +++++-------
 ...clarative-shadow-dom-opt-in.tentative.html | 57 +++++++------------
 .../declarative/setinnerhtml.tentative.html   | 48 ----------------
 shadow-dom/declarative/support/helpers.js     |  4 ++
 5 files changed, 39 insertions(+), 108 deletions(-)
 delete mode 100644 shadow-dom/declarative/setinnerhtml.tentative.html
 create mode 100644 shadow-dom/declarative/support/helpers.js

diff --git a/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html b/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html
index c4a35d341c1f68..b9033f59924223 100644
--- a/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html
+++ b/shadow-dom/declarative/declarative-shadow-dom-attachment.tentative.html
@@ -5,6 +5,7 @@
 <script src='/resources/testharness.js'></script>
 <script src='/resources/testharnessreport.js'></script>
 <script src='../resources/shadow-dom-utils.js'></script>
+<script src="support/helpers.js"></script>
 
 <script>
 const shadowContent = '<span>Shadow tree</span><slot></slot>';
@@ -18,7 +19,7 @@
   const declarativeString = `<${elementType} id=theelement>${getDeclarativeContent(mode, delegatesFocus)}
      <span class='lightdom'>${lightDomTextContent}</span></${elementType}>`;
   const wrapper = document.createElement('div');
-  wrapper.setInnerHTML(declarativeString, {includeShadowRoots: true});
+  setInnerHTML(wrapper, declarativeString);
   const element = wrapper.querySelector('#theelement');
   return {wrapper: wrapper, element: element};
 }
diff --git a/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html b/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html
index 6e3c16a9d82dfa..a03743e44ffda0 100644
--- a/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html
+++ b/shadow-dom/declarative/declarative-shadow-dom-basic.tentative.html
@@ -5,6 +5,7 @@
 <link rel="help" href="https://github.com/whatwg/dom/issues/831">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src="support/helpers.js"></script>
 
 <div id="host" style="display:none">
   <template shadowroot="open">
@@ -32,14 +33,14 @@
 
 test(() => {
   const div = document.createElement('div');
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="open">
         <slot id="s1" name="slot1"></slot>
       </template>
       <div id="c1" slot="slot1"></div>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   const host = div.querySelector('#host');
   const c1 = host.querySelector('#c1');
   assert_true(!!c1);
@@ -53,12 +54,12 @@
 
 test(() => {
   const div = document.createElement('div');
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="invalid">
       </template>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   const host = div.querySelector('#host');
   assert_equals(host.shadowRoot, null, "Shadow root was found");
   const tmpl = host.querySelector('template');
@@ -69,12 +70,12 @@
 
 test(() => {
   const div = document.createElement('div');
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="closed">
       </template>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   const host = div.querySelector('#host');
   assert_equals(host.shadowRoot, null, "Closed shadow root");
   assert_equals(host.querySelector('template'), null, "No template - converted to shadow root");
@@ -82,12 +83,12 @@
 
 test(() => {
   const div = document.createElement('div');
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="open">
         <slot id="s1" name="slot1"></slot>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   const host = div.querySelector('#host');
   assert_equals(host.querySelector('#s1'), null, "Should be inside shadow root");
   assert_equals(host.querySelector('template'), null, "No leftover template node");
@@ -98,35 +99,25 @@
 
 test(() => {
   const div = document.createElement('div');
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="open" shadowrootdelegatesfocus>
       </template>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   var host = div.querySelector('#host');
   assert_true(!!host.shadowRoot,"No shadow root found");
   assert_true(host.shadowRoot.delegatesFocus,"delegatesFocus should be true");
-  div.setInnerHTML(`
+  setInnerHTML(div,`
     <div id="host">
       <template shadowroot="open">
       </template>
     </div>
-    `, {includeShadowRoots: true});
+    `);
   host = div.querySelector('#host');
   assert_true(!!host.shadowRoot,"No shadow root found");
   assert_false(host.shadowRoot.delegatesFocus,"delegatesFocus should be false without the shadowrootdelegatesfocus attribute");
 }, 'Declarative Shadow DOM: delegates focus attribute');
-
-test(() => {
-  const host = document.createElement('div');
-  // Root element of setInnerHTML is a <template shadowroot>:
-  host.setInnerHTML('<template shadowroot=open></template>', {allowShadowRoot: true});
-  assert_equals(host.shadowRoot, null, "Shadow root should not be present");
-  const tmpl = host.querySelector('template');
-  assert_true(!!tmpl,"Template should still be present");
-  assert_equals(tmpl.getAttribute('shadowroot'),"open","'shadowroot' attribute should still be present");
-}, 'Declarative Shadow DOM: setInnerHTML root element');
 </script>
 
 <div id="multi-host" style="display:none">
diff --git a/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html b/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html
index 2d6bf5f3f2d909..d1fd9fc448a220 100644
--- a/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html
+++ b/shadow-dom/declarative/declarative-shadow-dom-opt-in.tentative.html
@@ -5,6 +5,7 @@
 <link rel="help" href="https://github.com/whatwg/dom/issues/831">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
+<script src='../resources/shadow-dom-utils.js'></script>
 
 <body>
 <style>
@@ -58,56 +59,40 @@
   assert_dsd(div,true);
 }, 'Non-fragment parsing needs no opt-in');
 
-test(() => {
-  const div = document.createElement('div');
-  div.innerHTML = content;
-  assert_dsd(div,false);
-}, 'innerHTML on element - disallowed');
-
-test(() => {
-  const div = document.createElement('div');
-  div.setInnerHTML(content);
-  assert_dsd(div,false);
-  div.setInnerHTML(content, {includeShadowRoots: false});
-  assert_dsd(div,false);
-  div.setInnerHTML(content, {includeShadowRoots: true});
-  assert_dsd(div,true);
-}, 'setInnerHTML on element');
-
-test(() => {
-  const templateContent = `<template id=tmpl>${content}</template>`;
-  const div = document.createElement('div');
-  div.innerHTML = templateContent;
-  assert_dsd(div.querySelector('#tmpl').content,false);
-  div.setInnerHTML(templateContent, {includeShadowRoots: true});
-  assert_dsd(div.querySelector('#tmpl').content,true);
-}, 'setInnerHTML on element, with nested template content');
+const noChildElements = ['iframe','noscript','script','select','style','textarea','title','colgroup'];
+const elements = HTML5_ELEMENT_NAMES.filter(el => !noChildElements.includes(el));
+for (let elementName of elements) {
+  var t = test(function() {
+    const el1 = document.createElement(elementName);
+    el1.innerHTML = content;
+    assert_dsd(el1,false);
+
+    const templateContent = `<template id=tmpl>${content}</template>`;
+    const el2 = document.createElement('div');
+    el2.innerHTML = templateContent;
+    assert_dsd(el2.querySelector('#tmpl').content,false);
+  }, `innerHTML on a <${elementName}>`);
+}
 
 test(() => {
   const temp = document.createElement('template');
   temp.innerHTML = content;
   assert_dsd(temp.content,false, 'innerHTML should not allow declarative shadow content');
-  temp.setInnerHTML(content, {includeShadowRoots: true});
-  assert_dsd(temp.content,true, 'setInnerHTML should allow declarative shadow content if enabled');
-}, 'setInnerHTML on template');
+}, 'innerHTML on template');
 
 test(() => {
   const templateContent = `<template id=tmpl>${content}</template>`;
   const temp = document.createElement('template');
   temp.innerHTML = templateContent;
   assert_dsd(temp.content.querySelector('#tmpl').content,false);
-  temp.setInnerHTML(templateContent, {includeShadowRoots: true});
-  assert_dsd(temp.content.querySelector('#tmpl').content,true);
-}, 'setInnerHTML on template, with nested template content');
+}, 'innerHTML on template, with nested template content');
 
 test(() => {
   const div = document.createElement('div');
   const shadow = div.attachShadow({mode: 'open'});
   shadow.innerHTML = content;
   assert_dsd(shadow,false);
-  shadow.setInnerHTML(content, {includeShadowRoots: true});
-  assert_dsd(shadow,true);
-}, 'setInnerHTML on shadowRoot');
+}, 'innerHTML on shadowRoot');
 
 test(() => {
   const parser = new DOMParser();
@@ -123,9 +108,7 @@
   const doc = document.implementation.createHTMLDocument('');
   doc.body.innerHTML = content;
   assert_dsd(doc.body,false);
-  doc.body.setInnerHTML(content, {includeShadowRoots: true});
-  assert_dsd(doc.body,true);
-}, 'createHTMLDocument with setInnerHTML');
+}, 'createHTMLDocument with innerHTML - not supported');
 
 test(() => {
   const doc = document.implementation.createHTMLDocument('');
@@ -145,7 +128,7 @@
   client.open("GET", `data:text/html,${content}`);
   client.responseType = 'document';
   client.send();
-}, 'XMLHttpRequest, disabled');
+}, 'XMLHttpRequest - not supported');
 
 test(() => {
   const div = document.createElement('div');
diff --git a/shadow-dom/declarative/setinnerhtml.tentative.html b/shadow-dom/declarative/setinnerhtml.tentative.html
deleted file mode 100644
index c65bf04a06c973..00000000000000
--- a/shadow-dom/declarative/setinnerhtml.tentative.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<title>getInnerHTML </title>
-<link rel='author' title='Mason Freed' href='mailto:masonfreed@chromium.org'>
-<link rel='help' href='https://github.com/whatwg/dom/issues/831'>
-<script src='/resources/testharness.js'></script>
-<script src='/resources/testharnessreport.js'></script>
-<script src='../resources/shadow-dom-utils.js'></script>
-
-<body>
-<script>
-function testElementType(allowsShadowDom, elementType, applyToShadow) {
-  const t = test(t => {
-    // Create and attach element
-    let wrapper;
-    if (applyToShadow) {
-      const host = document.createElement('div');
-      t.add_cleanup(function() { host.remove(); });
-      document.body.appendChild(host);
-      wrapper = host.attachShadow({mode: 'open'});
-    } else {
-      wrapper = document.createElement('div');
-      t.add_cleanup(function() { wrapper.remove(); });
-      document.body.appendChild(wrapper);
-    }
-    const html = `<${elementType}><template shadowroot="open"><slot></slot></template><span></span></${elementType}>`;
-    wrapper.setInnerHTML(html, {includeShadowRoots: true});
-    if (allowsShadowDom) {
-      // Retrieve shadow root
-      assert_true(!!wrapper.firstElementChild.shadowRoot,'No shadow root found');
-    } else {
-      const leftover = wrapper.firstElementChild.firstElementChild;
-      assert_true(wrapper.firstElementChild.childElementCount == 0 || leftover instanceof HTMLTemplateElement,'Template should be left over (or no children)');
-    }
-  }, `${applyToShadow ? 'ShadowRoot' : 'Element'}.setInnerHTML() on <${elementType}>${allowsShadowDom ? `, with declarative Shadow DOM.` : ''}`);
-}
-
-function runAllTests() {
-  const allElements = [...HTML5_ELEMENT_NAMES, 'htmlunknown'].filter(item => item !== 'body');
-  const safelisted = ATTACHSHADOW_SAFELISTED_ELEMENTS;
-  for (const elementName of allElements) {
-    for (const applyToShadow of [false, true]) {
-      testElementType(safelisted.includes(elementName), elementName, applyToShadow);
-    }
-  }
-}
-
-runAllTests();
-</script>
diff --git a/shadow-dom/declarative/support/helpers.js b/shadow-dom/declarative/support/helpers.js
new file mode 100644
index 00000000000000..70808e8db7b11d
--- /dev/null
+++ b/shadow-dom/declarative/support/helpers.js
@@ -0,0 +1,4 @@
+function setInnerHTML(el,content) {
+  const fragment = (new DOMParser()).parseFromString(`<pre>${content}</pre>`, 'text/html', {includeShadowRoots: true});
+  el.replaceChildren(...fragment.body.firstChild.childNodes);
+}