Sep 30, 2021 · May 25, 2020 · Sep 29, 2021 · Sep 29, 2021 · Sep 10, 2021 · Sep 10, 2021
diff --git a/test/data/trusted-html.html b/test/data/trusted-html.html
 <script src="../../dist/jquery.min.js"></script>
 <script src="iframeTest.js"></script>
 <script>
 if ( typeof trustedTypes === "undefined" ) {
 startIframeTest( [ {
 actual: "",
 expected: "trustedTypes support",
 message: "trustedTypes supported"
 } ] );
 throw new Error( "No trustedTypes support; this test should be skipped" );
 }

 var i, input, elem, tags,
 var i, input, elem, tags, policy,
 results = [],
 policy = trustedTypes.createPolicy( "jquery-test-policy", {
 createHTML: function( html ) {
 return html;
 }
 } ),
 inputs = [
 [ "<div></div>", "<div class='test'></div>", [ "div" ] ],
 [ "<div></div>", "<div class='test'></div><span class='test'></span>",
 [ "<select></select>", "<option class='test'></option>", [ "option" ] ]
 ];

 for ( i = 0; i < inputs.length; i++ ) {
 input = inputs[ i ];
 elem = jQuery( policy.createHTML( input[ 0 ] ) );
 elem.append( policy.createHTML( input[ 1 ] ) );
 tags = elem.find( ".test" ).toArray().map( function( node ) {
 return node.nodeName.toLowerCase();
 } );
 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:tags,
 expected:input[ 2 ],
 message:input[ 2 ].join( ", " )
 actual:elem.html(),
 expected:"text content",
 message:messagePrefix + ": text content properly appended"
 } );
 }

 elem = jQuery( policy.createHTML( "<div></div>" ) );
 elem.append( policy.createHTML( "text content" ) );
 results.push( {
 actual: elem.html(),
 expected: "text content",
 message: "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>
diff --git a/test/unit/manipulation.js b/test/unit/manipulation.js
 });

 // Test trustedTypes support in browsers where they're supported (currently Chrome 83+).
 // Browsers with no TrustedHTML support still run tests on object wrappers with
 // a proper `toString` function.
 testIframe(
 "Basic TrustedHTML support (gh-4409)",
 "mock.php?action=trustedHtml",
 function(assert,jQuery,window,document,test){

 assert.expect(5);

 test.forEach(function(result){
 assert.deepEqual(result.actual,result.expected,result.message);
 });
 },
 typeoftrustedTypes==="undefined" ?QUnit.skip :QUnit.test
 }
 );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -9,22 +9,8 @@
		<script src="../../dist/jquery.min.js"></script>
		<script src="iframeTest.js"></script>
		<script>
		if ( typeof trustedTypes === "undefined" ) {
		startIframeTest( [ {
		actual: "",
		expected: "trustedTypes support",
		message: "trustedTypes supported"
		} ] );
		throw new Error( "No trustedTypes support; this test should be skipped" );
		}

		var i, input, elem, tags,
		var i, input, elem, tags, policy,
		results = [],
		policy = trustedTypes.createPolicy( "jquery-test-policy", {
		createHTML: function( html ) {
		return html;
		}
		} ),
		inputs = [
		[ "<div></div>", "<div class='test'></div>", [ "div" ] ],
Copy link kotoSep 10, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Does it make sense to also add a test for`TrustedHTML`s that wrap over a non-obvious HTML, e.g. just some text? From what I can tell, different branches are used then. Copy link MemberAuthor mgolSep 10, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Yes, good point. That will only apply to the second array items as the first ones are passed directly to`jQuery` which also supports selectors - and since for TrustedHTML we cannot carve out a part of an input string to later parse, I opted to restrict support for TrustedHTML-wrapped strings to ones that are start with`<` and end with`>` - i.e. what was already going through the fast path skipping the regex match. Copy link kotoSep 10, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. So, I assume that`TrustedHTML` wrapping`something` will just get stringified somewhere and be treated as a selector? That's OK, I don't think there would be expectations for jQuery to do anything else. I think it just makes sense to have an explicit test for that behavior. Copy link MemberAuthor mgolSep 10, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. @koto It would actually just create a jQuery wrapper with a single element being this TrustedHTML instance, i.e. it would treat it like any other non-DOM object. I just didn't handle it in any special way and let it go where it goes naturally in the current flow. Copy link MemberAuthor mgolSep 10, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. To be clear, this limitation only applies to (pseudo-code)`jQuery(TrustedHTML('foo'))`;`jQuery(document.body).append(TrustedHTML('foo'))` should append the text`foo` just as without wrapping in TrustedHTML; I'll add a test for that. Copy link kotoSep 11, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Oh, I forgot abouthttps://api.jquery.com/jQuery/#jQuery-object behavior :) Yeah, that's fine, thanks for clarifying. Copy link MemberAuthor mgolSep 13, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. I added one test case for text content. I haven't added one for the object wrapper as I'm not sure if we want this to be a part of the contract. Copy link kotoSep 13, 2021 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Sounds good!
		[ "<div></div>", "<div class='test'></div><span class='test'></span>",
Expand All		@@ -33,27 +19,55 @@
		[ "<select></select>", "<option class='test'></option>", [ "option" ] ]
		];

		for ( i = 0; i < inputs.length; i++ ) {
		input = inputs[ i ];
		elem = jQuery( policy.createHTML( input[ 0 ] ) );
		elem.append( policy.createHTML( input[ 1 ] ) );
		tags = elem.find( ".test" ).toArray().map( function( node ) {
		return node.nodeName.toLowerCase();
		} );
		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:tags,
		expected:input[ 2 ],
		message:input[ 2 ].join( ", " )
		actual:elem.html(),
		expected:"text content",
		message:messagePrefix + ": text content properly appended"
		} );
		}

		elem = jQuery( policy.createHTML( "<div></div>" ) );
		elem.append( policy.createHTML( "text content" ) );
		results.push( {
		actual: elem.html(),
		expected: "text content",
		message: "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>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3010,15 +3010,17 @@ QUnit.test( "Works with invalid attempts to close the table wrapper", function(
		});

		// Test trustedTypes support in browsers where they're supported (currently Chrome 83+).
		// Browsers with no TrustedHTML support still run tests on object wrappers with
		// a proper `toString` function.
		testIframe(
		"Basic TrustedHTML support (gh-4409)",
		"mock.php?action=trustedHtml",
		function(assert,jQuery,window,document,test){

		assert.expect(5);

		test.forEach(function(result){
		assert.deepEqual(result.actual,result.expected,result.message);
		});
		},
		typeoftrustedTypes==="undefined" ?QUnit.skip :QUnit.test
		}
		);