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

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

新規登録して質問してみよう
ただいま回答率
85.48%
HTML

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

Q&A

解決済

3回答

2168閲覧

別サーバーに置いた画像が403または302になる

h-y

総合スコア5

HTML

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

0グッド

1クリップ

投稿2020/03/31 00:01

編集2020/03/31 10:10

自分のブログから、別サーバーにある自分の画像ファイル(png)を表示させようとしています。
それがchromeだと403、firefoxだと302のエラーになって読み込めません。
chromeのデベロッパーツールからopen in new tabで開くことはできます。

サーバーのディレクトリは、直下にindex.html、そこに画像用のフォルダと、webフォントとして使うフォント用のフォルダを作っています。
画像のフォルダは2つあって、もう一方のフォルダの画像は表示されます。
フォントの方もちゃんと表示されます。
キャッシュを削除してから見ているので、こちらは大丈夫だと思っています。
パーミッションの設定も問題ないようです(644)。
htaccessファイルも、他のフォルダに置いてあるのと同じものです。

htaccess

1Header set Access-Control-Allow-Methods: GET,PUT,OPTIONS; 2SetEnvIfNoCase Origin "https?://(ユーザー名.blog.fc2.com)$" AccessControlAllowOrigin=$0 3Header set Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin

画像の方はjavascriptから呼び出すようにしてあるのですが、このあたりが原因でしょうか?
ブログのシステム上、javascriptは記事とは別のサーバーに置かれていますので、htaccessにそちらの記述も加えたりしたのですが、だめでした。
以下は、javascriptの関係あると思われる部分です。

javascript

1document.write(' 2<img src="https://ユーザー名.web.fc2.com/iconfiles/' + 3unicode + '.png> 4'); 5

以前はまた違うサーバーに画像を置いていて、ディレクトリ構造やhtaccessも同じでしたが、ちゃんと表示されていました。

情報不足などありましたら教えていただけると助かります。
よろしくお願いします。

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

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

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

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

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

h-y

2020/03/31 06:38 編集

ありがとうございます。 キャッシュのことだったのですか。 firefoxでそのコードが出ている画像を開発者ツールで見ると、表示できないとツールチップが出たので、エラーかと思いました。 でも、キャッシュを使うとしたら画像は表示されます? よね? あっ、すみません、今もう一度確認したら304ではなく302でした。 本当に申し訳ありません。
h-y

2020/03/31 07:17

ありがとうございます。 自分でもステータスコードのことを調べはしたんですけれど、「こういうときは302を返すべき」などの、サーバー管理者向け? と思われる記事が多くてよく分からなかったのです。
退会済みユーザー

退会済みユーザー

2020/03/31 10:21

fc2は外部リンク禁止のはず
h-y

2020/03/31 10:29

ありがとうございます。 今「FC2ホームページ」のFAQで検索しました。 画像の外部呼び出しは制限されていると書いてありました。 質問が的外れだったようでお恥ずかしいです。 他の画像が表示されている理由が分からないのですが、どういうことなのでしょうか。
退会済みユーザー

退会済みユーザー

2020/03/31 10:39

表示される画像が正規ドメインもしくはgoogleで見ているとキャッシュを使うので正常に見えているように見えますよ
退会済みユーザー

退会済みユーザー

2020/03/31 10:41

ちなみに、ホームページサービスとブログサービスは双方ともに外部扱いだったはず
h-y

2020/03/31 10:55

同じFC2のサービス同士でも外部扱いということでしょうか。 Googleで見るというのは、Googleがweb上の様々なデータをキャッシュしていて、それが使われているということですか? 一度ページを開いて、画像が表示されないのを確認したあと、再読込すると表示されることがあるのですが、これはブラウザにキャッシュされているものと考えていいでしょうか。 キャッシュをクリアするとまた非表示になり、他方の画像はその後も表示されます。 すみません、サービスで想定されていないことをしていたのは分かったのですが、どうしてこういうことになったのか知っておきたいのです。
guest

回答3

0

imgタグにcrossOrigin="anonymous"を付けてみるとどうなりますか?

.htaccessで、リクエストヘッダーのOriginをみてますが
Originヘッダーが送信されてないのかもしれません。
(そのindex.htmlのURLがhttps://ユーザー名.blog.fc2.com/以下のものである前提ですが)

投稿2020/04/01 04:26

Y.H.

総合スコア7914

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

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

h-y

2020/04/01 14:39

回答ありがとうございます。 crossOrigin="anonymous" を追加してみましたが、表示されませんでした。 いろいろ試してみたのですが、同じディレクトリにあるファイルでも、種類によってGETできるものとできないものがあるようです。 これはfc2ホームページ自体の仕様なのかもしれないと考えました。 crossorigin属性を追加することによってレスポンスヘッダが変わったように見えることも勉強になりました。
guest

0

ドメインが異なるものを取得しようとしてもブラウザ側で拒否されると思いますよ。

オリジン間リソース共有 (CORS)

上記はFirefox(というかMozilla)の記事ですが、たしかChromeでも同じです。
Firefoxは記憶にありませんが、Chromeの場合はDeveloperツールでクロスオリジンがどうのこうのとエラーが表示された記憶があります。

サーバ側で許可するか、同じ場所に置きましょう。

投稿2020/03/31 07:31

FiroProchainezo

総合スコア2401

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

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

h-y

2020/03/31 07:37

回答ありがとうございます。 画像を置いているフォルダにはhtaccessファイルも置いていて、自分のブログからはGET(?)できるようにしてあります。 画像が入ってるフォルダと同じ階層に、フォントが入っているフォルダ、もうひとつ、別の画像が入っているフォルダもあって、そこにも同じhtaccessファイルを置いていますが、そちらはクロスオリジンでエラーになることもなく表示されています。 表示されない画像の方も、コンソールにはクロスオリジンでのエラーは出ていないんです。
FiroProchainezo

2020/03/31 08:32

> 画像を置いているフォルダにはhtaccessファイルも置いていて、自分のブログからはGET(?)できるようにしてあります。 どうやって確認したのでしょうか? > 画像が入ってるフォルダと同じ階層に、フォントが入っているフォルダ、もうひとつ、別の画像が入っているフォルダもあって、そこにも同じhtaccessファイルを置いていますが、そちらはクロスオリジンでエラーになることもなく表示されています。 状況がさっぱりわかりません・・・。 どこからどうやってアクセスして表示されるとおっしゃられているのでしょうか? ご自身が実施したことを、他の方がわかるように記載いただけないのはなぜでしょうか? そもそも、サーバの構成、.htaccessの記述、javascriptの記述、ファイル構成、等々を提示いただけないのはなぜでしょうか。 推奨していない質問に当てはまるのを認識されていますか? https://teratail.com/help/avoid-asking 分かり安い質問にするために、まずソースを追加しましょう。
h-y

2020/03/31 09:59

ご指摘ありがとうございます。 情報が足りなすぎたこと、認識できておりませんでした。 自分のブログからは持ってこられると考えたのは、同じスペースに置いてある他のファイルが、同じ記述のhtaccessファイルで表示されているからです。 ファイルの中身は質問の方に追加した方がいいですよね。 編集します。 ありがとうございます。
guest

0

ベストアンサー

ブラウザ側のセキュリティ設定などは確認されたでしょうか。

別のサーバー(サイト)の画像を利用する場合、リモート側のサーバーがセキュリティ的に承認されていない場合、ブロック対象になってしまう設定が「あったような、なかったような」。

また、楽天ブログ?などブログサービス提供者の仕様で、外部サイトへのリンクを拒否する仕様になっている場合もあります。

投稿2020/03/31 00:44

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

h-y

2020/03/31 06:39

回答ありがとうございます。 セキュリティソフトのプラグインがchromeに入っていまして、広告ブロッカーなどもオフにしてみましたが表示できませんでした。 firefoxには拡張機能は入っていません。firefoxを起動するとセキュリティソフトから「拡張機能入れた方がいいよ」というお知らせが表示されます。 他のフォルダにある画像やフォントは表示されるので、こちらの環境かどうかちょっと分からないのです。 やっぱりjavascriptから呼び出しているのが良くないのでしょうか。 chromeではrequest mothod: GET、status code: 403 Forbidden、refererはjavascriptが置いてある場所ではなく、ブログの記事が置いてあるサーバーが表示されています。 質問したときはfirefoxのコードが302だったんですが、今確認したらこちらも403になっていました。 で、分かりにくいんですけれど、「発生源」が「img」になっていて、「要求URL」がそのサーバーのものと思われる「https://error.~/403.html」となっています。 不勉強で申し訳ないのですが、htaccessに書いたものはrefererと照合するということでいいのでしょうか。 javascriptが置いてあるサーバーでなく、そのjavascriptを読み込んで画像を表示させようとしているサーバーの方で……ということなんですけれど。
退会済みユーザー

退会済みユーザー

2020/03/31 09:46

差し支えなければ、ブログは自前のものでしょうか?それともamebaや楽天などのブログサービスでしょうか?また、自前のブログの場合、どちらのサーバーを利用していますか?自前のブログはどちらのブログ(ワードプレス・ムーヴァブルタイプ・そのほか)でしょうか。
h-y

2020/03/31 09:55

ブログはFC2です。 画像を置いているのは、つい先日までは自分で取得したドメインをXREAで管理していました。 今はFC2ホームページのスペースに置いています。
退会済みユーザー

退会済みユーザー

2020/04/01 01:56

下記の記事をご確認ください。 https://vanillaice000.blog.fc2.com/blog-entry-533.html 私も不勉強で、、Javascript経由で画像を読み込む方法などはわかりません。 もしかしたらiframeで外部サイトにおいたhtmlに画像を埋め込んで表示させればうまくいくかもしれません。 ただ、今後ブログの設置場所と異なるサーバーにファイルなど設置して管理するのは、ブラウザ側でセキュリティ的に排除対象になりそうです。ホスティング側で掲載内容の審査を行う上でも厳しくせざるを得ないからだと思われます。
h-y

2020/04/01 14:47

たびたびありがとうございます。 リンク先確認しまして、fc2ホームページだけでなく、ブログの方でもよろしくないとされている行為だったんだと分かりました。 fc2ブログにはアップロードできないファイルの種類があって、どうしてもそれを表示させたいなら、おっしゃるとおり、iframeなどで対応するしかないのかもしれません。 参考記事まで調べてくださってありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問