React Router DOM has released version 7.1.1, a minor upgrade from the previous stable version 7.1.0. Both versions maintain the core functionality of declarative routing for React web applications, offering developers a robust solution for managing navigation within their single-page applications using React. A key detail for developers is ensuring they have React and React DOM versions of at least 18 installed, as specified as peer dependencies in both versions, ensuring compatibility and optimal performance. The underlying react-router dependency is tightly coupled, with version 7.1.1 utilizing react-router version 7.1.1 and the previous version using 7.1.0, any specific updates made in the new react-router will be present in the new react-router-dom.
Structurally, the packages are consistent; both have a small footprint with an unpacked size of 5436 bytes distributed across 7 files. Development dependencies remain the same, including tools like tsup for bundling, wireit for managing npm scripts, and typescript for type checking enabling a solid modern development workflow.
The primary distinction lies in the release date, 7.1.1 being released on December 23rd, 2024, after version 7.1.0 released three days before. This short interval suggests the new version is likely a patch release addressing minor bugs or refinements identified shortly after the initial 7.1.0 release. Developers should consider reviewing the changelog or release notes(not provided) for specific details of the changes to determine the impact on their projects but upgrading is probably recommended to receive important fixes.
All the vulnerabilities related to the version 7.1.1 of the package
React Router allows pre-render data spoofing on React-Router framework mode
After some research, it turns out that it's possible to modify pre-rendered data by adding a header to the request. This allows to completely spoof its contents and modify all the values of the data object passed to the HTML. Latest versions are impacted.
The vulnerable header is X-React-Router-Prerender-Data, a specific JSON object must be passed to it in order for the spoofing to be successful as we will see shortly. Here is the vulnerable code :
To use the header, React-router must be used in Framework mode, and for the attack to be possible the target page must use a loader.
Versions used for our PoC:
routes/ssr).data. In our case the page is called /ssr:We access it by adding the suffix .data and retrieve the data object, needed for the header:
X-React-Router-Prerender-Data header with the previously retrieved object as its value. You can change any value of your data object (do not touch the other values, the latter being necessary for the object to be processed correctly and not throw an error):As you can see, all values have been changed/overwritten by the values provided via the header.
The impact is significant, if a cache system is in place, it is possible to poison a response in which all of the data transmitted via a loader would be altered by an attacker allowing him to take control of the content of the page and modify it as he wishes via a cache-poisoning attack. This can lead to several types of attacks including potential stored XSS depending on the context in which the data is injected and/or how the data is used on the client-side.