From a2e9f39aceb610beb1a4e660d277e9f6f9475036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Go=C5=82=C4=99biowski-Owczarek?= Date: Wed, 18 Mar 2020 14:01:34 +0100 Subject: [PATCH] Add an upgrade guide for jQuery 3.5.0 --- pages/download.md | 2 +- pages/upgrade-guide.md | 2 ++ pages/upgrade-guide/3.0.md | 4 --- pages/upgrade-guide/3.5.md | 57 ++++++++++++++++++++++++++++++++++++++ 4 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 pages/upgrade-guide/3.5.md diff --git a/pages/download.md b/pages/download.md index 4e87ce3..70a1728 100644 --- a/pages/download.md +++ b/pages/download.md @@ -16,7 +16,7 @@ To locally download these files, right-click the link and select "Save as..." fr ### jQuery -For help when upgrading jQuery, please see the [upgrade guide](https://jquery.com/upgrade-guide/) most relevant to your version. +For help when upgrading jQuery, please see the [upgrade guide](/upgrade-guide/) most relevant to your version. We also recommend using the [jQuery Migrate plugin](https://github.com/jquery/jquery-migrate). Download the compressed, production jQuery 3.4.1 diff --git a/pages/upgrade-guide.md b/pages/upgrade-guide.md index aea9883..6cb4e49 100644 --- a/pages/upgrade-guide.md +++ b/pages/upgrade-guide.md @@ -3,6 +3,8 @@ "noHeadingLinks": true } +## [3.5 Upgrade Guide](/upgrade-guide/3.5/) + ## [3.0 Upgrade Guide](/upgrade-guide/3.0/) ## [1.9 Upgrade Guide](/upgrade-guide/1.9/) diff --git a/pages/upgrade-guide/3.0.md b/pages/upgrade-guide/3.0.md index 98f33ce..8514232 100644 --- a/pages/upgrade-guide/3.0.md +++ b/pages/upgrade-guide/3.0.md @@ -3,10 +3,6 @@ "toc": true } - - -# jQuery Core 3.0 Upgrade Guide - ## Overview With the major version of 3.0, the jQuery Core team has taken the opportunity to make changes to clean up the API and fix bugs that may prove to be breaking changes for some code. This includes the removal of previously deprecated public APIs, changes to or removal of undocumented APIs, and changes to the documented or undocumented behavior of existing APIs for specific inputs. diff --git a/pages/upgrade-guide/3.5.md b/pages/upgrade-guide/3.5.md new file mode 100644 index 0000000..3c6cd74 --- /dev/null +++ b/pages/upgrade-guide/3.5.md @@ -0,0 +1,57 @@ + + +## jQuery.htmlPrefilter changes + +### 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: +```js +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: +```js +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>" ); +}; +``` + +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: +```js +var sanitizedHtml = DOMPurify.sanitize( unsafeHtml, { SAFE_FOR_JQUERY: true } ); +elem.html( sanitizedHtml ); +``` + +### Description of the change + +`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: +```js +jQuery( "
" ); +``` +would create the following structure: +```html +
+ +``` +because `
` was replaced with `
` & `` with ``. + +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: +```html +
+ +
+``` + +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. + +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: +```js +jQuery( "
" ); +``` +do this: +```js +jQuery( "
" ); +```