HTMLのディベロッパーツールでimgタグのsrc属性を隠蔽したい

Question

実現したいこと

htmlのimgタグのsrc属性に関して、画像を読み込んだ後にsrc属性を書き換える等して画像のパスを隠蔽(ダミーのパス等)したいです。
隠蔽する対象は、ディベロッパーツールのelementsのみになります。

発生している問題・分からないこと

javascriptでページ読み込み完了後、imgタグのsrc属性を書き換えると書き換え後の画像を表示しようとしてしまいます。

該当のソースコード

特になし

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

新しいパスに書き換えても再読み込みは防止できず、遅延読み込みで画像のロードを遅くすることしかできないようです。

補足

ruby: 3.0
Rails: 6.0

Comments

[Lhankor_Mhy]

HTMLやJavaScriptでは無理じゃないですかねえ……
方法があるとしたら、サーバの方で画像URLの応答をコントロールするとかでしょうか。

[yambejp]

書き換えなくてはいけない理由は何でしょうか？
画像見えるけど参照できないというのは合理的ではないですが？

[nobu09]

> Lhankor_Mhy さん
ご回答いただきありがとうございます。
やはり、フロント側では難しいとうことですね。

[nobu09]

> yambejp さん
ご回答いただきありがとうございます。
特殊な画像を使用しているので、できる限りダウンロードやコピー等を防ぎたいと思っています。
このような条件下において、合理的な方法はあるのでしょうか。

[tmp]

Google Booksが試し読みの画像などをダウンロードしにくい仕組みが盛りだくさんはいってたような気がしますが、今、見たらリニューアルされてる？「従来の Google ブックスに戻る」が残ってましたが
私のあいまいな記憶でわるいのですが、ディベロッパーツールのelementsで指定しにくいような仕組みでは、elementsをクリックで選択させないように透明elementsがあったり、絶対位置していなどを利用して、階層になってなくてたどるのも面倒だった気がします。一度、確認してみてはどうでしょうか？

それでもFirefoxならなにもインストールすることなしに、ページ情報からメディアデータのURL一覧があり、ダウンロードできてしまうのですが・・・Chromeってページ情報機能がないのか、見つからない。

Answer 1

src 属性値を隠すことはできません。画像の不正利用を防ぎたいなら、URLがわかっても簡単にはアクセスできないようにすることはできます。

• サーバ側で Referer ヘッダが期待するものではない場合はアクセスを拒否する、または
• 画像には暗号化や難読化を施しておいて、サーバはそれを送信、ブラウザで元に戻して createObjectURL() で一時的なURLを生成して src 属性にセットする

---

もしくは、DRM を使えるかもしれません。Encrypted Media Extensions で動画の DRM ができるので、<video> に一時停止した状態の動画を表示すれば <img> の代わりになります。

Comments

[nobu09]

ご回答いただきありがとうございます。
3件もの代替案をいただき、ありがとうございます。
各内容について調べてみます。

[nobu09]

調べてみたところ、これらの方法で期待する動作になりそうでした。
どうもありがとうございました。

Answer 2

特殊な画像を使用しているので、できる限りダウンロードやコピー等を防ぎたいと思っています。
このような条件下において、合理的な方法はあるのでしょうか。

現状画像ファイルを直接参照させているのであればダウンロードやコピーやプリントアウトを防ぐことはできません。公開するということはそういうことです。ある程度偽装はできても結局ネットワークのトラフィックデータを見れば特定はできますし

たとえばNFTや電子透かしなども二次再生を付加にするようなコピーガードとしての機能はありません。とく画像の場合は動画とも違い大抵のものはソフトウェア的キャプチャーやスマホで撮影することで複製されてしまいます。また一度複製されたデータはデジタルタトゥー的にネット上に拡散されます。
守秘性の高いデータや未発表の重要データは安易に参照できるようにしないか、特殊な再生装置でのみ参照されるようにしてください。

Comments

[nobu09]

ご返信いただきありがとうございます。
私の表現の仕方が曖昧で、お手を煩わせてしまい申し訳ありません。
もちろん、説明していただいた方法でダウンロードや複製等が可能であることは承知しております。
ですので、右クリックからの画像保存やディベロッパーツールでぱっと見確認できる画像パスへの直接アクセスといった単純な方法への対策を模索しております。

[yambejp]

たとえば、ネット上に上げる画像を特定キーで暗号化しておき、fetchで取得後複合してblobで埋め込む、ただblobファイルも結局画像としてDLされてしまうのでSVGのimageに埋め込み、上にrectでラップしてしまう・・・など、理論的には難読化することは可能ですが、そこまでするなら画像の埋め込みではやらないほうがマシだと思います

[nobu09]

回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。