11. ブラウザのセキュリティ：
なぜWebサイトは勝手に
ファイルを見られないのか

1. ブラウザはPCの中の「砂場（サンドボックス）」

Webサイトにアクセスしただけで、デスクトップにある大切な写真や、仕事の機密書類が勝手に読み取られたら大変なことになります。JavaScriptはPC上で動作するプログラムですが、通常のアプリケーション（Excelやゲームなど）とは決定的に異なる点があります。

それが、サンドボックス（Sandbox） という仕組みです。ブラウザは、実行されているOSのファイルシステムやメモリから隔離された「砂場」のような安全なエリアでしか動けません。砂場の外にあるファイルを持ち出すことも、中に入れることも、基本的には禁止されているのです。

2. ユーザーの「明示的な意思」が壁を壊す

では、なぜ「猫の手ツール」のようなWebアプリで画像を加工したり、ファイルを読み込んだりできるのでしょうか？ それは、ユーザーが「このファイルなら見せてもいいよ」と許可を与えた時だけ、一時的にセキュリティの壁に穴が開くからです。

具体的には、<input type="file">をクリックしてファイルを選んだり、画面上にファイルをドラッグ＆ドロップしたりする操作がこれにあたります。これらは単なるUIの操作ではなく、ブラウザに対して「この特定のファイルへのアクセス権をJSに渡す」という署名をしているようなものなのです。

コードで見る「権限」の付与

以前のセキュリティ概念が希薄だった時代（あるいはネイティブアプリ）と、現代のWebブラウザの制限を比較してみましょう。

【NG例】もし勝手に読み込めてしまったら（脆弱性）

// ⚠️ 実際には動作しません（セキュリティエラーになります）
const secretData = await fetch('file:///C:/Users/Admin/Desktop/secret.txt');
console.log(secretData); // これができたら世界中のPCが丸裸です。

【正解】ユーザーが許可したファイルだけを扱う

// ユーザーがブラウザのダイアログで「選択」した瞬間
fileInput.onchange = (e) => {
  const file = e.target.files[0]; // ここで初めて「Fileオブジェクト」にアクセス可能
  const reader = new FileReader();
  
  reader.onload = () => {
    console.log("ファイル内容を読み取りました:", reader.result);
  };
  reader.readAsText(file);
};

3. 注意点：初心者がハマりやすい「パス」の勘違い

駆け出しのエンジニアがよく「JavaScriptでPC内の C:\images\photo.jpg を直接読み込みたい」と考えますが、これは絶対に不可能です。

• フルパスは隠蔽される： セキュリティ上、JS側からは選択されたファイルのPC内でのフルパス（どのフォルダにいたか）すら取得できません。取得できるのはファイル名のみです。
• 一度閉じたら権限消失： ページをリロードしたり閉じたりすると、そのファイルへのアクセス権は消滅します。再度アクセスするには、ユーザーにまた選んでもらう必要があります。
• ブラウザごとの制限： Chrome、Safari、Firefoxでファイルアクセスの挙動や、対応しているFileSystem APIの範囲が微妙に異なるため、クロスブラウザの検証が必須です。

4. 実務にどう役立っているか

「猫の手ツール」のようなブラウザ完結型のツール開発において、このサンドボックス構造は「究極の安心感」に繋がっています。

「サーバーにファイルをアップロードせずに、ブラウザ内で完結して処理します」という説明ができるのは、この強固なセキュリティモデルがあるからです。ユーザーのプライバシーを守りつつ、リッチな体験を提供する。ブラウザというプラットフォームの進化には、常に感謝しかありません。

まとめ

私たちが当たり前だと思っている「ファイル選択ボタン」や「ドラッグ＆ドロップ」。その裏側では、ブラウザがOSと密接に連携し、ユーザーの許可を厳格に管理しながら、悪意のあるスクリプトからPCを守っています。

この仕組みを理解することは、単に「エラーが出ないコードを書く」だけでなく、「ユーザーに信頼される安全なWebアプリ」を作るための第一歩と言えるでしょう。