ブラウザAgentの広告ブロック対策

ご存知の方も多いかと思いますが、ChromeやSafari、Edgeなど一般的に利用されるブラウザでは、3rd party製の広告ブロックのアドオンを追加・有効化することができます。なぜ、New Relicで広告ブロック？と思われる方もいらっしゃると思いますが、一般的な広告ブロックでは、広告だけではなくパフォーマンス分析のデータ等もブロックする機能もよくあり、New Relicへのデータ送信をブロックする広告ブロックも多く存在します。

広告ブロックによりブロックされると、特定のユーザのブラウザAgentのデータがないという状況になります。そういった状況を回避していただき、より多くのデータを収集できるよう、New RelicのブラウザAgentでは1.240.0以降のバージョンにて、広告ブロック対応の機能が追加されました。

広告ブロックでは通常、リクエスト先のドメインやパス等にてマッチングにて判定を行い、ブロック対象を特定するのが一般的です。そのため、ブラウザAgentがリクエストを発行する先のドメインを任意のドメインにして回避いただけるようになっております。なおこのドメインに関しては、通常、お客様がサービスを提供されれいるドメインと同じドメイン（あるいはそのサブドメイン）としていただくことで、広告ブロックでブロックされる可能性をより下げていただくことができるかと思います。

また、ドキュメントでは、proxyという言葉が利用されていますが、こちらは一般的なproxyサーバではなく、データ転送を中継していただくという意味になります。本ブログでは、AWSのCloudFrontを使った方法を紹介します。なお、最低限必要な機能としてはCloudFrontのみとなりますが、便宜上、Route 53及び、AWS Certificate Managerも利用しております。

なお、本仕様の詳細に関しては、こちらのドキュメントに記載されておりますが、最大で以下の2つのproxyが必要となります。

• ブラウザAgentコードのDL用
• Agentのデータ送信用

本ブログでは、その両方を作成する前提で期待いたします。なお、本ブログでは、AWS上でのDNSの設定や証明書の設定等から記載しております。お客様の環境によっては不要な場合もありますので、その場合は読み飛ばしながらご対応ください。

準備

前述の通り、2つのproxyを作成するため、利用するドメインを決めます。本ブログでは、以下の2つを利用する前提で記載していきます。

• newrelic-assets.mydomain.com
• newrelic-bam.mydomain.com

Route 53のホストゾーンを追加する

まず、今回のporxyを追加するドメインのベースとするホストゾーンをAWS上に作成します。

Route 53の画面を開いていただき、ホストゾーンの作成に進むと、上記のような画面が表示されると思います。こちらで、以下のような設定でホストゾーンを作成してください。

すると、以下の画像のようにホストゾーンが作成されNSレコード等が確認できるかと思います。お客様のドメインの管理画面にて、対象のns-から始まるNSレコードの値を設定していただくことで、作成されたホストゾーンへルートされるようになるかと思います。

証明書の作成

続いて、AWS Certificate Manager（以降、ACM）で証明書を作成します。ここで、注意する点として、必ずリージョンをus-east-1に切り替えて行ってください。こちらはAWSの制限で、CloudFrontで利用する署名書は、us-east-1上にある証明書のみしか利用できないためです。

ACMの画面で「パブリック証明書をリクエスト」へ進んで、以下のようにリクエストしてください。

リクエスト実行後、証明書一覧の画面に戻ってリロードすると、ステータスが「保留中の検証」で表示されます。

ドメイン認証をした場合、認証用のレコードを追加する必要があるため、上記画面の一番左に表示されている証明書IDをクリックし、対象の証明書の詳細が表示された画面で、「Route 53でレコードを作成」をクリックします。（Route 53を使ってない場合は、お客様ご利用のサービスに登録して頂く必要があります）すると、そんなに時間を待たずして、証明書が有効になると思います。

こちら、利用する2つのドメイン向けにそれぞれ証明書を発行してください。

CloudFrontでディストリビューションの作成

ブラウザAgentコードのDL用ディストリビューション

こちらは、proxyを経由してJSファイルがダウンロードできればよいだけのため、通常のCDNを設定していただくのと同様にキャッシュの効いた設定で作成していただけます。設定のポイントとしては、以下の通りとなり、それ以外はデフォルトでも問題ありません。

Agentのデータ送信用ディストリビューション

こちらは、Agentからのデータを送るためのものになるので、キャッシュは無効にする必要があり、ヘッダーに関しても、一部を除きオリジン側へ送信していただく、POST送信を許可していただくなどが必要になります。そのため、設定のポイントは以下のとおりとなります。

上記でディストリビューションの作成は完了ですが、作成されたディストリビューションのドメイン名（任意の文字列.cloudfront.net）をコピーしておいてください。

DNSレコードの追加

続いて、先程作成したディストリビューションをDNSに登録します。最初に作成した、Route 53に作成したホストゾーンを表示します。レコードを作成をクリックし、以下のような設定で追加してください。

お疲れ様でした！以上で、CloudFrontを作成したproxyの作成は完了です！

疎通確認

例えば、 https://newrelic-assets.mydomain.com/nr-spa.3b61d78f-1.240.0.min.js にアクセスすると、 https://js-agent.newrelic.com/nr-spa.3b61d78f-1.240.0.min.js で取得されるコードと同じコードが表示されることがわかります。

また、以下のようにcurlのコマンドを投げてみてください。
 

{}という空の応答を受信できることが確認できます。

ブラウザAgentの設定変更

あとは、ブラウザAgentの設定を変更するのみです。コピペでコードを貼り付けられている場合、;window.NREUMで始まり、NREUM.initが含まれる行を見つけていただくことができると思います。

そちらに、以下のようにお客様で作成されたproxyの設定を追加してください。

設定変更後、対象のブラウザAgentが組み込まれたページをChromeで読み込み、開発モードのNetworkでjsファイルのDL先のリクエストURLを確認してみてください。正常に動作していれば、New Relicのドメインではなく、お客様が設定されているドメインをご確認いただけると思います。

以上で、CloudFrontを使ったブラウザAgent用proxyの作成及び、動作確認は完了です。

今回は必要最低限の設定のみご案内しているため、お客様の会社の要件に応じてWAFを有効にしていただくなどのご対応などを行っていただくのが良いかと思われます。