Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Core:Manipulation: Add basic TrustedHTML support#4927

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
mgol merged 2 commits intojquery:mainfrommgol:trusted-html
Sep 30, 2021
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 1 addition & 15 deletionssrc/core.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -10,9 +10,8 @@ import hasOwn from "./var/hasOwn.js";
import fnToString from "./var/fnToString.js";
import ObjectFunctionString from "./var/ObjectFunctionString.js";
import support from "./var/support.js";
importisWindow from "./var/isWindow.js";
importisArrayLike from "./core/isArrayLike.js";
import DOMEval from "./core/DOMEval.js";
import toType from "./core/toType.js";

var version = "@VERSION",

Expand DownExpand Up@@ -398,17 +397,4 @@ jQuery.each( "Boolean Number String Function Array Date RegExp Object Error Symb
class2type[ "[object " + name + "]" ] = name.toLowerCase();
} );

function isArrayLike( obj ) {

var length = !!obj && obj.length,
type = toType( obj );

if ( typeof obj === "function" || isWindow( obj ) ) {
return false;
}

return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

export default jQuery;
54 changes: 30 additions & 24 deletionssrc/core/init.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,6 +2,7 @@
import jQuery from "../core.js";
import document from "../var/document.js";
import rsingleTag from "./var/rsingleTag.js";
import isObviousHtml from "./isObviousHtml.js";

import "../traversing/findFilter.js";

Expand All@@ -26,20 +27,41 @@ var rootjQuery,
// so migrate can support jQuery.sub (gh-2101)
root = root || rootjQuery;

// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector[ 0 ] === "<" &&
selector[ selector.length - 1 ] === ">" &&
selector.length >= 3 ) {
// HANDLE: $(DOMElement)
if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;

// HANDLE: $(function)
// Shortcut for document ready
} else if ( typeof selector === "function" ) {
return root.ready !== undefined ?
root.ready( selector ) :

// Execute immediately if ready is not present
selector( jQuery );

} else {

// Assume that strings that start and end with <> are HTML and skip the regex check
// Handle obvious HTML strings
match = selector + "";
if ( isObviousHtml( match ) ) {

// Assume that strings that start and end with <> are HTML and skip
// the regex check. This also handles browser-supported HTML wrappers
// like TrustedHTML.
match = [ null, selector, null ];

} else {
// Handle HTML strings or selectors
} else if ( typeof selector === "string" ) {
match = rquickExpr.exec( selector );
} else {
return jQuery.makeArray( selector, this );
}

// Match html or make sure no context is specified for #id
// Note: match[1] may be a string or a TrustedHTML wrapper
if ( match && ( match[ 1 ] || !context ) ) {

// HANDLE: $(html) -> $(array)
Expand DownExpand Up@@ -84,7 +106,7 @@ var rootjQuery,
return this;
}

// HANDLE: $(expr, $(...))
// HANDLE: $(expr) & $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || root ).find( selector );

Expand All@@ -93,24 +115,8 @@ var rootjQuery,
} else {
return this.constructor( context ).find( selector );
}

// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this[ 0 ] = selector;
this.length = 1;
return this;

// HANDLE: $(function)
// Shortcut for document ready
} else if ( typeof selector === "function" ) {
return root.ready !== undefined ?
root.ready( selector ) :

// Execute immediately if ready is not present
selector( jQuery );
}

return jQuery.makeArray( selector, this );
};

// Give the init function the jQuery prototype for later instantiation
Expand Down
17 changes: 17 additions & 0 deletionssrc/core/isArrayLike.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
import toType from "./toType.js";
import isWindow from "../var/isWindow.js";

function isArrayLike( obj ) {

var length = !!obj && obj.length,
type = toType( obj );

if ( typeof obj === "function" || isWindow( obj ) ) {
return false;
}

return type === "array" || length === 0 ||
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
}

export default isArrayLike;
7 changes: 7 additions & 0 deletionssrc/core/isObviousHtml.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
function isObviousHtml( input ) {
return input[ 0 ] === "<" &&
input[ input.length - 1 ] === ">" &&
input.length >= 3;
}

export default isObviousHtml;
5 changes: 3 additions & 2 deletionssrc/core/parseHTML.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -2,13 +2,14 @@ import jQuery from "../core.js";
import document from "../var/document.js";
import rsingleTag from "./var/rsingleTag.js";
import buildFragment from "../manipulation/buildFragment.js";
import isObviousHtml from "./isObviousHtml.js";

// Argument "data" should be string of html
// Argument "data" should be string of html or a TrustedHTML wrapper of obvious HTML
// context (optional): If specified, the fragment will be created in this context,
// defaults to document
// keepScripts (optional): If true, will include scripts passed in the html string
jQuery.parseHTML = function( data, context, keepScripts ) {
if ( typeof data !== "string" ) {
if ( typeof data !== "string"&& !isObviousHtml( data + "" )) {
return [];
}
if ( typeof context === "boolean" ) {
Expand Down
3 changes: 2 additions & 1 deletionsrc/manipulation/buildFragment.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import rscriptType from "./var/rscriptType.js";
import wrapMap from "./wrapMap.js";
import getAll from "./getAll.js";
import setGlobalEval from "./setGlobalEval.js";
import isArrayLike from "../core/isArrayLike.js";

var rhtml = /<|&#?\w+;/;

Expand All@@ -23,7 +24,7 @@ function buildFragment( elems, context, scripts, selection, ignored ) {
if ( elem || elem === 0 ) {

// Add nodes directly
if ( toType( elem ) === "object" ) {
if ( toType( elem ) === "object"&& ( elem.nodeType || isArrayLike( elem ) )) {
jQuery.merge( nodes, elem.nodeType ? [ elem ] : elem );

// Convert non-html into a text node
Expand Down
1 change: 1 addition & 0 deletionstest/.eslintrc.json
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,6 +14,7 @@
"require": false,
"Promise": false,
"Symbol": false,
"trustedTypes": false,
"QUnit": false,
"ajaxTest": false,
"testIframe": false,
Expand Down
2 changes: 1 addition & 1 deletiontest/data/csp.include.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSP Test Page</title>
<script src="../jquery.js"></script>
<script src="../../dist/jquery.min.js"></script>
<script src="iframeTest.js"></script>
<script src="support/csp.js"></script>
<script src="support/getComputedSupport.js"></script>
Expand Down
10 changes: 8 additions & 2 deletionstest/data/mock.php
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -215,7 +215,7 @@ protected function testHTML( $req ) {
}

protected function cspFrame( $req ) {
header( "Content-Security-Policy: default-src 'self'; report-uri ./mock.php?action=cspLog" );
header( "Content-Security-Policy: default-src 'self';require-trusted-types-for 'script';report-uri ./mock.php?action=cspLog" );
header( 'Content-type: text/html' );
echo file_get_contents( __DIR__ . '/csp.include.html' );
}
Expand All@@ -228,7 +228,7 @@ protected function cspNonce( $req ) {
}

protected function cspAjaxScript( $req ) {
header( "Content-Security-Policy: script-src 'self'; report-uri/base/test/data/mock.php?action=cspLog" );
header( "Content-Security-Policy: script-src 'self'; report-uri./mock.php?action=cspLog" );
header( 'Content-type: text/html' );
echo file_get_contents( __DIR__ . '/csp-ajax-script.html' );
}
Expand All@@ -241,6 +241,12 @@ protected function cspClean( $req ) {
file_put_contents( $this->cspFile, '' );
}

protected function trustedHtml( $req ) {
header( "Content-Security-Policy: require-trusted-types-for 'script'; report-uri ./mock.php?action=cspLog" );
header( 'Content-type: text/html' );
echo file_get_contents( __DIR__ . '/trusted-html.html' );
}

protected function errorWithScript( $req ) {
header( 'HTTP/1.0 404 Not Found' );
if ( isset( $req->query['withScriptContentType'] ) ) {
Expand Down
75 changes: 75 additions & 0 deletionstest/data/trusted-html.html
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
<!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" ] ],

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 forTrustedHTMLs 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

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 tojQuery 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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others.Learn more.

So, I assume thatTrustedHTML wrappingsomething 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

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

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 textfoo just as without wrapping in TrustedHTML; I'll add a test for that.

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

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.

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>",
[ "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>
10 changes: 9 additions & 1 deletiontest/middleware-mockserver.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -222,7 +222,7 @@ var mocks = {
cspFrame: function( req, resp ) {
resp.writeHead( 200, {
"Content-Type": "text/html",
"Content-Security-Policy": "default-src 'self'; report-uri /base/test/data/mock.php?action=cspLog"
"Content-Security-Policy": "default-src 'self';require-trusted-types-for 'script';report-uri /base/test/data/mock.php?action=cspLog"
} );
var body = fs.readFileSync( __dirname + "/data/csp.include.html" ).toString();
resp.end( body );
Expand DownExpand Up@@ -256,6 +256,14 @@ var mocks = {
resp.writeHead( 200 );
resp.end();
},
trustedHtml: function( req, resp ) {
resp.writeHead( 200, {
"Content-Type": "text/html",
"Content-Security-Policy": "require-trusted-types-for 'script'; report-uri /base/test/data/mock.php?action=cspLog"
} );
var body = fs.readFileSync( __dirname + "/data/trusted-html.html" ).toString();
resp.end( body );
},
errorWithScript: function( req, resp ) {
if ( req.query.withScriptContentType ) {
resp.writeHead( 404, { "Content-Type": "application/javascript" } );
Expand Down
16 changes: 16 additions & 0 deletionstest/unit/manipulation.js
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3008,3 +3008,19 @@ QUnit.test( "Works with invalid attempts to close the table wrapper", function(
assert.strictEqual( elem[ 0 ].nodeName.toLowerCase(), "td", "First element is td" );
assert.strictEqual( elem[ 1 ].nodeName.toLowerCase(), "td", "Second element is td" );
} );

// 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 );
} );
}
);

[8]ページ先頭

©2009-2025 Movatter.jp