読者です 読者をやめる 読者になる 読者になる

naichi's lab

3日後の自分(他人)への書き置き

【Rails】nginxリバースプロキシを利用したHTTPSサイトで、HTTP混在エラー(Mixed Content)が表示される(調査中)

Ruby on Rails 4 nginx Error

表題の通りのエラーが出たので対応内容メモ。

環境

  • サーバーは2台
    • 1台はnginxリバースプロキシ用Webサーバー
      • httpsアクセスを受け付け、ローカルネットワーク上のrailsにhttpで転送してる
    • もう1台はrailsアプリケーション用(DBとか含む)
      • nginxからhttpで接続される

現象

ブラウザでアクセスするとURLの横に下記メッセージが出てた f:id:naichilab:20160428055953p:plain

さらにブラウザのコンソールを開くと下記エラーが残ってる

Mixed Content: The page at 'https://unityroom.com/games' was loaded over HTTPS, 
but requested an insecure stylesheet 'http://fonts.googleapis.com/css?family=Open+Sans:300,400,700'.
 This request has been blocked; the content must be served over HTTPS.

HTTPSのURLに接続してるのにHTTPのURL読み込もうとしてるから危険だよ!!ってやつですね。

現状

Rails側の実装はこんな感じ

application.html.slim

/! Web Fonts
link[rel="shortcut" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin"]

CSSテンプレートをそのまま使ってるんだけど最初からこんな感じで書かれてた。 //で始めると自動的にhttphttpsを選択して出力してくれるんだろうな、たぶん。

対応1(失敗)

そんならhttpsって書いちゃえばいいじゃない。ってことで、Rails側を修正

- Rails.env.development?
  link[rel="shortcut" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin"]
- else
  link[rel="shortcut" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin"]

stagingproduction(development以外)はhttps接続できる様にサーバー構築済みなのを利用したごり押し。

対応1の結果

同じエラーが出る。ダメだった。

f:id:naichilab:20160428060937p:plain

htmlのソース見るとちゃんとhttpsになってるのに・・・なんで。

対応2(案)

nginxの設定とかでrails側が//から始まるURLでちゃんとhttpsを返すようにできるんじゃないかな。

調査中だけど時間ぎれなので続きはまた。