質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.39%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

373閲覧

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

nobu09

総合スコア35

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1グッド

2クリップ

投稿2024/03/28 06:44

実現したいこと

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

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

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

該当のソースコード

特になし

試したこと・調べたこと

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

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

補足

ruby: 3.0
Rails: 6.0

ams2020👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Lhankor_Mhy

2024/03/28 07:03

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

2024/03/28 07:37

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

2024/03/28 22:19 編集

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

2024/03/28 22:19

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

2024/03/29 03:17

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

回答2

0

ベストアンサー

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

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

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

投稿2024/03/28 08:33

int32_t

総合スコア21525

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nobu09

2024/03/28 22:21

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

2024/03/31 07:51

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

0

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

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

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

投稿2024/03/29 01:20

yambejp

総合スコア116176

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

nobu09

2024/03/29 01:48

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

2024/03/29 03:31

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

2024/03/31 07:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.39%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問