【初心者向け】web上の画像を表示できず困った際に試したこと【混合コンテンツ】

はじめに

こんにちは。システム事業部の駒崎です。
この度初めてブログを書かせていただきます。
入社後は2年ほどRuby on Railsを用いた開発を中心に行っております。
先日画像の表示で困ったことがあり、備忘録も兼ねて解決に至るまでの過程を書き記したいと思います。

概要

Web(CMS)上に格納した画像をWebアプリから参照した際に表示されない
- ページの読み込みが終わらない
- 待っていると以下の画像がないことを表すマークが表示される

経緯

以前開発したWebアプリ上に、随時更新の必要がある画像を格納していました。
本画像は同じものを二度使用することはなく、都度新しい画像を作成する必要があります。

今までは私を含むシステム担当者がデプロイを行って差し替えていましたが、
システム関連知識やデプロイ作業を必要とせずに更新する方法はないかと考えていました。

そこで、関連業務で利用しており多数のメンバーが扱えるCMS（※）に格納して参照すれば
差し替えが容易になると思い、検証環境で試してみたところ上記の事象が発生しました。

CMSとは

CMSとは、Contents Management System：コンテンツマネジメントシステムの略で、 WEB専門知識がない初心者でも簡単にWEBサイトやホームページの作成・管理・運営ができるソフトウェアシステムを指します。
引用元：https://gmotech.jp/semlabo/seo/blog/cms/

"WordPress"や"Movable type"は有名なので、聞いたことがある・使ったことがある
という方も多いのではないでしょうか。
実際にホームページ公開に利用しており、専門知識がなくても直感的に操作できるため
かんたんに画像の差し替えが出来るのではないかと考えました。

原因の調査

以下試したことを書き連ねていきます。

1. ソースに記述ミスがないか確認

初めは当然自身の記述ミスを疑いました。

<%= image_tag 'http://xx.xxx.xxx.xxx/xx/xxxxx/xxxx/xxx/xxxx.jpg', class: 'banner' %>

特に誤字脱字等はなさそうです。
同画面内の他の画像は表示されているので、パスがおかしいのでしょうか？

2. 格納先のパスを確認

前述したCMS上に画像を格納しているので、格納場所があっているか確認を行いました。
CMS上で画像のパスを確認してみます。

アセットの埋め込み欄のパスを確認したところ、image_tagに記述したURLと同様でした。
image_tagの書き方も画像のパスもあっているのに表示できないようです。

3. アクセス制限の確認

CMSはAWS環境に載せていたので、IPアドレスにアクセス制限がかかっているのではないか？と考えました。
（よく考えなくても開発/デプロイを行っている場所だったので、かかっているわけがないのですが…）

案の定EC2のセキュリティグループを確認したところ、アクセスは許可されていました。
また、この時に画像のURLを直接Chromeのアドレスバーに入力したところ、画像ページに遷移しました。
なぜかwebアプリ上からのみ見ることができないようです。

4. 開発者ツール（エラーログ）の確認

普通に考えればこれを最初にやるべきなのですが、この時は頭が回っていませんでした…
F12を押して開発者ツールを表示し、コンソールを確認します。

エラーが出ていたためこちらで検索してみるも、それらしき原因は発見できず…
しばらく悩んだのちに、1つの違和感に気づきました。

エラー文に書かれているURLがhttpsになっていないか？

前述の通りURLはhttp://~.jpgを指定していたため、httpsに変換されているのではないか？と考え
そのような事象があるのか調べていたところ、以下の記述にたどり着きました。

Chromeでブロックされる混合コンテンツとは？

Chrome84以降ではhttpで接続表示しようとする画像などがあった場合はhttpで読み込まず強制的にhttpsで読み込もうとします。その結果、httpsでの接続表示に対応していない画像などの場合は表示されなくなります。
引用元：https://www.koushinclub.com/blog/2342.html

これだ！と思いました。
httpsのサイトからhttpの画像を表示しようとすると、強制的にhttpsで読み込んでしまうようです。

また、コンソールを確認した際エラーに気を取られて気づかなかったのですが、以下の警告が出ていました。