GitHubPagesで自作HTMLを、自分だけが使える状態で公開する。

Last updated at 2026-06-16Posted at 2026-06-16

実現したい事

自作HTMLを簡易的なパスワード式にする。
アクセス時のURLにパスワードを含めることで、URLだけで使用可能にする。
例えば、下記のURLでアクセスすると使用可能。(セキュリティ強化の都合上、更新するとパスワードを要求されます)

https://uni928.github.io/Uni928PublicHTMLs/locked-page.html?key=kNr8nxipUtFa5hqMddVjkyTY5QUMsbY29P7Oo23PQ5uP2lK5d2RK5lS3x1aH

概要

自分用にHTMLサイトを作ったものの、

完全に公開したいわけではない
でもGitHub Pagesなどに置いて、URLでアクセスできるようにはしたい
サーバー側の認証機能までは用意したくない
静的HTMLだけで完結させたい

という場面がありました。

そこで、HTMLファイルをブラウザ上で暗号化し、パスワードを知っている人だけが開ける保護HTMLを生成するツールを作りました。

公開ページはこちらです。

上記URLにアクセスするだけで使用できます。

何ができるツールか

このツールは、任意のHTMLコードまたはHTMLファイルを読み込み、パスワード付きの単体HTMLとして出力するためのツールです。

生成されたHTMLは、開くとパスワード入力画面が表示されます。正しいパスワードを入力すると、暗号化されていた元HTMLが復号され、ブラウザ上に表示されます。(生成されたHTML内にパスワードは記載されません)

主な用途は、以下のようなケースです。

自分用のHTMLツールをGitHub Pagesに置きたい
URLでアクセスできるようにしたい
ただし中身をそのまま一般公開したくない
サーバーやログイン機能は用意したくない
静的HTMLだけで扱いたい

想定している利用シーン

たとえば、自分用に作った以下のようなHTMLがあります。

家計簿ツール
メモツール
計算ツール
個人用ダッシュボード
簡易的な管理ページ
ローカル用途で作った便利ページ

これらをGitHub Pagesに置けば、スマホや別PCからもURLで開けるようになります。

しかし、そのまま公開するとHTMLの中身も誰でも見られる状態になります。

「URLでは使いたいけれど、内容はそのまま見せたくない」という場合に、このツールでHTMLを暗号化してから公開する、という使い方を想定しています。

特徴

ブラウザ内で処理が完結する

HTMLの読み込み、暗号化、保護HTMLの生成はブラウザ内で行います。

外部サーバーにHTMLやパスワードを送信する仕組みではありません。

単体HTMLとして出力できる

生成される保護HTMLは、単体で動作する静的HTMLです。

そのため、GitHub Pagesなどの静的ホスティングに配置して利用できます。

`?key=パスワード` による自動解除に対応

オプションを有効にすると、生成された保護HTMLは以下のようなURLで自動解除できます。

https://example.com/locked-page.html?key=your-password

ページを開いた直後に key の値を読み取り、復号処理を行います。

また、読み取り後はURLから key パラメータを削除するようにしています。

ただし、URLにパスワードを含める方法は、ブラウザ履歴、共有履歴、アクセスログなどに残る可能性があります。

便利ではありますが、低リスク用途や短期共有向けとして扱うのがよいと思います。

gzip圧縮してから暗号化できる

容量節約オプションを有効にすると、元HTMLをgzip圧縮してから暗号化します。

HTMLの内容によっては、生成されるファイルサイズを抑えられます。

静的表示モードも用意

復号後のHTMLから、スクリプトや外部URLなどを取り除いて表示するモードも用意しています。

安全寄りに表示したい場合に使えますが、元HTML内のJavaScriptに依存したページは正常に動かなくなる場合があります。

ページの動作を優先する場合はOFF、安全寄りに表示したい場合はON、という使い分けを想定しています。

禁止ワードチェック機能

生成前に、元HTML内に特定の文字列が含まれていないか確認するための禁止ワード機能もあります。

禁止ワードはブラウザのIndexedDBに保存されます。

たとえば、公開前に含めたくない文字列や個人情報のチェック用途に使えます。
「sk-」「AIzaSy」辺りは入れる事を推奨します。(API Key 全文は入れないで下さい)

使い方

1. ツールを開く

以下のURLにアクセスします。

サイトを訪れるだけで使用できます。

2. 保護したいHTMLを入力する

以下のどちらかの方法でHTMLを読み込みます。

HTMLファイルをドラッグ＆ドロップする
テキストエリアにHTMLコードを直接貼り付ける

3. 解除パスワードを設定する

解除用のパスワードを入力します。

自動生成ボタンを使うと、Base62の60文字パスワードを生成できます。

公開用途では、短いパスワードではなく、長くランダムな文字列を使うことをおすすめします。

4. 必要に応じてオプションを選ぶ

主なオプションは以下です。

?key=パスワード による自動解除を有効にする
容量を節約する
復号後HTMLを静的表示モードで開く

用途に応じてON/OFFを切り替えます。

5. 保護HTMLを生成する

「保護HTMLを生成する」ボタンを押すと、暗号化されたHTMLファイルがダウンロードされます。

この生成されたHTMLをGitHub Pagesなどに配置すると、パスワード付きのページとして利用できます。

GitHub Pagesでの使い方例

たとえば、生成されたHTMLを locked-page.html としてGitHub Pagesに配置した場合、以下のようにアクセスできます。

https://example.github.io/your-repository/locked-page.html

パスワードを手入力して開く場合は、そのままページを開きます。

自動解除を有効にしている場合は、以下のようにURLにキーを付けることもできます。

https://example.github.io/your-repository/locked-page.html?key=your-password

ただし、URLにパスワードを含める方法はリスクがあります。

安全性を重視する場合は、URLにパスワードを含めず、手入力で使う方がよいと思います。

安全に使いたい場合

安全に使いたい場合は、公開しているHTMLをダウンロードして、自分で中身を確認してください。

ソースはこちらです。

このツールは静的HTMLとして公開しているため、コードを確認できます。

ただし、コードを読めば必ず安全性を完全に確認できるわけではありません。

また、ChatGPTにHTMLを添付して、

「このコードに、情報を盗むような悪意ある処理が含まれていないか確認してください」

のように聞くこともできます。

ただし、これはあくまで補助的な確認方法です。

網羅性はありませんので、あまり推奨はしません。

特に重要な情報を扱う場合は、以下のような確認をおすすめします。

自分でコードを読む
ブラウザの開発者ツールで通信が発生していないか確認する
オフライン環境で動作確認する
重要な秘密情報や高リスクな情報には使わない

注意点

このツールは、静的HTMLを簡易的に保護するためのものです。

本格的な認証やアクセス制御の代替ではありません。

GitHub Pagesなどにファイルを置いた場合、暗号化されたHTMLファイル自体は誰でも取得できます。

そのため、パスワードが漏れたり、弱いパスワードを使ったりすると、中身を復号される可能性があります。

以下の点に注意してください。

強いパスワードを使う
URLにパスワードを含める場合はリスクを理解する
高機密情報には使わない
本格的な保護が必要な場合は、サーバー側の認証を使う
生成後のHTMLファイルを公開する前に、自分で動作確認する

このツールが向いているケース

このツールは、以下のようなケースに向いています。

個人用のHTMLツールを軽く隠したい
GitHub PagesでURLアクセスできるようにしたい
サーバーを用意せずに使いたい
静的HTMLだけで完結させたい
低リスクな情報を扱うページを簡易的に保護したい

逆に、以下のようなケースには向いていません。

個人情報や機密情報を本格的に守りたい
企業・組織の重要データを扱いたい
厳密なアクセス制御が必要
パスワード漏えい時のリスクが大きい
セキュリティ要件が高いサービスとして使いたい

まとめ

自分用に作ったHTMLサイトを、GitHub PagesなどでURLアクセスできるようにしたい。

でも、そのまま中身を公開したくない。

そういうときに使える、ブラウザ完結型のHTML暗号化ツールを作りました。

正しいパスワードを入れた場合は indexeddb に保存して、次回から入力不要にする仕組みもできなくはないです。
セキュリティ的に弱くなりますが、localstrage ならば複数のサイトでパスワードを共有する事もできます。
総当たりする事で、複数のパスワードに対応もできなくはないです。
しかしながら、キャッシュを消した場合に再入力しなければならない点が使いにくいため、 indexeddb localstrage を活用するのは推奨しません。