HTMLファイルをパスワードで保護できる無料ツールを作った
サーバー不要・完全ブラウザ完結で、AES-256-GCM暗号化した自己復号HTMLを生成します。GitHub PagesやNetlifyなど静的ホスティングでも「鍵のかかったページ」が作れます。
少し前にAI生成のHTMLをドラッグ＆ドロップで公開〜Netlify Dropが手軽ですごいという記事を書きました。AIでサッと作ったHTMLをNetlify Dropに放り込めば、その場で公開URLが出てくる、というやつです。
ただ、Netlify Dropで出てくるURLは知っていれば誰でもアクセスできる。家族向けのサプライズページ、社内向けの試作、特定の人にだけ見せたい資料……「公開はしたいけど、限定したい」場面では、もう一歩欲しくなります。
そこに「鍵をかける」一手を加えるのが、今回作ったツールです。
どんなツール？
HTMLパスワード保護ツールは、HTMLファイルをアップロードするだけでパスワード入力画面付きの暗号化HTMLを生成してくれる無料のWebツールです。生成されたファイルはそれ1ファイルで完結しており、Netlify・GitHub Pages・S3などの静的ホスティングにそのままアップロードするだけで使えます。
特に嬉しいのが「100%ローカル処理」という点です。ファイルもパスワードも一切サーバーに送信されず、処理はすべてブラウザ内で完結します。機密コンテンツを扱うときも安心して使えます。
🔒 採用している暗号化方式 AES-256-GCM + PBKDF2-SHA256（60万回反復）。OWASPが推奨する強度で、総当たり攻撃への耐性も高いです。
使い方（3ステップ）
Step 1 — HTMLファイルを読み込む
ファイルをドラッグ＆ドロップするか「ファイルを選択」でアップロード。.html / .htm 形式に対応しています。コードを直接テキストエリアに貼り付けることも可能です。
Step 2 — パスワードとページタイトルを入力
パスワードは16文字以上を推奨。ページタイトルは復号画面に表示される名前です（例：「社内向け資料」など）。
Step 3 — 「暗号化してダウンロード」を押す
ボタンを押すとパスワード入力画面付きのHTMLファイルが生成され、自動でダウンロードされます。あとはそのファイルをホスティングサービスにアップするだけです。
✅ 正しいパスワードを入れると、元のHTMLがブラウザ内で復号されてそのまま表示されます。ファイルを受け取った相手にURLとパスワードを別経路で伝えるだけでOKです。
技術仕様まとめ
| 項目 | 内容 |
|---|---|
| 暗号化方式 | AES-256-GCM（認証付き暗号化） |
| 鍵導出 | PBKDF2-SHA256 / 60万回反復（OWASP推奨） |
| 処理場所 | 完全ブラウザ内。ファイル・パスワードはサーバー非送信 |
| 対応形式 | .html / .htm（コード直貼りも可） |
| 出力 | 自己復号型のシングルHTMLファイル |
| ホスティング | Netlify、GitHub Pages、S3などの静的ホスティング全般 |
こんな場面で使える
🏢 社内向け資料の共有 静的サイトに上げた社内マニュアルをパスワード制限。バックエンド不要でアクセス制限できます。
🎓 受講者限定コンテンツ 購入者やイベント参加者だけに共有するHTMLコンテンツの保護に。
💌 特定の人へのメッセージ 結婚式のサプライズページや誕生日ページを、当人だけが開けるように保護。
🧪 プロトタイプのステージング 公開前のデモサイトを一時的にパスワード保護してレビュー依頼。
📄 報告書・ポートフォリオ 特定クライアント向けの成果物をそのまま暗号化してURL共有。
🔐 個人メモの保管 ローカルやクラウドに置く個人用HTMLメモをひと手間で暗号化。
使うときの注意点
⚠️ パスワードを忘れると復号できません サーバー側にパスワードの記録はいっさいありません。忘れた場合の復号手段はないため、必ず安全な場所にパスワードを控えてください。
⚠️ パスワードは別経路で共有を URLとパスワードを同じメッセージで送ると意味が薄れます。URLはSlack、パスワードはメールなど、別の経路で共有するのがベストプラクティスです。
💡 外部JSを読み込むHTMLには注意 復号後のHTMLが外部リソース（CDN等）に依存している場合、ネットワーク環境によっては表示が崩れることがあります。可能な限りリソースをインライン化した単一HTMLにしておくと安心です。
💡 動作環境 Web Crypto APIに対応した最新のモダンブラウザ（Chrome / Edge / Firefox / Safari）でご利用ください。極端に大きなファイル（数十MB超）はブラウザのメモリ制約で失敗する場合があります。
まとめ
静的ホスティングで「パスワード保護」を実現したいニーズは意外と多いのに、ちょうどいいツールが見つからなかったので作りました。StatiCryptという素晴らしいプロジェクトにインスパイアされ、よりシンプルなUIで使えるよう仕上げています。
AI生成HTMLをNetlify Dropで公開する流れと組み合わせれば、「AIで作る → Dropで公開 → このツールで鍵をかける」という、サーバーレスのまま限定公開まで完結するワークフローが組めます。
サーバーレス・ゼロコスト・ブラウザ完結という三拍子そろったツールなので、ぜひ活用してみてください。フィードバックや要望もお待ちしています。