IISでリバースプロキシを設定し、HTTPSサイトでHTTP画像を表示する

はじめに

社内向けのシステムや限定された環境で運用されるサイトでは、公開範囲や運用上の事情から、HTTPS 化が十分に進んでいないケースがあります。そのため、HTTPS で公開しているページから HTTP の画像を読み込むと、ブラウザーにブロックされることがあります。

実際に、HTTPS サイトに HTTP で配信されている画像を表示する必要に迫られ、IIS のリバースプロキシを使って対応したので、そのときの設定や確認手順を、備忘録としてまとめます。

導入

問題

近年はブラウザのセキュリティも上がり、HTTPS で公開しているサイトから HTTP で画像を読み込もうとすると、画像が表示されず空白になります。

(引用：What Is Mixed Content? | HTTP vs. HTTPS)

ブラウザの開発者ツール（コンソール）にも、混在コンテンツ（Mixed Content）に関するエラーが表示されます。

そこで、HTTPS サイトから HTTP の画像を読み込む問題は、リバースプロキシを使って回避できます。この記事では、IIS で動作するサイトを例に、IIS にリバースプロキシを設定し、画像配信元へ HTTP でアクセスする方法を紹介していきます。

同様の考え方は IIS 以外のWebサーバーやリバースプロキシでも利用できます。また、画像に限らず、CSS や JavaScript などの他の HTTP アセットにも応用可能です。

構成

以下のような流れを想定しています。

ユーザーは HTTPS で IIS 上のサイトにアクセスします。IIS のリバースプロキシが画像配信元へ HTTP で画像を取りに行き、取得した画像を HTTPS 経由でユーザーに返します。

IIS での設定

先に IIS マネージャー上で、対象サイトの Application Request Routing (ARR) プロキシ機能の有効化してください。

対象サイトの web.config に、画像へのリクエストを HTTP の画像配信元へ転送するリバースプロキシのルールを追加します。web.config がない場合は作成するか、IIS マネージャーでルールを設定します。

.xml

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rule name="ImageReverseProxy" stopProcessing="true">
                <match url="^images/(.*)$" />
                <conditions>
                    <add input="{HTTPS}" pattern="^on$" />
                    <add input="{HTTP_HOST}" pattern="^www\.your_site\.com$" />
                </conditions>
                <action type="Rewrite" url="http://images_server/{R:1}" />
            </rule>
        </rewrite>
    </system.webServer>
</configuration>

これは例ですが、実際のアクセス元に即して設定してください。

設定	解説
<match url="^images/(.*)$" />	images/で始まるURLに一致し、後半を{R:1}に格納
{HTTPS}	pattern="^on$"と組み合わせ、HTTPSのリクエストに限定
{HTTP_HOST}	pattern="^www\.your_site\.com$"と組み合わせ、対象のホスト名に限定
<action type="Rewrite" ... />	リクエストをhttp://image_server/{R:1}へ書き換え
stopProcessing="true"	このルール適用後、後続のルールをブロック

画像 URL の変更

次に呼び出し元（ここでは HTML）に記述する画像の URL も、HTTP の画像配信元ではなく、リバースプロキシのルールに一致する URL へ変更します。

• before

.html

<img src="http://image_server/images/photo.jpg" alt="image">

• after

.html

<img src="https://www.your_site.com/images/photo.jpg" alt="image">

※この例では IIS のルールが images/ で始まるパスを対象にしています。実際の画像URLも、そのルールに一致するパスにする必要があります。

これで HTTPS のサイトで HTTP の画像を表示できるようになります。流れとしてはこんな形です。

[ ユーザー (ブラウザ) ]
       │
       │ ① HTTPSリクエスト送信
       │   https://www.your_site.com/images/photo.jpg
       ▼
┌──────────────────────────────────────────────┐
│ IIS (リバースプロキシサーバー)                  　│
│  - 条件判定: HTTPSか？ / ホスト名合致か？         │
│  - パターン: ^images/(.*)$ にマッチ             │
├──────────────────────────────────────────────┤
│  - URL書き換え (Rewrite):                  　　│
│    http://images_server/{R:1} へ変換          │
└──────────────────────────────────────────────┘
       │
       │ ② HTTPリクエスト転送（裏側の通信）
       │   http://images_server/photo.jpg
       ▼
[ 画像配信サーバー (内部ネットワーク) ]

終わりに

今回は IIS を例にしましたが、同じ考え方はほかのWebサーバーやリバースプロキシでも応用できます。設定時は、対象となる URL や転送先を実際の環境に合わせて確認してください。

この方法はあくまで一時的な回避策です。本来は画像配信元も HTTPS 化することを検討してください。