前回の第二部では課題と技術的制限を付き合わせて仕様を見定めました。今回はその仕様に沿って作成したデモ・サービスの紹介です。
7. 実際に動かしてみる
前二部で述べた仕組みをWebサービス（デモ環境）にしたので、それを皆さんに使ってみていただきたい。実際には皆さんのようなIT知識が豊富な人々ではない利用者にこそ使ってもらい課題の解決に役立てたいので、皆さんにそのような人々の気持ちを感じてもらうためにお見せする内容は意図的に絞ってシンプルにしました。特に「これを使って子供や女性が悲しい目に合わなくて済む助けになるだろうか？」という、彼ら自身や彼らの家族の目線でみていただけると有り難いです。
7.1. JPEG画像をエンコードする
私の管理下のサーバーにこの仕組み用に画像をエンコードするページ（Qiita管轄下ではない外部サイトです。）を置きました。
Step-1： エンコードするJPEGファイルを指定します
画像形式： JPEGまたはPNG、動画形式：MP4
ファイルサイズ： 最大3MB
に限定します。サーバー側では高速処理のため揮発性メモリ上で処理をして画像は保存しませんが、念のためプライバシーの問題にならなそうな無難な画像を使ってください。
Step-2： デコードして表示しても良いページのURLを記入
その画像が貼られた際にデコードされて見えることを許可するドメインです。例えば、あなたが『https://anata.com/blog/』 というURLで始まるのブログサイトを持っていて、そこに画像が貼られた場合だけは画像をデコードして表示しても良いという場合は『https://anata.com/blog/』 と記入します。なお、プロトコルはhttpsのみで正常挙動します。httpでは正常には挙動しません。
Step-3： デコードして表示しても良い期限の日時を記入
画像には著作権や肖像権があるので、画像のオーナーがその法的権利を適切に行使できるよう、表示許可期間を指定できるようにしました。また、未成年者が（困ったことに）相手との関係が悪くならないよう請われて裸の画像を送ってしまったりすることが多発しているそうなので、個人的には「そんな関係なら切りなさい！」と小一時間の説教をしたいくらいなのですが、それが見通せないのが子供なので、せめて数分間ほどの閲覧可能時間を指定することにも使えるのかなと。時間設定はUTCであり、日本時間ー９時間です。
Step-4： 「エンコード」ボタンを押してエンコード開始
数秒でブラウザにエンコード済みの画像がダウンロードされます。ダブルクリックして開いてみるとグレーまたはブラックの画像です。これをご自身のパソコンに保存しておいてください。ここでは「sample_jpg_eclips」という仮の名前にして、次節のhtmlにて記載します。
7.2. エンコードした画像をHTMLに貼ってみる
次に、上記でエンコードした画像をHTMLに貼り、デコードがされるように「jQueryとECLIPSのJavaScriptをheadにインクルード」及び「画像のimgタグにprotect-imageというクラスを追加」しましょう。記述例は下記です。なお、ここで作ったhtmファイルは、画像をエンコードした際に指定した「デコードして表示しても良いページのドメイン」の配下に置く必要があります。エンコードした画像はanata.comのドキュメントルート直下のblogフォルダにsample_jpg_eclipsという名前でおいたことにしてあります。みなさんの環境でここは適宜書き換えてください。
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml" lang="ja">
<head>
<title></title>
<!-- Meta tag -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="content-language" content="ja" />
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
<!-- Java Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://www.electric-blue-industries.com/eclips-image.js"></script>
</head>
<body>
<!-- ここに画像を指定。指定する画像はエンコードされた画像 -->
<img class="protect-image" src="https://anata.com/blog/sample_jpg_eclips" width="480">
<p>暗号化されているが解除プロセスにかけた画像</p>
</body>
</html>
8. ハッキングしてみよう！
上記で用意したhtmファイルにブラウザでアクセスして見ましょう。画面にエンコードしたはずの画像がデコードされて表示されましたか？ページを開いた直後に一瞬だけグレーかブラックの画像が表示され、直後にデコードされた画像におきかわりませんでしたか？画像の上には白い文字で、アクセスした時刻とあなたの端末のホスト名が表示されていますよね？その状態になったら、ハッカーになったつもりで、この仕組みの弱点を探して見ましょう。
- ブラウザの機能を用いて、エンコードした時の状態のプレーンな画像を保存できますか？
- HTMLを読んで画像のURLを探して直接取得できますか？HTTP404エラーが出ますよね？
- でも、ブラウザのリロードボタンを押した場合は毎回画像は表示されますよね？
などなど、エンコードした時のプレーン画像を取得できるか試して見てください。
ご自身でhtmファイルを作成してご自身のサーバーにおいた方は、そのhtmファイルをローカルで開いた時には画像がデコードされないことをご確認ください。また、エンコード時に許可していないドメインにおいた場合もデコードされません。これは、その画像がどこのドメイン配下のページで表示されようとしているかを判別して、エンコード時に許可したドメインだけで表示するためです。
なお、画像表面にアクセス日時とアクセス端末名が記載されるので、これを拡散すれば拡散元の人物は特定可能です。表示する位置については改善が必要と考えています。しかしながら、画像の販売が目的で、購入者にはこのタイムスタンプとホスト名を除去してあげたい場合もあるでしょう。そういう場合は（今回は省きましたが）エンコード時にパスワードを指定し、購入者がそのパスワードを使ってタイムスタンプとホスト名が無い画像を取得するという方法も可能です。また、諸般の事情によりタイムスタンプとホスト名はいらないよという場合もエンコード時に指定可能です。
9. ひとまずまとめ
ものすごい駆け足でのご提案となりましたが、雰囲気を掴んでいただけましたでしょうか？この投稿では仕組みの概要をシンプルなデモでご案内しました。この方法で社会の課題（特に子供や女性が理不尽な悲しい目に遭う事件）が減らせたらいいなと切に思います。実際のサーバー側のデータ処理を見ていると結構重い処理をしています。ですので、本気でやるとしたら設備にお金がかかりそうなので、「未成年者は無料、大人と企業は有料」のようなビジネスとして運用資金を調達して行かざるを得ないなと思います。
皆さんからのコメントをいただけると有り難いです。特に「ここがダメ」のような至らぬ点のご指摘ほど有り難いです。なお、もし更なる投稿のご要望があった場合は検討させていただきます。
長い投稿となりましたが、ここまでお読みくださった皆様に心から感謝申し上げます。