🚨 [security] Update vite 4.5.3 → 5.4.0 (major) #275

depfu · 2024-08-08T18:40:51Z

🚨 Your current dependencies have known security vulnerabilities 🚨

This dependency update fixes known security vulnerabilities. Please see the details below and assess their impact carefully. We recommend to merge and deploy this as soon as possible!

Here is everything you need to know about this upgrade. Please take a good look at what changed and the test results before merging this pull request.

What changed?

✳️ vite (4.5.3 → 5.4.0) · Repo · Changelog

Security Advisories 🚨

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Vite dev server option server.fs.deny did not deny requests for patterns with directories. An example of such a pattern is /foo/**/*.

Impact

Only apps setting a custom server.fs.deny that includes a pattern with directories, and explicitly exposing the Vite dev server to the network (using --host or server.host config option) are affected.

Patches

Fixed in [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

Details

server.fs.deny uses picomatch with the config of { matchBase: true }. matchBase only matches the basename of the file, not the path due to a bug (micromatch/picomatch#89). The vite config docs read like you should be able to set fs.deny to glob with picomatch. Vite also does not set { dot: true } and that causes dotfiles not to be denied unless they are explicitly defined.

Reproduction

Set fs.deny to ['**/.git/**'] and then curl for /.git/config.

with matchBase: true, you can get any file under .git/ (config, HEAD, etc).

with matchBase: false, you cannot get any file under .git/ (config, HEAD, etc).

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Vite dev server option server.fs.deny did not deny requests for patterns with directories. An example of such a pattern is /foo/**/*.

Impact

Only apps setting a custom server.fs.deny that includes a pattern with directories, and explicitly exposing the Vite dev server to the network (using --host or server.host config option) are affected.

Patches

Fixed in [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

Details

server.fs.deny uses picomatch with the config of { matchBase: true }. matchBase only matches the basename of the file, not the path due to a bug (micromatch/picomatch#89). The vite config docs read like you should be able to set fs.deny to glob with picomatch. Vite also does not set { dot: true } and that causes dotfiles not to be denied unless they are explicitly defined.

Reproduction

Set fs.deny to ['**/.git/**'] and then curl for /.git/config.

with matchBase: true, you can get any file under .git/ (config, HEAD, etc).

with matchBase: false, you cannot get any file under .git/ (config, HEAD, etc).

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Vite dev server option server.fs.deny did not deny requests for patterns with directories. An example of such a pattern is /foo/**/*.

Impact

Only apps setting a custom server.fs.deny that includes a pattern with directories, and explicitly exposing the Vite dev server to the network (using --host or server.host config option) are affected.

Patches

Fixed in [email protected], [email protected], [email protected], [email protected], [email protected], [email protected]

Details

server.fs.deny uses picomatch with the config of { matchBase: true }. matchBase only matches the basename of the file, not the path due to a bug (micromatch/picomatch#89). The vite config docs read like you should be able to set fs.deny to glob with picomatch. Vite also does not set { dot: true } and that causes dotfiles not to be denied unless they are explicitly defined.

Reproduction

Set fs.deny to ['**/.git/**'] and then curl for /.git/config.

with matchBase: true, you can get any file under .git/ (config, HEAD, etc).

with matchBase: false, you cannot get any file under .git/ (config, HEAD, etc).

🚨 Vite dev server option `server.fs.deny` can be bypassed when hosted on case-insensitive filesystem

Summary

Vite dev server option server.fs.deny can be bypassed on case-insensitive file systems using case-augmented versions of filenames. Notably this affects servers hosted on Windows.

This bypass is similar to https://nvd.nist.gov/vuln/detail/CVE-2023-34092 -- with surface area reduced to hosts having case-insensitive filesystems.

Patches

Fixed in [email protected], [email protected], [email protected], [email protected]

Details

Since picomatch defaults to case-sensitive glob matching, but the file server doesn't discriminate; a blacklist bypass is possible.

See picomatch usage, where nocase is defaulted to false: https://github.com/vitejs/vite/blob/v5.1.0-beta.1/packages/vite/src/node/server/index.ts#L632

By requesting raw filesystem paths using augmented casing, the matcher derived from config.server.fs.deny fails to block access to sensitive files.

PoC

Setup

Created vanilla Vite project using npm create vite@latest on a Standard Azure hosted Windows 10 instance.

npm run dev -- --host 0.0.0.0

Publicly accessible for the time being here: http://20.12.242.81:5173/

Created dummy secret files, e.g. custom.secret and production.pem

Populated vite.config.js with
export default { server: { fs: { deny: ['.env', '.env.*', '*.{crt,pem}', 'custom.secret'] } } }
Reproduction

curl -s http://20.12.242.81:5173/@fs//

Descriptive error page reveals absolute filesystem path to project root

curl -s http://20.12.242.81:5173/@fs/C:/Users/darbonzo/Desktop/vite-project/vite.config.js

Discoverable configuration file reveals locations of secrets

curl -s http://20.12.242.81:5173/@fs/C:/Users/darbonzo/Desktop/vite-project/custom.sEcReT

Secrets are directly accessible using case-augmented version of filename

Proof

Impact

Who

Users with exposed dev servers on environments with case-insensitive filesystems

What

Files protected by server.fs.deny are both discoverable, and accessible

🚨 Vite XSS vulnerability in `server.transformIndexHtml` via URL payload

Summary

When Vite's HTML transformation is invoked manually via server.transformIndexHtml, the original request URL is passed in unmodified, and the html being transformed contains inline module scripts (<script type="module">...</script>), it is possible to inject arbitrary HTML into the transformed output by supplying a malicious URL query string to server.transformIndexHtml.

Impact

Only apps using appType: 'custom' and using the default Vite HTML middleware are affected. The HTML entry must also contain an inline script. The attack requires a user to click on a malicious URL while running the dev server. Restricted files aren't exposed to the attacker.

Patches

Fixed in [email protected], [email protected], [email protected]

Details

Suppose index.html contains an inline module script:

<script type="module">
  // Inline script
</script>

This script is transformed into a proxy script like

<script type="module" src="/index.html?html-proxy&index=0.js"></script>

due to Vite's HTML plugin:

vite/packages/vite/src/node/plugins/html.ts

Lines 429 to 465 in 7fd7c6c

    <tbody>

    <tr class="border-0">
      <td id="L430" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="430"></td>
      <td id="LC430" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">inlineModuleIndex</span><span class="pl-c1">++</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L431" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="431"></td>
      <td id="LC431" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">url</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-en">isExcludedUrl</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-s1">isPublicFile</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L432" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="432"></td>
      <td id="LC432" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-c">// &lt;script type="module" src="..."/&gt;</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L433" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="433"></td>
      <td id="LC433" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-c">// add it as an import</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L434" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="434"></td>
      <td id="LC434" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">js</span> <span class="pl-c1">+=</span> <span class="pl-s">`\nimport <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-smi">JSON</span><span class="pl-kos">.</span><span class="pl-en">stringify</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">}</span></span>`</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L435" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="435"></td>
      <td id="LC435" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">shouldRemove</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L436" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="436"></td>
      <td id="LC436" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">childNodes</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L437" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="437"></td>
      <td id="LC437" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-k">const</span> <span class="pl-s1">scriptNode</span> <span class="pl-c1">=</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L438" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="438"></td>
      <td id="LC438" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">         <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">childNodes</span><span class="pl-kos">.</span><span class="pl-en">pop</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-k">as</span> <span class="pl-smi">DefaultTreeAdapterMap</span><span class="pl-kos">[</span><span class="pl-s">'textNode'</span><span class="pl-kos">]</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L439" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="439"></td>
      <td id="LC439" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-k">const</span> <span class="pl-s1">contents</span> <span class="pl-c1">=</span> <span class="pl-s1">scriptNode</span><span class="pl-kos">.</span><span class="pl-c1">value</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L440" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="440"></td>
      <td id="LC440" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-c">// &lt;script type="module"&gt;...&lt;/script&gt;</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L441" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="441"></td>
      <td id="LC441" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-k">const</span> <span class="pl-s1">filePath</span> <span class="pl-c1">=</span> <span class="pl-s1">id</span><span class="pl-kos">.</span><span class="pl-en">replace</span><span class="pl-kos">(</span><span class="pl-en">normalizePath</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">root</span><span class="pl-kos">)</span><span class="pl-kos">,</span> <span class="pl-s">''</span><span class="pl-kos">)</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L442" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="442"></td>
      <td id="LC442" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-en">addToHTMLProxyCache</span><span class="pl-kos">(</span><span class="pl-s1">config</span><span class="pl-kos">,</span> <span class="pl-s1">filePath</span><span class="pl-kos">,</span> <span class="pl-s1">inlineModuleIndex</span><span class="pl-kos">,</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L443" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="443"></td>
      <td id="LC443" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">         <span class="pl-c1">code</span>: <span class="pl-s1">contents</span><span class="pl-kos">,</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L444" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="444"></td>
      <td id="LC444" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-kos">}</span><span class="pl-kos">)</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L445" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="445"></td>
      <td id="LC445" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">js</span> <span class="pl-c1">+=</span> <span class="pl-s">`\nimport "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">id</span><span class="pl-kos">}</span></span>?html-proxy&amp;index=<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">inlineModuleIndex</span><span class="pl-kos">}</span></span>.js"`</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L446" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="446"></td>
      <td id="LC446" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">shouldRemove</span> <span class="pl-c1">=</span> <span class="pl-c1">true</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L447" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="447"></td>
      <td id="LC447" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-kos">}</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L448" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="448"></td>
      <td id="LC448" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">  </td>
    </tr>

    <tr class="border-0">
      <td id="L449" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="449"></td>
      <td id="LC449" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">everyScriptIsAsync</span> <span class="pl-c1">&amp;&amp;=</span> <span class="pl-s1">isAsync</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L450" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="450"></td>
      <td id="LC450" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">someScriptsAreAsync</span> <span class="pl-c1">||=</span> <span class="pl-s1">isAsync</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L451" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="451"></td>
      <td id="LC451" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">someScriptsAreDefer</span> <span class="pl-c1">||=</span> <span class="pl-c1">!</span><span class="pl-s1">isAsync</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L452" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="452"></td>
      <td id="LC452" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">url</span> <span class="pl-c1">&amp;&amp;</span> <span class="pl-c1">!</span><span class="pl-s1">isPublicFile</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L453" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="453"></td>
      <td id="LC453" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-c1">!</span><span class="pl-en">isExcludedUrl</span><span class="pl-kos">(</span><span class="pl-s1">url</span><span class="pl-kos">)</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L454" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="454"></td>
      <td id="LC454" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">config</span><span class="pl-kos">.</span><span class="pl-c1">logger</span><span class="pl-kos">.</span><span class="pl-en">warn</span><span class="pl-kos">(</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L455" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="455"></td>
      <td id="LC455" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">         <span class="pl-s">`&lt;script src="<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">url</span><span class="pl-kos">}</span></span>"&gt; in "<span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">publicPath</span><span class="pl-kos">}</span></span>" can't be bundled without type="module" attribute`</span><span class="pl-kos">,</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L456" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="456"></td>
      <td id="LC456" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-kos">)</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L457" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="457"></td>
      <td id="LC457" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-kos">}</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L458" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="458"></td>
      <td id="LC458" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-kos">}</span> <span class="pl-k">else</span> <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">childNodes</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L459" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="459"></td>
      <td id="LC459" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-k">const</span> <span class="pl-s1">scriptNode</span> <span class="pl-c1">=</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L460" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="460"></td>
      <td id="LC460" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       <span class="pl-s1">node</span><span class="pl-kos">.</span><span class="pl-c1">childNodes</span><span class="pl-kos">.</span><span class="pl-en">pop</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-k">as</span> <span class="pl-smi">DefaultTreeAdapterMap</span><span class="pl-kos">[</span><span class="pl-s">'textNode'</span><span class="pl-kos">]</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L461" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="461"></td>
      <td id="LC461" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s1">scriptUrls</span><span class="pl-kos">.</span><span class="pl-en">push</span><span class="pl-kos">(</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L462" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="462"></td>
      <td id="LC462" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">       ...<span class="pl-en">extractImportExpressionFromClassicScript</span><span class="pl-kos">(</span><span class="pl-s1">scriptNode</span><span class="pl-kos">)</span><span class="pl-kos">,</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L463" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="463"></td>
      <td id="LC463" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-kos">)</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L464" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="464"></td>
      <td id="LC464" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-kos">}</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L465" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="465"></td>
      <td id="LC465" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-kos">}</span> </td>
    </tr>
</tbody>

	if (isModule) {

When appType: 'spa' | 'mpa', Vite serves HTML itself, and htmlFallbackMiddleware rewrites req.url to the canonical path of index.html,

vite/packages/vite/src/node/server/middlewares/htmlFallback.ts

Lines 44 to 47 in 73ef074

    <tbody>

    <tr class="border-0">
      <td id="L45" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="45"></td>
      <td id="LC45" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-k">const</span> <span class="pl-s1">newUrl</span> <span class="pl-c1">=</span> <span class="pl-s1">url</span> <span class="pl-c1">+</span> <span class="pl-s">'index.html'</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L46" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="46"></td>
      <td id="LC46" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-en">debug</span><span class="pl-kos">?.</span><span class="pl-kos">(</span><span class="pl-s">`Rewriting <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">method</span><span class="pl-kos">}</span></span> <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span><span class="pl-kos">}</span></span> to <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">newUrl</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L47" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="47"></td>
      <td id="LC47" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-s1">req</span><span class="pl-kos">.</span><span class="pl-c1">url</span> <span class="pl-c1">=</span> <span class="pl-s1">newUrl</span> </td>
    </tr>
</tbody>

	if (fs.existsSync(filePath)) {

so the url passed to server.transformIndexHtml is /index.html.

However, if appType: 'custom', HTML is served manually, and if server.transformIndexHtml is called with the unmodified request URL (as the SSR docs suggest), then the path of the transformed html-proxy script varies with the request URL. For example, a request with path / produces

<script type="module" src="/@id/__x00__/index.html?html-proxy&index=0.js"></script>

It is possible to abuse this behavior by crafting a request URL to contain a malicious payload like

"></script><script>alert('boom')</script>

so a request to http://localhost:5173/?%22%3E%3C/script%3E%3Cscript%3Ealert(%27boom%27)%3C/script%3E produces HTML output like

<script type="module" src="/@id/__x00__/?"></script><script>alert("boom")</script>?html-proxy&index=0.js"></script>

which demonstrates XSS.

PoC

Example 1. Serving HTML from vite dev middleware with appType: 'custom'
- Go to https://stackblitz.com/edit/vitejs-vite-9xhma4?file=main.js&terminal=dev-html
- "Open in New Tab"
- Edit URL to set query string to ?%22%3E%3C/script%3E%3Cscript%3Ealert(%27boom%27)%3C/script%3E and navigate
- Witness XSS:
Example 2. Serving HTML from SSR-style Express server (Vite dev server runs in middleware mode):
- Go to https://stackblitz.com/edit/vitejs-vite-9xhma4?file=main.js&terminal=server
- (Same steps as above)
Example 3. Plain vite dev (this shows that vanilla vite dev is not vulnerable, provided htmlFallbackMiddleware is used)
- Go to https://stackblitz.com/edit/vitejs-vite-9xhma4?file=main.js&terminal=dev
- (Same steps as above)
- You should not see the alert box in this case

Detailed Impact

This will probably predominantly affect development-mode SSR, where vite.transformHtml is called using the original req.url, per the docs:

vite/docs/guide/ssr.md

Lines 114 to 126 in 7fd7c6c

    <tbody>

    <tr class="border-0">
      <td id="L115" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="115"></td>
      <td id="LC115" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">  </td>
    </tr>

    <tr class="border-0">
      <td id="L116" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="116"></td>
      <td id="LC116" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-k">try</span> { </td>
    </tr>

    <tr class="border-0">
      <td id="L117" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="117"></td>
      <td id="LC117" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c"><span class="pl-c">//</span> 1. Read index.html</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L118" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="118"></td>
      <td id="LC118" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-k">let</span> template <span class="pl-k">=</span> <span class="pl-smi">fs</span>.<span class="pl-en">readFileSync</span>( </td>
    </tr>

    <tr class="border-0">
      <td id="L119" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="119"></td>
      <td id="LC119" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-smi">path</span>.<span class="pl-en">resolve</span>(<span class="pl-c1">__dirname</span>, <span class="pl-s"><span class="pl-pds">'</span>index.html<span class="pl-pds">'</span></span>), </td>
    </tr>

    <tr class="border-0">
      <td id="L120" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="120"></td>
      <td id="LC120" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">     <span class="pl-s"><span class="pl-pds">'</span>utf-8<span class="pl-pds">'</span></span>, </td>
    </tr>

    <tr class="border-0">
      <td id="L121" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="121"></td>
      <td id="LC121" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   ) </td>
    </tr>

    <tr class="border-0">
      <td id="L122" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="122"></td>
      <td id="LC122" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">  </td>
    </tr>

    <tr class="border-0">
      <td id="L123" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="123"></td>
      <td id="LC123" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c"><span class="pl-c">//</span> 2. Apply Vite HTML transforms. This injects the Vite HMR client,</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L124" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="124"></td>
      <td id="LC124" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c"><span class="pl-c">//</span>    and also applies HTML transforms from Vite plugins, e.g. global</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L125" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="125"></td>
      <td id="LC125" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   <span class="pl-c"><span class="pl-c">//</span>    preambles from @vitejs/plugin-react</span> </td>
    </tr>

    <tr class="border-0">
      <td id="L126" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="126"></td>
      <td id="LC126" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line">   template <span class="pl-k">=</span> <span class="pl-k">await</span> <span class="pl-smi">vite</span>.<span class="pl-en">transformIndexHtml</span>(url, template) </td>
    </tr>
</tbody>

	const url = req.originalUrl

However, since this vulnerability affects server.transformIndexHtml, the scope of impact may be higher to also include other ad-hoc calls to server.transformIndexHtml from outside of Vite's own codebase.

My best guess at bisecting which versions are vulnerable involves the following test script

import fs from 'node:fs/promises';
import * as vite from 'vite';
const html = </span> <span class="pl-s">&lt;!DOCTYPE html&gt;</span> <span class="pl-s">&lt;html lang="en"&gt;</span> <span class="pl-s">  &lt;head&gt;</span> <span class="pl-s">    &lt;meta charset="UTF-8" /&gt;</span> <span class="pl-s">  &lt;/head&gt;</span> <span class="pl-s">  &lt;body&gt;</span> <span class="pl-s">    &lt;script type="module"&gt;</span> <span class="pl-s">      // Inline script</span> <span class="pl-s">    &lt;/script&gt;</span> <span class="pl-s">  &lt;/body&gt;</span> <span class="pl-s">&lt;/html&gt;</span> <span class="pl-s">;

const server = await vite.createServer({ appType: 'custom' });

const transformed = await server.transformIndexHtml('/?%22%3E%3C/script%3E%3Cscript%3Ealert(%27boom%27)%3C/script%3E', html);

console.log(transformed);

await server.close();

and using it I was able to narrow down to #13581. If this is correct, then vulnerable Vite versions are 4.4.0-beta.2 and higher (which includes 4.4.0).

Release Notes

Too many releases to show here. View the full release notes.

Commits

See the full diff on Github. The new version differs by more commits than we can show here.

Depfu will automatically keep this PR conflict-free, as long as you don't add any commits to this branch yourself. You can also trigger a rebase manually by commenting with @depfu rebase.

All Depfu comment commands

@depfu rebase
Rebases against your default branch and redoes this update

@depfu recreate
Recreates this PR, overwriting any edits that you've made to it

@depfu merge
Merges this PR once your tests are passing and conflicts are resolved

@depfu cancel merge
Cancels automatic merging of this PR

@depfu close
Closes this PR and deletes the branch

@depfu reopen
Restores the branch and reopens this PR (if it's closed)

@depfu pause
Ignores all future updates for this dependency and closes this PR

@depfu pause [minor|major]
Ignores all future minor/major updates for this dependency and closes this PR

@depfu resume
Future versions of this dependency will create PRs again (leaves this PR as is)

Update vite to version 5.4.0

8d20577

depfu bot added the depfu label Aug 8, 2024

depfu bot mentioned this pull request Aug 8, 2024

🚨 [security] Update vite 4.5.3 → 5.3.5 (major) #272

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

🚨 [security] Update vite 4.5.3 → 5.4.0 (major) #275

🚨 [security] Update vite 4.5.3 → 5.4.0 (major) #275

Uh oh!

depfu bot commented Aug 8, 2024

Uh oh!

Uh oh!

🚨 [security] Update vite 4.5.3 → 5.4.0 (major) #275

Are you sure you want to change the base?

🚨 [security] Update vite 4.5.3 → 5.4.0 (major) #275

Uh oh!

Conversation

depfu bot commented Aug 8, 2024

What changed?

✳️ vite (4.5.3 → 5.4.0) · Repo · Changelog

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Impact

Patches

Details

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Impact

Patches

Details

🚨 Vite's `server.fs.deny` did not deny requests for patterns with directories.

Summary

Impact

Patches

Details

🚨 Vite dev server option `server.fs.deny` can be bypassed when hosted on case-insensitive filesystem

Summary

Patches

Details

PoC

Impact

🚨 Vite XSS vulnerability in `server.transformIndexHtml` via URL payload

Summary

Impact

Patches

Details

PoC

Detailed Impact

Uh oh!

Uh oh!