twitterやinstagramなど、imgタグのsrc属性の指定方法??がわかりません。

タイトルの問題に行きついた経緯

まず、タイトルの問題に行きついた経緯から説明させていただきます。
今現在、pythonの、Djangoでwebアプリを開発しています。
このwebアプリですが、スクレイピングしてきた画像情報を保存し、写真一覧で保存した画像を表示するアプリになっています。
この画像の保存方法がDBで画像のパスを保存し、画像はmedia/user_[user_id]のディレクトリで保存しています。

表示する際には、DBに保存したパスを取得し、imgのsrc属性に貼り付ける形をとっています。
ですが、ブラウザの検証ツールで、src属性のパスを現在ログインしているユーザーではない、ユーザーのIDに変更し、ファイル名を変更すると、他のユーザーが保存した画像ファイルを閲覧できてしまいます。

HTML
1<img id="2" src="/media/user_2/あ_8.jpg" alt="" width="" height="">
2
3//  上記のコードを下記のコードに変更すると、他ユーザーの画像データを表示できてしまう。
4<img id="2" src="/media/user_1/い_1.jpg" alt="" width="" height="">

上記の問題を解消すべく、twitterや、インスタのweb版では、「どのようなsrc属性で指定し、表示しているのだろう」と思い至り、ブラウザでの検証ツールで調べたところ下記のimgタグの指定方法が見つかりました。

HTML
1// Twitter
2<img alt="Image" draggable="true" src="https://pbs.twimg.com/media/FRgBIikaUAAx5mG?format=jpg&amp;name=360x360" class="css-9pa8cd">
3
4// Instagram
5<img crossorigin="anonymous" class="FFVAD" src="https://scontent-itm1-1.cdninstagram.com/v/t51.2885-15/280807774_1099021497344224_8793676807419418101_n.jpg?stp=dst-jpg_e35&amp;_nc_ht=scontent-itm1-1.cdninstagram.com&amp;_nc_cat=104&amp;_nc_ohc=l2Va3pIFpl8AX-t0kP4&amp;edm=AIQHJ4wBAAAA&amp;ccb=7-4&amp;ig_cache_key=MjgzNzE0ODk1MDcwNTU2NTgzNw%3D%3D.2-ccb7-4&amp;oh=00_AT_OR9PQ9Uzrx3gicRTyC1zunW-qAk2vq3yl4KwswvKRPQ&amp;oe=62882889&amp;_nc_sid=7b02f1" style="object-fit: cover;">

質問内容

上記のimgタグの指定方法を知っている方はいっらしゃるでしょうか？
いらしたら、解答よりしくお願いいたします。
また、方法はわからなくても、上記のsrc属性のURLにアクセスした際に、処理している内容を憶測でも構いませんので、意見をお願いいたします。
さらに、上記のwebアプリでの問題を解消するためにいい案がありましたら、教えていただけると幸いです。

謝罪

私は、こういった質問をするのは2回目です。
そのため、上記の文で分かりにくい箇所があると思いますが、わかりにくい箇所や、意味が分かりにくい箇所がありましたら、ご指摘お願いいたします。

javahack

2022/05/16 01:30

そもそもスクレイピング自体許可されているかサイトの規約を確認しましたか？画像等のコンテンツの二次利用についても確認した方が良いです。

yohei4

2022/05/16 11:16

修正依頼ありがとうございます。質問の内容が分かりにくくて申し訳ないありませんでした。 SNSからスクレイピングしてきた内容を保存するアプリではないです。単純に、imgのsrc属性に指定している内容が気になっただけなのです。気になった経緯として、上記で述べている通り、画像表示をする際に、現在ログイン中のユーザーではない、ユーザーの保存してある画像を表示させないためには、どのようにしたらいいのかを質問してました。そこで、調査した結果SNがとてもいい参考になるのではと思い、SNSがsrc属性に指定している方法をお聞きしたかっただけです。質問の内容が分かりにくく本当申し訳ありませんでした。🙇‍♂️

行動規範の内容に同意します

回答1件

ベストアンサー

上記の問題を解消すべく、twitterや、インスタのweb版では、「どのようなsrc属性で指定し、表示しているのだろう」

質問者さんが懸念している通りの問題を回避するべく、
各SNSでは、画像のURLに直接アクセスするのではなく、
特定のパスにアクセスした際に、サーバー側で、サーバー上のどこかの画像を（下手したらドキュメントルートより上）引っ張ってきて、画像を返す、としているのでしょう。
Instagramはわかりませんが、Twitterでは、画像パスにトークンが使用されているため、ほぼ間違いないかと。
（Instagramも、なんらかの処理で、画像直接にはそう簡単にアクセスできないようになっていると思われる）

上記のimgタグの指定方法を知っている方はいっらしゃるでしょうか？

各SNSで、そういった、ユーザー投稿の画像を取得できるAPIが用意されているはずなので、
それを利用してください。
そうすれば、合法の画像アクセスとなります。

ただし、

この画像の保存方法がDBで画像のパスを保存し、画像はmedia/user_[user_id]のディレクトリで保存しています。

画像を表示させるのではなく、
自身のサーバーに保存するのは、
各SNSの規約違反にならないかは、よくよくご確認ください。

なので、APIで画像URLを取得 → img要素で表示、
に止めておいたほうがいいかと。

投稿2022/05/16 05:37

miyabi_pudding

総合スコア9528

yohei4

2022/05/16 11:04

回答ありがとうございます。画像は、直接アクセスさせずに、画像をレスポンスするためのURLをあらかじめ作成しているのですね。自分もそのような機能を実装してみたいと思います。各SNSから、画像を持ってくるときには、表示だけで留めておこうと思います。ご忠告ありがとうございます。分かりやすい回答でしたので、ベストアンサーに選ばせていただきました。また、質問したときに回答していただけると幸いです。🙇‍♂️

行動規範の内容に同意します