mirror of
https://github.com/jquery/jquery.git
synced 2024-10-05 11:34:18 +00:00
de5398a6ad
This ensures HTML wrapped in TrustedHTML can be used as an input to jQuery manipulation methods in a way that doesn't violate the `require-trusted-types-for` Content Security Policy directive. This commit builds on previous work needed for trusted types support, including gh-4642 and gh-4724. One restriction is that while any TrustedHTML wrapper should work as input for jQuery methods like `.html()` or `.append()`, for passing directly to the `jQuery` factory the string must start with `<` and end with `>`; no trailing or leading whitespaces are allowed. This is necessary as we cannot parse out a part of the input for further construction; that would violate the CSP rule - and that's what's done to HTML input not matching these constraints. No trusted types API is used explicitly in source; the majority of the work is ensuring we don't pass the input converted to string to APIs that would eventually assign it to `innerHTML`. This extra cautiousness is caused by the API being Blink-only, at least for now. The ban on passing strings to `innerHTML` means support tests relying on such assignments are impossible. We don't currently have such tests on the `main` branch but we used to have many of them in the 3.x & older lines. If there's a need to re-add such a test, we'll need an escape hatch to skip them for apps needing CSP-enforced TrustedHTML. See https://web.dev/trusted-types/ for more information about TrustedHTML. Fixes gh-4409 Closes gh-4927 Ref gh-4642 Ref gh-4724
76 lines
2.1 KiB
HTML
76 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset=utf-8 />
|
|
<title>body</title>
|
|
</head>
|
|
<body>
|
|
<div id="qunit-fixture"></div>
|
|
<script src="../../dist/jquery.min.js"></script>
|
|
<script src="iframeTest.js"></script>
|
|
<script>
|
|
var i, input, elem, tags, policy,
|
|
results = [],
|
|
inputs = [
|
|
[ "<div></div>", "<div class='test'></div>", [ "div" ] ],
|
|
[ "<div></div>", "<div class='test'></div><span class='test'></span>",
|
|
[ "div", "span" ] ],
|
|
[ "<table></table>", "<td class='test'></td>", [ "td" ] ],
|
|
[ "<select></select>", "<option class='test'></option>", [ "option" ] ]
|
|
];
|
|
|
|
function runTests( messagePrefix, getHtmlWrapper ) {
|
|
for ( i = 0; i < inputs.length; i++ ) {
|
|
input = inputs[ i ];
|
|
elem = jQuery( getHtmlWrapper( input[ 0 ] ) );
|
|
elem.append( getHtmlWrapper( input[ 1 ] ) );
|
|
tags = elem.find( ".test" ).toArray().map( function( node ) {
|
|
return node.nodeName.toLowerCase();
|
|
} );
|
|
results.push( {
|
|
actual: tags,
|
|
expected: input[ 2 ],
|
|
message: messagePrefix + ": " + input[ 2 ].join( ", " )
|
|
} );
|
|
}
|
|
|
|
elem = jQuery( getHtmlWrapper( "<div></div>" ) );
|
|
elem.append( getHtmlWrapper( "text content" ) );
|
|
results.push( {
|
|
actual: elem.html(),
|
|
expected: "text content",
|
|
message: messagePrefix + ": text content properly appended"
|
|
} );
|
|
}
|
|
|
|
if ( typeof trustedTypes !== "undefined" ) {
|
|
policy = trustedTypes.createPolicy( "jquery-test-policy", {
|
|
createHTML: function( html ) {
|
|
return html;
|
|
}
|
|
} );
|
|
|
|
runTests( "TrustedHTML", function wrapInTrustedHtml( input ) {
|
|
return policy.createHTML( input );
|
|
} );
|
|
} else {
|
|
|
|
// No TrustedHTML support so let's at least run tests with object wrappers
|
|
// with a proper `toString` function. This also shows that jQuery support
|
|
// of TrustedHTML is generic and would work with similar APIs out of the box
|
|
// as well. Ideally, we'd run these tests in browsers with TrustedHTML support
|
|
// as well but due to the CSP TrustedHTML enforcement these tests would fail.
|
|
runTests( "Object wrapper", function( input ) {
|
|
return {
|
|
toString: function toString() {
|
|
return input;
|
|
}
|
|
};
|
|
} );
|
|
}
|
|
|
|
startIframeTest( results );
|
|
</script>
|
|
</body>
|
|
</html>
|