sanitizer-api/element-set-sanitized-html.https.tentative.html

<!DOCTYPE html>
<html>
<head>
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="support/testcases.sub.js"></script>
</head>
<body>
<script>
  function buildNode(element_name, markup) {
    const e = document.createElement(element_name);
    e.innerHTML = markup;
    return e;
  }

  function assert_node_equals(node1, node2) {
    assert_true(node1 instanceof Node && node1.isEqualNode(node2),
        `Node[${node1.innerHTML}] == Node[${node2.innerHTML}]`);
  }

  for (const context of ["script", "iframe", "object", "div"]) {
    const should_fail = context != "div";
    test(t => {
      let elem = document.createElement(context);
      let probe_fn = _ => elem.setHTML("<div>Hello!</div>", new Sanitizer());
      if (should_fail) {
        assert_throws_js(TypeError, probe_fn);
      } else {
        probe_fn();
      }
      assert_equals(should_fail, !elem.firstChild);
    }, `${context}.setHTML should ${should_fail ? "fail" : "pass"}.`);
  }

  for(const context of ["div", "template", "table"]) {
    const elem1 = document.createElement(context);
    const elem2 = document.createElement(context);
    for (const probe of ["<em>Hello</em>", "<td>data</td>"]) {
      elem1.setHTML(probe, new Sanitizer());
      elem2.innerHTML = probe;
      test(t => {
        assert_node_equals(elem2, elem1);
      }, `Sanitizer: <${context}>.setHTML("${probe}", ...) obeys parse context.`);
    }
  }

  for (const testcase of testcases) {
    const element = document.createElement("template");
    test(t => {
      let s = new Sanitizer(testcase.config_input);
      element.setHTML(testcase.value, {sanitizer: s });
      assert_node_equals(buildNode(element.localName, testcase.result), element);
    }, "Sanitizer: Element.setHTML with config: " + testcase.message);
  }

  [
    undefined,
    {},
    { sanitizer: new Sanitizer() },
    { sanitizer: undefined },
    { avocado: new Sanitizer() },
  ].forEach((options, index) => {
    test(t => {
      const e = document.createElement("div");
      e.setHTML("<em>bla</em><script>bla<" + "/script>", options);
      assert_equals(e.innerHTML, "<em>bla</em>");
    }, `Sanitizer: Element.setHTML options dictionary #${index} uses default.`);
  });

  [
    "tomato",
    { sanitizer: null },
    { sanitizer: "avocado" },
    { sanitizer: { allowElements: [ "a", "b", "c" ] } },
  ].forEach((options, index) => {
    test(t => {
      assert_throws_js(TypeError, _ => {
        document.createElement("div").setHTML("bla", options);
      });
    }, `Sanitizer: Element.setHTML invalid options dictionary #${index}`);
  });

  test(t => {
    const sanitizer = new Sanitizer({allowElements: ["b"]});
    const element = document.createElement("div");

    // WebIDL magic: An IDL dictionary is mapped to a JS object. Thus, a plain
    // Sanitizer instance will be accepted as an options dictionary. However,
    // it will then try to read the .sanitizer property of the Sanitizer, and
    // since that doesn't usually exist will treat it as an empty dictionary.
    //
    // Ref: https://webidl.spec.whatwg.org/#es-dictionary

    // Sanitizer instance in the dictionary: Config is applied.
    element.setHTML("<em>celery</em>", {sanitizer: sanitizer});
    assert_equals(element.innerHTML, "celery");

    // Same Sanitizer instance, passed directly: Is like an empty dictionary
    // and config is not applied.
    element.setHTML("<em>celery</em>", sanitizer);
    assert_equals(element.innerHTML, "<em>celery</em>");

    // Sanitizer-ception: Set the Sanitizer as the .sanitizer property on itself.
    // Now the config is applied. It's magic. Just not the good kind of magic.
    sanitizer.sanitizer = sanitizer;
    element.setHTML("<em>celery</em>", sanitizer);
    assert_equals(element.innerHTML, "celery");
  }, "Sanitizer: Element.setHTML with sanitizer instance.");
</script>
</body>
</html>