事の発端はOXSecurityによって発表されたVSCodeの拡張機能の脆弱性にあります。
Web制作に欠かせないエディタ「VS Code」。その中でも「Live Server」は超定番ですが、最近、拡張機能に潜むセキュリティの脆弱性が大きな話題となりました。
なぜ「Live Server」などの拡張機能が危ないと言われたのか？
イスラエルのセキュリティ企業 OXSecurity の調査により、Live Serverを含む複数の人気拡張機能に、悪意のあるコードを実行されてしまう脆弱性が見つかりました。
狙われた「ワークスペース・トラスト」の隙
通常、VS Codeは信頼できないフォルダを開く際に警告を出しますが、一部の拡張機能はこのチェックをすり抜けてしまいます。 もし、悪意のある人物が作ったリポジトリ（フォルダ）をVS Codeで開いてしまうと、拡張機能を通じてあなたのPC内のファイルを盗み見られたり、外部から操作されたりするリスクがあるといった内容です。
脆弱性が指摘された主な拡張機能（例）
| 拡張機能名 | リスクの内容 | 脅威の度合い (CVSS) |
| Live Server | PC内の大事なファイルが外部に盗み取られる | 9.1 (極めて危険) |
| Code Runner | 外部から勝手に不正なプログラムを実行される | 7.8 (高危険) |
| Markdown Preview | PC内のポートをスキャンされ、データを抜き取られる | 8.8 (高危険) |
| Microsoft Live Preview | 1クリックでファイルが盗まれる | 修正済みだがリスクあり |
特にLiveServerとLivePreviewは私も普段からよく使う拡張機能で重宝していました。
正直「これ使えなくなるの、めんどくせー」とは思ったものの、拡張機能に依存した環境から脱出するためのいい機会と前向きにとらえています。
これらは、「悪意のあるプロジェクト（フォルダ）」をVS Codeで開くだけで発動する可能性があります。便利なツールが、実は自分のPCのバックドアとなってしまっている状況です。
悪意のあるプロジェクトとは？
悪意のあるプロジェクトを見なければいいだけの話じゃね？と思う人もいると思いますがそんな簡単な話ではないのです。
「悪意」は隠されている（サプライチェーン攻撃）
GitHubなどで公開されている便利なライブラリや、学習用のサンプルコードに悪意のあるコードが仕込まれているケースがあります。
- 見た目は普通の「ポートフォリオのテンプレート」
- でも、中身にLive Serverの脆弱性を突く設定ファイルが隠されている
- 「勉強のために有名なコードをクローン・ダウンロードしただけ」で、PCの中身が筒抜けになるリスクがあります。
ブラウザ経由での攻撃（ブラウザを開いているだけで危ない）
Live Serverの特に怖いところは、「VS Codeでプロジェクトを開いている間、ブラウザで別の怪しいサイトを見ただけで」被害に遭う可能性がある点です。
- Live Serverが動いていると、自分のPC内で「ポート5500」などが常に開いた状態になります。
- 自分がブラウザで別のタブを開き、悪意のある広告などが貼られたサイトをうっかり踏んでしまうと、そのサイト上のスクリプトがブラウザ越しにLive Serverへ攻撃を仕掛け、PC内のファイルを盗み出すことができます。
- つまり、「開いているプロジェクト」が安全でも、「ネットサーフィン」をしているだけでリスクが生じるのです。
「信頼済みワークスペース」を過信してはいけない
VS Codeには「このフォルダを信頼しますか？」という警告が出ますが、今回の脆弱性の一部は、その警告を「はい」と押した瞬間にアウトになるものや、警告が出る前に拡張機能が動き出してしまう隙を突いたものでした。
『自分は怪しいものは開かないから大丈夫』と思うかもしれないけど、今の時代の『悪意』は、勉強用の便利な素材や、普通のWebサイトの中に巧妙に隠されています。私も年末サーバーに不正ファイル入れられて勝手にバックドア設置されてましたからね（笑）
Live Serverなどの拡張機能は、『便利さのために、PCの玄関を常に開けっ放しにしている』ようなもの。プロとして仕事をするなら、必要な時だけ自分で鍵を開けてサーバーを立てる php -S のやり方を覚えて、『自分の身は自分で守る』を徹底しましょうという話でもあります。
「ファイルを直接開く」のと「サーバーで開く」は何が違う？
多くの初心者が通る道、それが「index.htmlをダブルクリックして確認する」という方法です。
しかし、プロの現場ではこの方法は使いません。
なぜなら、ダブルクリック（file://形式）では解決できない「3つの壁」があるからです。
「部品化（include）」が動かない
Web制作を効率化するために、ヘッダーやフッターを共通パーツとして別ファイルにする「include化」を学びますよね。
JSの fetch や export / import（モジュール化）を使って別ファイルを読み込もうとすると、ファイルを直接開いた（file://）状態では、ブラウザが「おっと、君。それはセキュリティ上、許可できないよ！」とブロックしてしまいます。
「CORS（コルス）」という名の鉄壁のガード
ブラウザには、自分のPC内の大事なファイルに勝手にアクセスさせないためのルールがあります。
- 直接開いた場合: 「どこの誰だかわからないJSが、勝手に僕のPCの中身（別ファイル）を覗こうとしている！」と判断され、エラーになります。
- サーバーを通した場合: 「
localhost:8000というちゃんとした住所（サーバー）からのリクエストだね、OK！」と許可されます。
「コードは合っているはずなのに画像やパーツが表示されない…」という初心者の悩みの9割は、この「サーバーを立てていないこと」が原因です。
それが楽にできてたのがLiveServerなんですけど使えなくなったんで自分でローカルサーバーを立てる必要が出てくるといった形です。
LiveServerなどの拡張機能はいずれ修正されるとは思いますが、それが万全と判断するには難しい部分もあり、当分は使えないというか使わない方がいいと思ってます。
「ローカルサーバー」の立て方ガイド
1．PCにPHPが入ってるかのチェック
ターミナル（Mac）やPowerShell（Win）で以下を打ち込みます。
php -v
↑このようにPHPのバージョン表示されてたらPHPがPCにダウンロードできてる証拠です。
出てない場合は下記のURLやブラウザで「Mac（Win） PHPダウンロード方法」などと検索をかけてダウンロードをしてください。
2．サーバー表示させたいフォルダまで移動する
ターミナル・PowerShell上で、作業フォルダに「ワープ」します。
cd （半角スペースを入れる）と打ち、フォルダを画面にポイッとドラッグ＆ドロップしてEnter。
3．サーバー起動コマンドを打つ
php -S localhost:8000これで、あなたのPC内に「自分専用のローカルサーバー」が立ち上がりました。
localhost:8000とは・・・
▼localhost（住所）
これは「自分自身のPC」を指す特別な名前です。インターネット上のどこかではなく、手元にあるPCの中にアクセスしているという意味です。
▼8000（ポート番号・部屋番号）
PCという「大きなビル」の中にある、「サーバー専用の部屋番号」のようなものです。
※実は番号は何でもよくて、8000である必要はありません。8080 でも 3000 でも、空いている番号なら何でも使えます。一般的に8000を使う人が多いって感じです。
4．ブラウザで立ち上げる
http://localhost8000
を直接ブラウザのURLに入れ込むことで確認ができます。
これで仮想サーバー環境での確認ができるようになり、includeなどを使用したサイトの表示確認も
LiveServerなどを使わなくともできるといった形です！
私的には、同時に複数のサイトを制作する際などに毎回立ちあげるのが面倒なので
デスクトップをlocalhostの定位置にしておいて、
http://localhost8000/dummy-site/index.html
http://localhost8000/sample-site/index.html
等のように都度サーバーを立ち上げるのではなく、大元で立ち上げておいてあとはディレクトリ指定で確認しちゃうことが多いです！
まとめ
今回の拡張機能の脆弱性は世界的にも話題になっており、LiveServerが一番の起点となりましたが
LivePreviewも実はMicrosoft公式のプラグインにもかかわらず脆弱性が発見されたことを思うと
公式だからといって安全を保障できるわけではないというのをすごく感じました。
また、補足情報ですが、VSCodeの拡張機能はVSCodeをベースとして使ってるCursorにも影響するため
CursorでのLiveServerやLivePreveiwの使用も危険ととらえてもらった方がいいです。
自分のPCが感染してしまった場合、気づかずいろいろなデータを触り、お客様にそれを共有した場合
お客様のPCも汚染されるという負の連鎖になるため、お客様を守るという意味でも
自分の身は自分で守りましょう～！