Go to Qiita Advent Calendar 2024 Top
LoginSignup
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@dahatake(Daiyu Hatakeyama)inMicrosoft

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

Posted at

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 分かかります。)

必要なもの

以下ご準備ください。

  • 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

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

  • CDN を[無効]にします

image.png

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

image.png

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

image.png

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

image.png

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

image.png

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

時間がかかりますが、以下の様に[実行中] CDN [有効] 型 [Premium]と表示されていれば、OK です。
image.png

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

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

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

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

image.png

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

  • ストリーミングエンドポイント : Origin のサーバー
  • エンドポイント : Origin のサーバーにマウントされた個別動画再生用の URL
  • CDNのプロファイル : エンドポイントに紐づけられた CDN

image.png

3. Origin と CDN の違いを確認

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

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

image.png

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

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

例として。


ddf2e4dd50444a249529d551c3b17945.azureedge.net

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

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 とありますが、デモ兼本番での動作確認でも使える優れたサイトです。

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

image.png

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

image.png

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

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

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

5.1. HTML 作成

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

image.png

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

image.png

<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

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

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

image.png

5.4. 再生確認

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

image.png

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

image.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

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

image.png

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

image.png

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

image.png

6.1. Rules の設定

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

手順

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

  • ポリシーを作成します。画面中央の [New] を押します。
    image.png

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

image.png

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

image.png

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

image.png

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

image.png

[RAW 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

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

image.png

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

image.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

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

image.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

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

再生できない!

image.png

7. 監視

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

image.png

image.png

image.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

3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?