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

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

ただいまの
回答率

90.38%

  • Ruby

    9946questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 5

    3591questions

  • nginx

    1079questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • SSL

    623questions

    SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

  • Amazon EC2

    224questions

    Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。

ActiveStorageにてHTTPS経由で画像を表示

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 64

napojin

score 2

前提・実現したいこと

certbot-nginxでnginx設定への自動書き込みを行い、ssl証明書を発行し、httpsでアクセスできるようにしたところ、activeStorageの画像がhttp://[domain]/rails/active_storage/blobs/xxxxxxxxxx/image.jpg
で表示されるために

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure image '<URL>'. This content should also be served over HTTPS
「混合コンテンツ: '<URL>'のページはHTTPS経由でロードされましたが、安全でない画像 '<URL>'を要求しました。このコンテンツもHTTPS経由で配信する必要があります」

というエラーが起きます。
activestorageの画像urlを強制的にhttpsにする方法を教えていただきたいです。
なお、それ以外の部分は正しく表示されています。

写真

https://gyazo.com/4ab07bc80e1acc524463e843ae2fc103

環境

Amazon Linux 2
Rails 5.2.1
ruby 2.4.2
(アプリケーション、ウェブサーバー)
nginx version: nginx/1.12.2
unicorn 5.5.1
(ssl証明書)
python2-certbot-nginx 0.34.2-1.el7 
certbot 0.34.2-3.el7certbot-nginx 0.34.2-3.el7

発生している問題・エラーメッセージ

Mixed Content: The page at '<URL>' was loaded over HTTPS, but requested an insecure resource '<URL>'. This request has been blocked; the content must be served over HTTPS.

該当のソースコード

(発行した証明書情報)
Certificate Name: [domain]
    Domains: [domain]
    Expiry Date: 2019-10-06 09:16:15+00:00 (VALID: 89 days)
    Certificate Path: /etc/letsencrypt/live/[domain]/fullchain.pem
    Private Key Path: /etc/letsencrypt/live/[domain]/privkey.pem
certbot 0.34.2-3.el7certbot-nginx 0.34.2-3.el7
(/etc/nginx/conf.d/myapp.conf)
# log directory
error_log  /var/www/rails/myapp/log/nginx.error.log;
access_log /var/www/rails/myapp/log/nginx.access.log;
# max body size
client_max_body_size 2G;
upstream app_server {
  # for UNIX domain socket setups
  server unix:/var/www/rails/myapp/tmp/sockets/unicorn.sock fail_timeout=0;
}
server {
  server_name [domain] [IP];
  # nginx so increasing this is generally safe...
  keepalive_timeout 5;
  # path for static files
  root /var/www/rails/myapp/public;
  # page cache loading
  try_files $uri/index.html $uri.html $uri @app;
  location @app {
    # HTTP headers
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_redirect off;
    proxy_pass http://app_server;
  }
  # Rails error pages
  error_page 500 502 503 504 /500.html;
  location = /500.html {
    root /var/www/rails/myapp/public;
  }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/[domain]/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/[domain]/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


}

server {
    if ($host = [domain]) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


  listen 80;
  server_name [domain] [IP];
    return 404; # managed by Certbot


}

試したこと

1: fileアップロード先であるs3にてプロパティ -> static website hosting設定にて
「ウェブサイトのホスティングを無効」 から バケットを指定してhttpsプロトコルにリダイレクト
に変更。

2: Railsのconfig/environments/production.rbにて以下を追記

Rails.application.configure do
config.default_url_options[:protocol] = 'https'
...
end

3: アクセス権限->CORSの設定にhttp以外にもhttpsでの許可を追加した
...
<CORSRule>
<AllowedOrigin>https://xxxx</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>

4: config/initializersにforce_ssl.rbというファイルを新規作成
( https://medium.com/@stacietaylorcima/rails-active-storage-serve-your-images-over-https-14b916c67a51 を参考にした)

(force_ssl.rb)
if Rails.application.config.force_ssl  
Rails.application.routes.default_url_options[:protocol] = ‘https’
end

補足情報(FW/ツールのバージョンなど)

起きている問題はこちらの記事と同じものと思われますが、こちらの解決法を真似しても効果はありませんでした。
https://medium.com/@stacietaylorcima/rails-active-storage-serve-your-images-over-https-14b916c67a51
こちらの記事が記載していないプラグインもしくはバージョンの違いがあるのかもしれません。わかる方よろしくお願いします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

check解決した方法

0

設定ファイルでプロトコルをhttpsにしてもactiveStorageの画像はhttpのままだったので、結局、相対パスを使ってwebページのプロトコルが引き継がれるようにしました。herokuで使ってたときは、何も気にせずにきちんとhttpsで表示されてたんですが...
とにかくエラーやトラブルはなさそうなので、これで行きます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る

  • Ruby

    9946questions

    Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

  • Ruby on Rails 5

    3591questions

  • nginx

    1079questions

    nginixは軽量で高性能なwebサーバーの1つです。BSD-likeライセンスのもとリリースされており、あわせてHTTPサーバ、リバースプロキシ、メールプロキシの機能も備えています。MacOSX、Windows、Linux、上で動作します。

  • SSL

    623questions

    SSL(Secure Sockets Layer)とは、暗号化されたプロトコルで、インターネット上での通信セキュリティを提供しています。

  • Amazon EC2

    224questions

    Amazon EC2は“Amazon Elastic Compute Cloud”の略称です。Amazon Web Services(AWS)の一部であり、仮想化されたWebサーバーのコンピュータリソースをレンタルできるサービスです。