青いやつの進捗日記。

メモとしてべんきょうのしんちょくをかいていきます。あとで自分が検索しやすいもん

viteを5.4.12にあげる必要があるセキュリティ警告が出ていたのでアップデートしたらallowedHostsの設定が必要になり、allowedHostの設定によってviteのhmrのWebSocket接続のホスト名が変わる

Vite hmr WebSocket

先に結論

  • allowedHostsを設定する
  • allowedHostsを.ではじめる指定かどうかでVite開発用WebSocket（HMR）のホスト名が変わるので注意

Viteのセキュリティ警告が出たので、アップデート

$ yarn npm audit
└─ vite
   ├─ ID: 1101618
   ├─ Issue: Websites were able to send any requests to the development server and read the response in vite
   ├─ URL: https://github.com/advisories/GHSA-vg6x-rcgg-rjx6
   ├─ Severity: moderate
   ├─ Vulnerable Versions: >=5.0.0 <=5.4.11

Claude 3.5 Sonnetに聞くとこんな感じっぽい。

このセキュリティ警告について説明するために、まず問題の詳細を整理します：

  1. 対象パッケージ: vite v5.4.8
  2. 脆弱性ID: 1101618
  3. 深刻度: moderate（中程度）
  4. 影響を受けるバージョン: 5.0.0から5.4.11
  5. GitHubのセキュリティアドバイザリへのリンクが提供されています

これは以下のような意味です：

  1. 脆弱性の内容： Viteの開発サーバーに対して、任意のウェブサイトからリクエストを送信し、そのレスポンスを読み取ることができてしまう問題が存在します。
  2. 影響：
  3. 開発サーバー使用時（vite devやvite serve実行時）のみ影響があります
  4. プロダクション環境（ビルド後のコード）には影響ありません
  5. 悪意のあるウェブサイトが、開発者のローカル環境で実行中のVite開発サーバーにアクセスできてしまう可能性があります
  6. 対応策： Viteを5.4.12以降のバージョンにアップデートすることで修正できます。以下のコマンドで更新可能です：
yarn upgrade vite@latest

この脆弱性は開発環境でのみ影響があり、本番環境には影響しないため、即時の対応は必須ではありませんが、セキュリティのベストプラクティスとしては、可能な限り早めにアップデートすることをお勧めします。

開発時のみに影響する警告のようだ。

なので、viteを5.4.12にアップデートした。

viteの5.4.12にはbreaking changeがある。allowedHostsの設定が必要そう

すると、ローカル開発環境が立ち上がらなくなった。デプロイされている環境では影響（開発環境やステージング環境など）では影響がない。
よくみたらViteの5.4.12にはbreaking changeがある。

github.com

github.com

zenn.dev

viteの前でdocker使ってプロキシ通してたりローカル開発環境をlocalhostとつかないURLで起動していたりしたので、それ故に Any websites were able to send any requests to the development server and read the response · Advisory · vitejs/vite · GitHub の Using a reverse proxy in front of Vite や Accessing the development server via a domain other than localhost or *.localhost が該当しそう。
あとWebSocket使ってたからUsing a plugin / framework that connects to the WebSocket server on their own from the browserも該当するかも。

どうやらallowedHosts（サーバーオプション#server,allowedhosts）の設定が必要そう。（このallowedHostsはいままでなかった設定だった。）

開発環境立ち上げたときのエラー通りにvite.config.tsのallowedHostsを設定してみる。
ローカル開発環境をlocal.dev.motoki-watanabe.netで立ち上げてたと仮定すると、vite.config.tsはこのように設定してみる

export default defineConfig(() => {

  ~~~
  
  server: {
    host: true,
    port: 3001,
    open: 'local.dev.motoki-watanabe.net',
    allowedHosts: ['local.dev.motoki-watanabe.net'],
  },

  ~~~
}

開発環境はたちあがるようになった！が、HMRのWebSocket接続でエラーが出る

これで開発環境が立ち上がるようになった。が、consoleにエラーが出ている。
ws://localhost:3001にWebSocket接続がされ、失敗している。
このWebSocket接続なんなのかというと、ViteのHMR用。

techblog.spiderplus.co.jp

Vite開発用WebSocketで、ローカルでのコード変更をWebSocketで通知してホットリロードをさせるためのものらしい。

プロキシ挟んでる故なにか変なこと起きていそう…

vite.config.tsのserver.hmrの設定？

エラーの内容に

Check out your Vite / network configuration and https://vite.dev/config/server-options.html#server-hmr .

と書かれていたので、server.hmr（サーバーオプション#server.hmr）に設定してみる。が、どこに繋いだらうまくいくのかわからない。dev.motoki-watanabe.netとかにしてみるとconsoleにエラーは出なくなるけどHMRが機能しない。local.dev.motoki-watanabe.netにするとhttpsでつながってしまったりHMR用のWebSocketがつながってなかったり。

結局、allowedHostsを.ではじめてワイルドカード指定するとうまくいった

vite.config.tsを以下のようにしてみた

export default defineConfig(() => {

  ~~~
  
  server: {
    host: true,
    port: 3001,
    open: 'local.dev.motoki-watanabe.net',
    allowedHosts: ['.dev.motoki-watanabe.net'],
  },

  ~~~
}

とすると、HMR用のWebSocketがwss://local.dev.motoki-watanabe.net/?token=~~~~に繋がり、うまく動作した！

ここで気になったのが、allowedHostsの設定がlocal.dev.motoki-watanabe.netか.dev.motoki-watanabe.netかによって、HMR用WebSocketのホスト名が変わってくる、ということ。

allowedHostsの指定によって、HMR用WebSocketのホスト名が変わる

viteの内部で、allowedHostsの値によってHMR用WebSocketのホスト名を変えている、ということになる。

ViteのサーバーサイドでallowedHostsの設定に応じて__HMR_HOSTNAME__の値がきまり、Viteのクライアントサイドでそれが使用される、ということみたい。

.で始まるワイルドカードの場合：実際のホスト名
完全一致の場合：デフォルトのlocalhostが使用される

ただ、本当にこれでよかったのか微妙…

本当はプロキシ設定をなおして解決すべきなのかもしれない…