|
| 1 | +<script>{ |
| 2 | + "title": "jQuery Core 3.5 Upgrade Guide" |
| 3 | +}</script> |
| 4 | + |
| 5 | +## jQuery.htmlPrefilter changes |
| 6 | + |
| 7 | +### A workaround |
| 8 | + |
| 9 | +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: |
| 10 | +```js |
| 11 | +jQuery.UNSAFE_restoreLegacyHtmlPrefilter(); |
| 12 | +``` |
| 13 | + |
| 14 | +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: |
| 15 | +```js |
| 16 | +var rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^\/\0>\x20\t\r\n\f]*)[^>]*)\/>/gi; |
| 17 | +jQuery.htmlPrefilter = function( html ) { |
| 18 | + return html.replace( rxhtmlTag, "<$1></$2>" ); |
| 19 | +}; |
| 20 | +``` |
| 21 | + |
| 22 | +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](https://github.com/cure53/DOMPurify) has a `SAFE_FOR_JQUERY` flag: |
| 23 | +```js |
| 24 | +var sanitizedHtml = DOMPurify.sanitize( unsafeHtml, { SAFE_FOR_JQUERY: true } ); |
| 25 | +elem.html( sanitizedHtml ); |
| 26 | +``` |
| 27 | + |
| 28 | +### Description of the change |
| 29 | + |
| 30 | +`jQuery.htmlPrefilter` modifies and filters HTML strings passed through [jQuery manipulation methods](/category/manipulation/). 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: |
| 31 | +```js |
| 32 | +jQuery( "<div/><span/>" ); |
| 33 | +``` |
| 34 | +would create the following structure: |
| 35 | +```html |
| 36 | +<div></div> |
| 37 | +<span></span> |
| 38 | +``` |
| 39 | +because `<div/>` was replaced with `<div></div>` & `<span/>` with `<span></span>`. |
| 40 | + |
| 41 | +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: |
| 42 | +```html |
| 43 | +<div> |
| 44 | + <span></span> |
| 45 | +</div> |
| 46 | +``` |
| 47 | + |
| 48 | +To avoid this, don't use self-closing tags for tags that may have content unless you 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. |
| 49 | + |
| 50 | +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: |
| 51 | +```js |
| 52 | +jQuery( "<div/><img/>" ); |
| 53 | +``` |
| 54 | +do this: |
| 55 | +```js |
| 56 | +jQuery( "<div></div><img/>" ); |
| 57 | +``` |
0 commit comments