search

vuejs / router

🚦 The official router for Vue.js
https://router.vuejs.org/
MIT License
3.91k stars 1.19k forks source link

vue-router@4 does not encode invalid URL parameters. Is there any hidden risk? #2074

Closed wangzhiguoengineer closed 10 months ago

wangzhiguoengineer commented 10 months ago

Reproduction

vue-router@4

Steps to reproduce the bug

Assume that the URL of the web project to be accessed is: https://test.com/path?query=%abc%

Expected behavior

Access via vue-router@3, parameter %abc% is automatically replaced with %25abc%25 by history.replaceState The address bar of the final browser displays: https://test.com/path?query=%25abc%25

Actual behavior

The %abc% parameter is not automatically replaced with %25abc%25 when accessed through vue-router@4. The address bar of the browser is still invalid: https://test.com/path?query=%abc%

Additional information

The main impacts are:

  1. In some existing old app webviews, invalid% parameters are built in, and old apps cannot be updated. Therefore, the web project of vue2 is normal, but the upgrade to vue3 is abnormal.
  2. The Referer carries an invalid URL to the Back End. An error occurs when the Back End parses the URL and sends the URL. As a result, the function is unavailable.
  3. An error is reported when the decodeURI is involved.
posva commented 10 months ago

The address bar of the browser is still invalid: https://test.com/path?query=%abc%

Browsers display URL differently from what location contains. Make sure to check that. Vue Router goal is to give you unencoded values in query, hash and params for easier use. As noted in the migration guide, the encoding behavior has changed to be consistent and predictable. If after reading the migration guide you have a bug to report, make sure to provide a reproduction

wangzhiguoengineer commented 10 months ago

@posva The invalid parameter mentioned here is mainly the% symbol, and the% symbol is not automatically encoded by the browser. vue-router@3 encodes% and invokes history.replaceState to automatically refresh the URL in the address bar. vue-router@4 also invokes history.replaceState to refresh the URL in the address bar, but does not encode the% symbol. Can vue-router@4 encode invalid parameter% in the address bar and refresh URL parameters in the address bar?