Nginx が https で CSS/JS/画像をロードしない - 混合アクティブ コンテンツのロードがブロックされました

Nginx が https で CSS/JS/画像をロードしない - 混合アクティブ コンテンツのロードがブロックされました

私はNginx 1.8.0でUbuntu 14.04を実行しています。httpsでWebページを開くと、css/js/画像が読み込まれないため、ページが壊れているように見えます。次のエラーが表示されます。 " Blocked loading mixed active content"

これは私のnginx.confhttps://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/nginx.j2

これは私の仮想ホストファイルです: https://github.com/adithyakhamithkar/ansible/blob/master/roles/nginx/templates/virtualhost_ssl.j2

どなたか、これを修正する方法を教えていただけませんか。

答え1

nginx の設定では修正できません

次の HTML ファイルを検討してください。

  <html>
    <head>
    </head>
    <body>
      <img src="http://example.com/some/image.png">
    </body>
  </html>

このHTMLファイルがhttps経由で提供される場合、いつも混合コンテンツの警告が生成されます。 の後続のリクエストを修正しようとしても機能/some/image.pngせず、リクエストはブラウザによってブロックされ、サーバーに到達しません。

HTMLを修正

唯一の効果的な解決策は、メイン リクエストの HTML ソースを修正して、すべてのアセットもリクエストするようにすることです。つまり、https://HTML を次のように変更します。

  <html>
    <head>
    </head>
    <body>
      <img 
        src="/some/image.png" 
        alt="same domain and port as this html page please"
      />
    </body>
  </html>

あるいはこれ:

  <html>
    <head>
    </head>
    <body>
      <img 
        src="https://example.com/some/image.png" 
        alt="explicit https" 
      />
    </body>
  </html>

コメントではWordPressを例として挙げていますが、WordPressのインストールに必要なのは(原則として、実際には多少の手間がかかることを覚悟して)サイトのURLを変更するhttps://example.comWordPress がインストールのルート URL であると認識するようにします。

答え2

Firefox 23以降では、混合アクティブコンテンツはデフォルトでブロックされるようになりました。他のブラウザについては不明です。

混合コンテンツとは何ですか?

ユーザーが HTTP 経由で提供されるページにアクセスすると、その接続は盗聴や中間者 (MITM) 攻撃に対して無防備になります。ユーザーが HTTPS 経由で提供されるページにアクセスすると、Web サーバーとの接続は SSL で認証および暗号化されるため、盗聴や MITM 攻撃から保護されます。

ただし、HTTPS ページに HTTP コンテンツが含まれている場合、メイン ページが HTTPS 経由で提供されていても、攻撃者が HTTP 部分を読み取ったり変更したりすることができます。HTTPS ページに HTTP コンテンツが含まれている場合、そのコンテンツは「混合」と呼ばれます。コンテンツの一部は HTTP 経由で暗号化されずに取得されるため、ユーザーがアクセスしている Web ページは部分的にしか暗号化されていません。混合コンテンツ ブロッカーは、HTTPS ページ上の特定の HTTP 要求をブロックします。

SSL非対応の静的コンテンツをリンクしているようです。次のようにコンテンツをリンクする必要があります。

<a href='//host.com/file.png>

別のホストからリンクする必要がある場合。

関連情報