Web画像にパスワードをつける方法

Webサイトにアップロードする画像をパスワードを知っている人しか見られないようにするには通常.htaccessによるアクセス制御かパスワード付きのZIP圧縮する方法が一般的ですが、.htaccessはFTP側からは制限ができず、ZIP圧縮ではダウンロードして展開(解凍)作業が必要になります。

FTP側から見ても暗号化されていてダウンロードと展開作業が不要な方法を考えると、PDFのパスワード設定とhtmlのobject要素を使えばWebサイト上でパスワードを入力するだけで画像が表示できそうだと気が付きました。

閲覧にはPDFビュワーが必要ですが最近のブラウザはインストール済み、入って無くても各種OS用のPDFビュワーが無料で入手できます。

Windows版のChrome/Firefox/EDGE/Operaで試して下さい(IEはダウンロードリンクになる事があります)

※Edgeはver42だと表示されません。ダウンロードをクリックしてご覧ください。

パスワードに「test」と入力すると画像が表示されます。（PDFビューワーが無い場合はリンクからダウンロードしてください）

PDFファイルダウンロード

PDFファイルをパスワード付けて作成します。PDF作成にはAdobe Acrobatやフリーソフトなどパスワード付けて保存できる編集ソフトを使います。私はLiberOfficeのDrawを使用しました。

パスワード付きで保存したPDFをアップロードし、Webサイトの表示したい部分に次のタグを書き込みます。（widthとheightは各自で調整してください）、後述のa要素はobject非対応ブラウザ用のダウンロードです（本来はダウンロードはobjectタグの内側に書いた方が良いのですがブラウザがEdgeだと正しく動作しないのでobject外に出しています）

<object data="PDFファイルのアドレス" type="application/pdf" width="300" height="300">
</object>
<p><a href="PDFファイルのアドレス">PDFファイルのダウンロード</a></p>

ブラウザによって動作が違います