はじめに
業務において、パスワードや機密情報を安全に送る方法は常に課題です。
パスワード付きZIP（PPAP）の廃止が進む中、代替案として「チャットとメールの使い分け」などが一般的ですが、誤送信のリスクはゼロにはなりません。
そこで、「鍵をかけて守る」のではなく**「秘密があること自体を隠す」**というアプローチとして、画像の中にメッセージを隠蔽する「ステガノグラフィ」ツールを作成しました。
作ったもの
ツール名：ひみつぽっけ
ひみつぽっけ -ツールページ
- 機能: 任意の画像（PNG推奨）の中にテキストを埋め込み、またその画像からテキストを抽出する。
- 技術: JavaScript (Canvas API), LSBステガノグラフィ
- 特徴: 100%クライアントサイド（ブラウザ内）で処理を完結。
一見ただの画像ですが、その中にテキストデータを埋め込んでいます。
技術的な仕組み：LSB（Least Significant Bit）法
今回採用したのは、画像の各ピクセルのRGB値の「最下位ビット」を書き換える手法です。
コンピュータにとっての「色」は、R・G・Bそれぞれ8ビット（0〜255）で表現されます。このうち、最も数値に影響の少ない「1ビット目（最下位ビット）」を隠したい情報のバイナリデータに置き換えます。
色の変化は最大でも $\frac{1}{255}$ であり、人間の肉眼で元の画像との差異を判別することは不可能です。
実装のポイント
JavaScriptのCanvas APIを使用して、ピクセルデータ（Uint8ClampedArray）を直接操作しています。
- ctx.getImageData() でピクセルの配列を取得。
- テキストをバイナリに変換。
- RGB各チャンネルの最下位ビットを、テキストのバイナリデータに置換。
- ctx.putImageData() で再描画。
// 実装イメージ：RGB値の最下位ビットを binaryDigit (0 または 1) で置き換える
data[i] = (data[i] & 254) | parseInt(binaryDigit);
「ブラウザ完結」へのこだわり
このツールの最大の特徴は、画像を一切サーバーに送信しないことです。
バックオフィス業務では機密情報を扱うため、いくら便利でも「外部のサーバーに画像やパスワードをアップロードする」ことはそれ自体がリスクになります。
WebCrypto APIやCanvas APIを駆使し、すべての処理をクライアントサイドで行うことで、物理的にデータ漏洩が起こらない設計にしました。
課題と注意点
- 画質圧縮に弱い: JPEG形式のように保存時に圧縮がかかるフォーマットだと、埋め込んだビットが壊れてしまいます。PNG形式が必須です。
- SNSの自動加工: 一部のチャットツールでは画像が自動でリサイズ・圧縮されるため、その場合もデータが消失します。
おわりに
「ガチガチの暗号」も大切ですが、こうした「存在を隠す」という工夫も、現場のセキュリティ意識を高める一つのきっかけになれば面白いなと思っています。
よろしければ、改善点などのフィードバックをいただけますと幸いです。