HTTP Header の Referer を使って Azure Media Player での動画再生を特定のサイト以外で禁止する

`Azure Media Player` は `HTML5` ベースのマルチデバイス対応の動画プレイヤーです。`Azure Media Services` 専用で、Adaptive Bitrate Streaming のマルチプロトコル対応だけでなく、デバイス毎にバラバラの暗号化/DRMなどにも対応しています。特に役に立つのがその多くの機能がAPIとして公開されている事です。カスタマイズ性が高いです。他の動画サービスではほぼ利用ができません。

HTML であるが故に PC/Mac ですと注意すべき点もあります。HTMLの表示からPlayerごと、動画視聴用のURLまで簡単に入手できます。ブラウザーにF12ツールが標準でついていますからね。特にご自身のサイト以外での動画再生は、場合によっては避けたいです。

その設定手順を示します。

# 戦略
HTTP の **Referer** を使います。Referer は「一つ前のHTTP Requestはどこから来たか?」をブラウザーなどアプリが設定するものです。HTMLベースの動画プレイヤーでは、この Referer を使う手段は良くとられています。

HTTP リファラ (wikipedia):
https://ja.wikipedia.org/wiki/HTTP%E3%83%AA%E3%83%95%E3%82%A1%E3%83%A9

そして、CDN 側で設定を行いますので、Azure Media Services 側の設定は変更する必要がありません。

`Azure CDN Premium from Verizon` の `Rules Engine` には、HTTP Request の文字列で、処理を設定できる機能があります。Rule Engineは Azure CDN Standard from Microsoft にもありますが、HTTP Request については扱えません。

Azure CDN の Standard ルール エンジンの一致条件:
https://docs.microsoft.com/ja-jp/azure/cdn/cdn-standard-rules-engine-match-conditions

## 注意点
3つ あります!

### 1. 動画再生URLの変更

CDN の切り替えを行いますので、動画 Playerの URL が変わる場合が殆どかと思います。視聴中の方がいらっしゃれば、再生停止になりますので、実施タイミングは慎重に行ってください。

Azure Media Services の Streaming Endpoint は2つまでActiveにできます。ですので、新規 Streaming Endpoint を作成して、Azure CDN Premium from Verizon の設定は、新規のURLとして行うのが良いかと思います。

Azure CDN Premium from Verizon の Rules Engine には Staging 環境があり、そこで設定の確認ができます。

### 2. CDN 料金

Premium の機能なので、ネットワーク帯域転送料金の単価があがってしまいます😅。アクセス数が多い場合は、十二分にお気をつけください。

Azure CDN 料金:
https://azure.microsoft.com/ja-jp/pricing/details/cdn/

### 3. 作業時間 - 2 時間はみておいてください😭

CDN の設定変更後、それらが全 CDN のノードに伝達できるまで **90分** はみてください。実際には10-15分くらいで反映はされますが...

> ドロップダウン リストから [Standard Akamai] オプションを選択します。 (Akamai レベルのデプロイ時間は約 1 分です。 Microsoft レベルは約 10 分、**Verizon レベルは約 90 分かかります**。)

https://docs.microsoft.com/ja-jp/azure/cdn/cdn-create-new-endpoint

# 必要なもの
以下ご準備ください。

- Azure Subscription
- サンプルの動画ファイル。ご自身のものをご用意ください。

# Azure のサービス作成

以下のサービスを作成します。

- Azure Media Services
- Azure CDN Premium from Verizon

# 手順

それ程多くはありません。

## 1. Azure Media Services の CDN 設定を、Premium from Verizon に変更

Azure Media Services 作成時は、Azure CDN Standard from Verizon が初期設定されています。Rules Engine が使えるのは Premium だけなので、変更します。

- Azure Media Services の [ストリーミングエンドポイント] に移動します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/1b85b61a-18a3-828a-1b0d-249c3501cc20.png)

- [ストリーミングエンドポイント] が稼働していたら、停止させます

- CDN を[無効]にします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/a54a4810-943e-bf4d-8ce0-ab7c715d7cd7.png)

- その後、Streaming Endpoint の[設定]に移動します

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/62333f2a-ff03-f39f-a2ad-cd2c56d4525a.png)

- [種類]を `Premium` に変更します。[保存]を押して設定を反映させるのをお忘れなく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/de9d643b-cd8c-7f89-d0e3-5b7c9953edab.png)

 - 今度は CDN を[有効] にします

 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f4b5131d-c409-5b21-78c5-031b71b2da0c.png)

- Premium from Verizon を選択して、新規 Azure CDN プロファイルを作成し、有効にします

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/7ec3e2fd-7007-0965-e442-556471e2f737.png)

- [ストリーミングエンドポイント] を開始させます

時間がかかりますが、以下の様に[実行中] CDN [有効] 型 [Premium]と表示されていれば、OK です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/6f204e2c-c642-c96f-e6db-0428e4c33439.png)

## 2. 動画のアップロードとエンコード。そして、公開まで実施

以下のドキュメントを参考に、Publish まで行います。

ポータルを使用したコンテンツのアップロード、エンコード、ストリーム配信:
https://docs.microsoft.com/ja-jp/azure/media-services/latest/manage-assets-quickstart

正しく Publish  できていれば、[資産] の中で再生して動作確認ができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/8cf47158-74a5-73b0-71cc-5003429a7166.png)

配信部分について以下の様なリソースが出来ているのが確認できます。

- ストリーミングエンドポイント : Origin のサーバー
- エンドポイント : Origin のサーバーにマウントされた個別動画再生用の URL
- CDNのプロファイル : エンドポイントに紐づけられた CDN
 
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/5df71831-dc3b-f43d-e38c-fde0ac11e8f8.png)


## 3. Origin と CDN の違いを確認

実はこの時点で、2つの動画再生URLが存在しています。

- Azure Media Services のPortal で確認できる[資産]
    - CDN は設定されているものの、この URL は、Origin としてです。つまり CDN 経由ではありません
    - [ロケーター] あるいは [ストリーミングのURL] として確認できます

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/6c2ff1db-b5b3-5f3e-d62a-241d175f686d.png)

例として (これは既に存在していません😊)。

```bash
https://dahatakemedia-jpea.streaming.media.azure.net/792699d6-f7a4-4ae0-ba7b-de814361260f/Bill Gates at Microsoft's  Meet .ism/manifest
```

- CDN のプロファイルとしてのドメイン
    - こちらが実際の CDN
    - Azure Media Servicesなど、Origin との紐づけがされている

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/ebee0714-4998-2a55-748a-3eaaab571dc2.png)

例として。

```bash

ddf2e4dd50444a249529d551c3b17945.azureedge.net
```

ここで、それぞれのDNS情報を確認してみます。

```cmd
C:\>nslookup dahatakemedia-jpea.streaming.media.azure.net
サーバー:  UnKnown
Address:  2404:7a82:181:700:1eb1:7fff:fe26:7d54

権限のない回答:
名前:    wamsorigin-origin-5e2d8f9ef7b547b78efc09eff9e90a09.cloudapp.net
Addresses:  2001:260:306:b::142c:b3ee
          20.44.179.238
Aliases:  dahatakemedia-jpea.streaming.media.azure.net


C:\>nslookup ddf2e4dd50444a249529d551c3b17945.azureedge.net
サーバー:  UnKnown
Address:  2404:7a82:181:700:1eb1:7fff:fe26:7d54

権限のない回答:
名前:    cs9.wpc.v0cdn.net
Addresses:  2606:2800:147:120f:30c:1ba0:fc6:265a
          117.18.232.200
Aliases:  ddf2e4dd50444a249529d551c3b17945.azureedge.net
          ddf2e4dd50444a249529d551c3b17945.ec.azureedge.net


C:\>
```

以下が分かりますね。

- Azure Media ServicesでCDNをPremium設定とした場合、実際には **xxx.cloudapp.net** とAzure上のサービスと紐づけされている
- CDNのプロファイルの方は、**x.azureedge.net** と **ec.azureedge.net** のVerizon CDN として登録されている

つまり、この例の場合、CDN経由でのアクセスを使う場合は、**ddf2e4dd50444a249529d551c3b17945.azureedge.net** を使うべきだという事がわかります。

Premium は、ストリーミングエンドポイントの挙動が Standard のと少し**異なります**ので、注意してください!
Standard (標準) の場合:

- CDN 連携はデフォルト設定
- Scale Unit は 1-3 の間でオートスケール。Premium は手動設定。APIで自動化もできますが。
- Azure Portal の[資産]の URL は、CDN 経由のもの。Origin は隠されている

## 4. 動画再生URLの確定

これは簡単です。
先のAzure Portalで取得したURLのドメイン部分をCDNプロファイルで作成したホスト名に置き換えます。
今回の例だと以下の様になります。

```
https://ddf2e4dd50444a249529d551c3b17945.azureedge.net/792699d6-f7a4-4ae0-ba7b-de814361260f/Bill Gates at Microsoft's Meet .ism/manifest
```

- Azure Media Player のサイト
URLに demo とありますが、デモ兼本番での動作確認でも使える優れたサイトです。

https://ampdemo.azureedge.net/

Origin の再生確認にも使えます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/d2291e3c-57d7-727a-6d99-1a66de501bb6.png)

そして、CDN経由も。
`URL` の部分にCDN経由での再生用URLを貼り付けます。その後 [Update Player]ボタンを押して動画URL での再生を確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/1c22264b-ad49-556b-af0c-78dad9d053af.png)

Verizon の CDN設定をした場合は、反映まで時間がかかります。URLに間違いがなく、再生されない場合は、少し間をあけてください。主にホスト名の反映なので、動画の一つが再生されれば、後は即座に反映されます。

## 5. 本番アプリ想定 = Web App の作成

シンプルに。Azure Web Appを作成して、HTMLページを作成します。

### 5.1. HTML 作成

先ほどの Azure Media Player のページに [Code] - [Get Player Code] というメニューがあります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/aa6eaa7b-65cd-92fd-2f1f-93c3dc0170fe.png)

ここで表示される HTML用の文字列を使います。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/87fa3003-997f-b816-d97f-d61de1ae6fee.png)


```HTML
<html>

    <head>
        <title>Azure Media Services - Streaming Referer Validation</title>
        <link href="//amp.azure.net/libs/amp/2.3.5/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet">
        <script src="//amp.azure.net/libs/amp/2.3.5/azuremediaplayer.min.js"></script>
    </head>

    <body>

        <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='{"language":"ja"}'></video>

        <script>
            var myOptions = {
                "nativeControlsForTouch": false,
                controls: true,
                autoplay: true,
                width: "1280",
                height: "720",
            }
            myPlayer = amp("azuremediaplayer", myOptions);
            myPlayer.src([
                    {
                            "src": "https://c0feda228c514b56b381b9a0e52c5cf7.azureedge.net/4ca2155f-b7d1-4b43-bba6-94e835293e27/Bill Gates at Microsoft's  Meet .ism/manifest",
                            "type": "application/vnd.ms-sstr+xml"
                    }
            ]);
        </script>

    </body>

</html>
```

超絶楽勝です😁

### 5.2. Azure Web App 作成

複数の方法がありますが、シンプルに。Azure の Portalから作成してください。
今回は **Windows** 上に作る事をおススメします。なぜなら `App Service Editor (プレビュー)` が使えるからです。開発初期は最強に思えます😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/92da145e-febe-0b7f-bb8e-071e9789e86b.png)

### 5.3. HTMLファイルのアップロード

デスクトップなど作業フォルダから、ブラウザーにドラックアンドドロップしてファイルのアップロードが出来るます。
開発初期 あるいは Web App が初めての場合、CI/CDで悩みたくないのですよ。極力問題発生時の調査範囲を最小化したいのです。
勿論、慣れたらCI/CDで差分比較などの技術の恩恵を受けてください😊

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/aab0341e-77c0-1f6b-6579-af91d6dbaee0.png)

### 5.4. 再生確認

App Services Editor の再生ボタンを押します。これが一番簡単!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/c638a598-a610-4e9d-58e0-8ff36514abfb.png)

Web App のURLへ移動して、動画再生がされる事を確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/cf24d61b-99a8-6de9-e2f9-6d65721d3cf1.png)

ここでのアプリケーションのドメインは以下になります。

### 5.5. 動作確認のためにすべきことを今一度確認

これ以外のドメイン、例えば、先のAzure Media Playerのサイトでの再生を禁止させます。

ここは再生OKにする

```
http://dahatakeweb01.azurewebsites.net/
```

ここは再生NGにする

```
https://ampdemo.azureedge.net/
```


## 6. Azure CDN Premium from Verizon での Rules Engine 設定

この Rules Engine は、本当に多機能です。Webの通信に関して、アプリケーション的な条件分岐の記載が出来ます。

Azure CDN from Verizon Premium ルール エンジンのリファレンス:
https://docs.microsoft.com/ja-jp/azure/cdn/cdn-verizon-premium-rules-engine-reference

- 作成した CDN のプロファイルに移動して [管理] を押します。これで Verizon のポータルに移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/0dadb959-c114-aa39-d39b-4fae0738b739.png)

- Verizon のポータルが表示されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/e7813abe-bbaf-ffb4-1e8f-9727a53fa1d6.png)

- [HTTP Large] - [Rules Engine V4.0] を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/f93a65c3-f67b-3ec3-387c-1a8054dea743.png)

これで Rules Engine の画面に移動します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/4d190a5c-e44a-fc34-6a12-bd7ca3990ab9.png)

## 6.1. Rules の設定

設定までは少し手順があります

![手順](https://docs.microsoft.com/ja-jp/azure/cdn/media/cdn-verizon-premium-rules-engine-reference/policy-deployment-workflow.png)

ポリシーのデプロイのワークフロー:
https://docs.microsoft.com/ja-jp/azure/cdn/cdn-verizon-premium-rules-engine-reference#policy-deployment-workflow

- ポリシーを作成します。画面中央の [New] を押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/afe09717-68b0-8070-f8c3-76a0a7f46f16.png)

- ポリシーに名前を付けます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/a938560f-0013-b222-11ee-ac2238621238.png)


- Rule Builder の画面が表示されます。[+Rule] を押して条件を設定していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/1d3e7827-0515-d1ab-05d6-b5e45317ffc1.png)

- [Match] を選択します。単一の条件のみなので、こちらで十分です。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/4a59fec5-a1c4-0e9d-28d6-3f73364ce446.png)

以下の様に設定をします。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b46e979c-a13b-5291-84c5-29c32e91b4ad.png)

[RAW XML] にすると、以下の通りとなります。

```xml
<policy>
    <rules>
        <rule>
            <match.request.request-header.literal name="referer" result="nomatch" value="http://dahatakeweb01.azurewebsites.net/" ignore-case="false">
                <feature.access.deny-access enabled="true"/>
            </match.request.request-header.literal>
        </rule>
    </rules>
</policy>
```

- [Lock Draft as Policy] でポリシーを保存します。直接編集して修正ができません。修正には新規ポリシーを作成して上書きする事になります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/10620e63-6407-de87-cee8-b41dfc9e4f7c.png)

- [Deploy Requewst] を押してCDN反映へのリクエストを作成します。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/0e28a6e4-d4a6-e93a-d66c-b91158b434cb.png)

- [Environment] を選択します。Staging 環境が用意されていますので、**必ずそちらで動作確認を先に行ってください!!!**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/957cac5d-1590-452f-dcb7-bb22cb7682ba.png)

Staging 環境については、こちらをご参考にしてください。
https://docs.vdms.com/cdn/index.html#HRE/Environment.htm%3FTocPath%3DContent%2520Delivery%7CRequest%7CCustom%2520Request%2520Handling%2520via%2520Rules%2520Engine%7C_____6

- [Message] が入力**必須**です。GitHub の様に内部ではソースコードコントロールがされているようです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/d1218e2c-6c49-165b-d01e-b9a6f10c71d0.png)

Deploy が開始されます。全ての処理は自動的に行われます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/c560e11c-5d17-b80c-41b3-e14e0c69941c.png)

この後のCDN全体への反映は、**凡そ15分**です。

> It takes approximately **15 minutes** to apply a newly approved policy to either the Production or Staging environment.

参考:
https://docs.vdms.com/cdn/index.html#HRE/DeployRequest.htm%3FTocPath%3DContent%2520Delivery%7CRequest%7CCustom%2520Request%2520Handling%2520via%2520Rules%2520Engine%7C_____5


少し時間が経つと、設定が反映されたのを確認できます。

- 本番想定サイト:

再生できる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9a140b32-9da0-c3a6-5f47-5e2f29ad0556.png)


- 外部サイト - Azure Media Player のサイト

再生できない!

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/9271d1da-d8b3-dd97-0539-346b9a445481.png)

# 7. 監視
Azure CDN Premium from Verizon には、定期的な監視ログのレポート作成に加えて、Realtime レポートがあります。設定の確認や、問題発生時のその場での対応にはとても役に立ちます。
Azure Media Services での動画再生に限らず、HTTP Large Object として表示されますので、是非、確認をしてみてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/0e2f731c-1f2f-f5f4-a01e-f8f1c5e82a6d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/b1abef01-2935-fa5b-b0e4-596eaac26457.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/108143/994eab42-6be4-dc35-ab13-2043b714fec2.png)


# まとめ

ここでは典型的な動画プレイヤー自身の保護設定について手順を見ていきました。動画以外でも自社サイト以外での、あらゆるリソースの保護に Rules Engine を利用する事が出来ます。
DRMをかけなくても、出来る事がある事を是非知ってください。

そして、攻撃・クラッキング方法が多様化しているからこそ、各レイヤーで取りうる対策を打ち、しっかりとモニタリングする事をおススメします。

# ご参考

Azure Media Player ドキュメント:
https://docs.microsoft.com/ja-jp/azure/media-services/azure-media-player/

Azure Media Services ドキュメント:
https://docs.microsoft.com/ja-jp/azure/media-services/


Verizon Rules Engine ドキュメント:
https://docs.vdms.com/cdn/index.html#HRE/Basics.htm%3FTocPath%3DContent%2520Delivery|Request|Custom%2520Request%2520Handling%2520via%2520Rules%2520Engine|_____1