jQuery Core 3.5 Upgrade Guide


link jQuery.htmlPrefilter changes

link A workaround

If you want to upgrade to jQuery 3.5.0 or newer and don't have time to deal with breaking changes at the moment and you use jQuery Migrate 3.2.0 or newer, you can revert to the previous behavior by invoking:

1
jQuery.UNSAFE_restoreLegacyHtmlPrefilter();

If you don't use jQuery Migrate, don't add it just for this one workaround. Instead, you can revert to the previous behavior by redefining jQuery.htmlPrefilter after loading jQuery:

1
2
3
4
var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi;
jQuery.htmlPrefilter = function( html ) {
return html.replace( rxhtmlTag, "<$1></$2>" );
};

Note that if you do this, you lose the jQuery 3.5.0 security fix and you have to be more careful with what HTML you pass to jQuery manipulation methods; regular HTML sanitizing will not be enough. Some security libraries have special sanitization settings for jQuery. For example, DOMPurify has a SAFE_FOR_JQUERY flag:

1
2
var sanitizedHtml = DOMPurify.sanitize( unsafeHtml, { SAFE_FOR_JQUERY: true } );
elem.html( sanitizedHtml );

link Description of the change

jQuery.htmlPrefilter modifies and filters HTML strings passed through jQuery manipulation methods. The default value of this function in jQueries older than 3.5.0 used to replace XHTML-like tags with versions that work in HTML. For example, previously the following:

1
jQuery( "<div/><span/>" );

would create the following structure:

1
2
<div></div>
<span></span>

because <div/> was replaced with <div></div> & <span/> with <span></span>.

jQuery 3.5.0 has changed jQuery.htmlPrefilter to be an identity function. That means that the above jQuery call would now create above HTML structure only in XML mode of HTML (called also as XHTML) but in regular HTML mode you would now get:

1
2
3
<div>
<span></span>
</div>

To avoid this, don't use self-closing tags for tags that may have content unless your page runs in XHTML mode. Make sure you're sending a correct mime type: application/xhtml+xml; otherwise, your page will really run in HTML mode.

If you're writing a library and you want it to work both in HTML & XHTML modes, remember to use self-closing tags for empty elements, i.e. ones that don't have closing tags in HTML. For example, instead of:

1
jQuery( "<div/><img/>" );

do this:

1
jQuery( "<div></div><img/>" );