クリエイターの作品をまもるプラットフォームを作るためにまず自分で画像を保護するサイトを作ってみる#3
前回は個人的肝入りだったけど結局表示速度の面で使えないとなり没になった話をしました。
実は暫定採用
で、今回いよいよ採用に至った方法について記載するわけですが、とあるサイトで紹介されていた方法ほぼそのまんまです。なので正確には暫定採用です。
こちら。
やってることというとcanvasで画像を表示するわけですがその画像は暗号化したものをjson形式で読み込み、表示側で復号することにより画像ファイルへのアクセスを（少なくとも素直にブラウザから見ている分には）大分困難にします。
大分困難……ではあるのですが残念ながら破る方法はすでに発見されて共有もされています。
こちら。
（ちなみに試したところやり方が悪いのか私の方では表示そのものができんかったので今度再度トライしてみる必要がありそう。）
ただ、一応この点についても対策はしてみた。（けど機能してるかはわからんの。）
webページをダウンロードした状態で表示できることがこの対策の肝であるならばダウンロードされた時点で表示できなくすればいいじゃないという。
表示条件にドメイン設定加えてるだけです。
あとこちらのサイトも可能な限り参考にしました
passwordとsaltを数分毎に変えて、呼び出し先ドメイン指定したapi（少なくともgoogle map APIとかではそんな感じの仕様だったと思うからできそうではあるんだけど）で渡すようにすればまだ希望はありそうな気はする。
が、素人の浅知恵かも知らん。
で、その実相をした場合にawsとかの請求がどうなるのかとかもわからん。
aws公式にお尋ねしてみるのもありだよねなどと思ったりもしている。
（聞くだけならただ。）
……なんか。むっちゃ難しいこと考えてないか？（とても今更）
画像関係を実装した後はモーダル画面ぽくしてかーんせーい（仮）
モーダルはここ参考にしました。
参考サイトはCSS in JS使ってましたが今回はcssModules使ってるのでcssはそれ用に書き換え。
これ見て面白いなと思ったのが、propの値でdomの出力を変えてるところ（もともとpropとはそういうもんや……）
そういえばこういう実装できるんだよなreactって思いましたん。
軽い目から鱗ポイントでした
つことで出来上がったページはこちら（とか言ってマガジン内で何回か共有してる。（計測する気なかったからなんも計測入れてなかったけどちょっともったいなかったかな））
この記事が気に入ったらサポートをしてみませんか？