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

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

環境

サーバーは２台
- １台はnginxリバースプロキシ用Webサーバー
  - httpsアクセスを受け付け、ローカルネットワーク上のrailsにhttpで転送してる
- もう１台は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テンプレートをそのまま使ってるんだけど最初からこんな感じで書かれてた。 //で始めると自動的にhttpかhttpsを選択して出力してくれるんだろうな、たぶん。

対応１（失敗）

そんなら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"]

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