Article directory
I. Introduction
During the code security scanning phase, the front-end resource audit found that jQuerythe version was too low, causing CVE-2020-11022/CVE-2020-11023similar risks in the production system. And the scope of influence: jQuery >= 1.0.3 < 3.5.0.
This type of risk is an application security flaw DXSS attack. An attacker can use this vulnerability to inject malicious script code and execute it on the victim's browser. It will lead to security issues such as leakage of the victim's personal information, hijacking of accounts, and hijacking of sessions. The solution given by the Science and Technology Center is to upgrade the jQuery version to 3.5.0 or higher.
2. Principle of loopholes
3. Repair plan
-
Update jQuery to 3.5.0 or higher;
-
Use the XSS cleaning tool to clean the HTML input by the user, officially recommended ;
Here we use option 1 to upgrade the jQuery version to 3.6.0 (click to download) .
3.1 Upgrade jQuery
jQuery官网：Official jQuery Blog | New Wave Javascript
The jQuery currently used in the project is 1.x. The upgraded version uses the migrate plug-in according to official guidelines.
When upgrading the version, the upgrade method given by the official website is:
Aside from the change to no longer ensure XHTML-compliant tags for you, we do not expect other compatibility issues when upgrading from a jQuery 3.0+ version. To upgrade, have a look at the new 3.5 Upgrade Guide. If you haven’t yet upgraded to jQuery 3+, first have a look at the 3.0 Upgrade Guide.
Translated:
We do not anticipate any compatibility issues when upgrading from jQuery 3.0+, other than tags that are no longer guaranteed to be xhtml compatible. To upgrade to the new version, please check out the new 3.5 upgrade guide . If you haven't upgraded to jQuery 3+ yet, first refer to the 3.0 upgrade guide .
The 3.0 upgrade guide states,
According to the guidelines, first upgrade 1.x to the latest 1.x version 1.12.3, and use the migrate 1.4.1 plug-in to modify the problems pointed out by the warning message. Then upgrade to the latest 3.x version and use the migrate 3.x plug-in.
It can be understood that to upgrade jQuery 1.x to jQuery 3.x, you need to use the migrate 1.x tool to first match the current low version of jQuery to the highest version of jQuery 1.x; after the review, you need to use migrate 3.x to The highest version of jQuery 1.x is tied to 3.x. If the jQuery version currently used in the system is lower than the highest 1.x version, you only need to apply the migrate 1.x compatibility package.
Download jQuery-migrate
Click on the link above to get the compressed content:
Copy all the content, create a jquery-migrate-1.4.1.min.jsfile in vsCode, paste the copied code into it, and you will get the corresponding dependency file.
used in projects
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-migrate-1.4.1.min.js"></script>
3.2 Issues to consider when upgrading from 1.x to 3.x
3.2.1 The table table element automatically adds tbody
1.x version
3.x version
As shown in the picture above, if you insert tableit tr, the jQuery 1.x version will be automatically added tbody, but jQuery 3.x will not, resulting table.children()in inconsistent results when you obtain it later.
3.2.2 Method changes
After jquery was upgraded from 1.x to 3.x, $(window).load(function(){})it became successful in jquery3.x or above $(window).on('load',function(){}), and the project reported an errorUncaught TypeError: e.indexOf is not a function
Note⚠️: .load(), .unload(), and .error()have been deprecated since jQuery 1.8, and are instead .on()registered using functions.
After jQuery is upgraded to a higher version, it needs to be compatible with old code, so you can use the js compatibility package jQuery Migrate. jQuery MigrateIt is an auxiliary plug-in for application migration . It is an auxiliary plug-in for high-level versions to be compatible with low-level versions .
The plug-in is introduced jquery-migratefor compatibility with lower versions, and also shows the solution for replacing the lower version methods with the new version methods.
<script src="/js/jquery-3.6.0.min.js" type="text/javascript"></script>
<script src="/js/jquery-migrate-3.3.2.min.js" type="text/javascript"></script>
Check the official documentation for details on the discard method .
The main deprecated APIs in versions after 3.0 are: .bind(), .unbind(), .delegate(), .undelegate(), jquery.fx.interval.
The APIs deprecated in versions 1.9 and 1.10 include jquery.support(), .context().
-
jQuery 1.9 no longer supports
$.browserand$.browser.version, replaced by$.support. In the newer 2.0 version, IE 6/7/8 will no longer be supported. -
$("#id").val(index);Before 1.8.2, when the index did not exist, the first one would be selected by default. After upgrading to 3.3.1, if it does not exist, there will be no default option and the display will be blank. -
$.post(...). error(function()The error callback method reports an error:Uncaught TypeError: $.post(...).error is not a function
Reason: An error occurred $.post()when using the concatenation .error()method, and the concatenation method was .fail()replaced.
All things considered, when upgrading jQuery from a low version to a high version, you need to use the application migration auxiliary plug-in jQuery Migrate to make the high-level version compatible with the low-level version.
3.3 What is jquery migrate?
jQuery Migrate is an auxiliary plug-in for application migration. It is an auxiliary plug-in for high-level versions to be compatible with low-level versions.
For example, if the jQuery version is 1.x and you plan to upgrade to 3.x, you can delete the 1.x version on the page and replace it with the 3.x version. If there are script errors, introduce a jquery-migrateplug-in to be compatible with the lower version and also Shows the solution for replacing the old version method with the new version method.
jQuery migrate(Transfer, transition) This package solves the incompatibility problem between the old and new code after the jquery upgrade. Just rewrite the unsupported functions and support them.
There are differences between jQuery versions. For example, version 1.9 no longer supports live(), die(), toggle(), sub(), etc. $.browserTo use versions after 1.9 without changing the system code, you need to use jQuery migrate(transfer, transition).
Application examples are as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
alert($("li").size());
});
});
</script>
</head>
<body>
<button>测试按钮</button>
<ul>
<li>Coffee</li>
<li>Milk</li>
<li>Soda</li>
</ul>
</body>
</html>
Click the button and "3" pops up.
Bundle<script type="text/javascript" src="jquery-1.6.1.js"></script>
Replace with<script type="text/javascript" src="jquery-3.3.1.js"></script>
At this time, click the button to display a script error in the Chrome browser developer window:
$(...).size is not a function
Introduce it again on the page <script src="jquery-migrate-3.0.1.js"></script>, click the button, and "3" pops up normally.
Also the prompt sizemethod is deprecated and used lengthinstead: jQuery.fn.size() is deprecated and removed; use the .length property.
Change $("li").size()it to $("li").length, remove it jquery-migrate-3.0.1.js, click the button, and "3" will pop up.
The migration method is completed.
Summary: jQuery migrateIn fact, it summarizes the abandoned methods before the target jQuery version to be upgraded, and automatically calls the integrated abandoned methods when it is detected that the user uses the abandoned methods. At the same time, the console prompts the user that the jQuery migratecurrent method has been abandoned in the higher version of jQuery. , and provide corresponding replacement methods in higher versions. Correspondingly, jQuery migratethere is a relationship with the version. If the wrong version is used, the obsolete method jQuerymay not be integrated and an error will be reported when applying the obsolete method. jQuery migrateTheoretically, if jQuery releases the latest version at the same time, jQuery migrateusing the latest version jQuery migratewill not cause the problem of using the deprecated method and reporting errors.