<!DOCTYPE html>
<meta name="timeout" content="long">
<script src="/resources/testharness.js" ></script>
<script src="/resources/testharnessreport.js"></script>
<script src="support/helper.sub.js"></script>
<meta http-equiv="Content-Security-Policy" content="require-trusted-types-for 'script';">
<body>
<div id="target"></div>
<script>
const policy = trustedTypes.createPolicy("anythinggoes", {
"createHTML": x => x,
"createScript": x => x,
"createScriptURL": x => x,
});
const create_value = {
"TrustedHTML": policy.createHTML("hello"),
"TrustedScript": policy.createScript("x => x + x"),
"TrustedScriptURL": policy.createScriptURL("https://url.invalid/blubb.js"),
null: "empty",
};
// The tests will assign all values to all sink types. To prevent spurious
// errors when assigning "hello" to a script sink, we'll just define a
// varaible of that name.
const hello = "";
// We seed our elements and properties with one element/property that has no
// 'trusted type' sinks, and one non-specced (madeup) element/property.
// Also add several event handlers (onclick).
let elements = ['madeup', 'b'];
let properties = ['madeup', 'id', "onerror", "onclick"];
const types = [null, "TrustedHTML", "TrustedScript", "TrustedScriptURL"];
// Iterate one test for each combination of element, property, and sink type.
const target = document.getElementById("target");
for (elem of elements) {
for (property of properties) {
for (type of types) {
// Conceptually, our test is beautifully simple: Ask getPropertyType
// about the expected trusted type. If it's the one we're testing,
// expect the assignment to pass, and expect we can read back the same
// value. If it's a different type, expect the assignment to fail.
//
// The idealized test case would look something like this:
// const value = ....;
// const test_fn = _ => { element[property] = value };
// if (type == expected_type || !expected_type) {
// test_fn();
// assert_equals(element[property], value);
// } else {
// assert_throws_js(..., test_fn, ...);
// }
//
// Below is the same logic, but extended to handle the various edge
// cases.
//
// Some difficulties we need to accomodate:
// - Some properties have built-in behaviours. (E.g. the "innerHTML"
// value depends on whether elements are visible or not.) To
// accomodate this, we have a big switch-statement that handles
// those types of exceptions.
// - Some properties parse their values, so that you can't easily get
// the original text value back (e.g. error handlers).
// - Some properties cause actions as side-effects (e.g. loading a
// script), which will cause errors in the test (despite the actual
// code-under-test meeting our expectations). This is handled with
// a cleanup script which removes the element (and thus cancels
// the loading actions).
test(t => {
const element = target.appendChild(document.createElement(elem));
t.add_cleanup(_ => element.remove());
const expected_type = trustedTypes.getPropertyType(elem, property);
const value = create_value[type];
const test_fn = _ => { element[property] = value; };
if (type == expected_type || !expected_type) {
test_fn();
let result_value = element[property];
switch (property) {
// Node.innerText returns the rendered text of an Element, which
// in this test case is usually empty. For this specific case,
// let's just check "textContent" instead.
// Node.innerHTML re-creates a text representation from the DOM,
// which may not always match the exact input.
case "innerText":
case "innerHTML":
result_value = element["textContent"];
break;
// Node.outerHTML replaces the node, which means the simple
// checking logic below does not work. In this case, we'll just
// return and hence skip the result comparison.
case "outerHTML":
return;
// URL-typed accessors
case "src":
if (elem == "iframe")
return;
break;
// Properties starting with "on" are usually error handlers,
// which will parse their input as a function. In this case,
// also skip the result comparison.
default:
if (property.startsWith("on")) return;
break;
}
assert_equals("" + result_value, "" + value);
} else {
assert_throws_js(TypeError, test_fn, "throws");
}
}, `Test assignment of ${type ? type : "string"} on ${elem}.${property}`);
// And once more, for attributes.
test(t => {
const element = target.appendChild(document.createElement(elem));
t.add_cleanup(_ => element.remove());
const expected_type = trustedTypes.getAttributeType(elem, property);
const value = create_value[type];
const test_fn = _ => { element.setAttribute(property, value); };
if (type == expected_type || !expected_type) {
test_fn();
assert_equals("" + element.getAttribute(property), "" + value);
} else if (elem == "script" && (property == "innerText" ||
property == "textContent" || property == "text")) {
// Due to the "slot setting" mechnanism, setting script's innerText,
// textContent and text attributes dosn't throw. So we can't use
// that in our tests.
// ref: https://w3c.github.io/trusted-types/dist/spec/#setting-slot-values
test_fn();
} else {
assert_throws_js(TypeError, test_fn, "throws");
}
}, `Test assignment of ${type ? type : "string"} on ${elem}.setAttribute(${property},..)`);
}
}
}
</script>
</body>
Codebase Browser
chromium