Charlesを活用してCSPにGA4のディレクティブを追加してみた

こんにちは、データアナリストの左海です。

今回はパケットキャプチャツールCharlesを活用してレスポンスヘッダーのContent-Security-PolicyフィールドにGA4のディレクティブを追加したお話について書いていきます。

課題と背景

Universal Analyticsのサポート終了発表に伴い、弊社でも対象のサービスサイトにてGA4の導入を進めていたのですが、CSP(Contents Security Policy)関連でエラーが発生しGA4ログの疎通が確認できませんでした。

Google Chromeのデベロッパーツールで調査すると、サイトのCSPにGA4のオリジンが宣言されておらず、リソースがブロックされていたため、ログが飛んでいないことが判明しました。

image

加えて、対象のサービスサイトは外部の会社が運用しており、私自身の環境でデバックする必要があったため、Charlesを活用することにしました。

方策

Google ChromeのConsoleでエラーログを確認すると、有難いことにエラーの解決方法まで記載されています。

A site’s Content Security Policy is set either as via an HTTP header (recommended), or via a meta HTML tag.

HTTP ヘッダーまたはHTMLのメタタグに以下の通りにGA4のディレクティブを宣言すれば解決できるようです。

script-src: https://www.google-analytics.com https://ssl.google-analytics.com
img-src: https://www.google-analytics.com
connect-src: https://www.google-analytics.com

では、実際にCharlesのRewriteという機能を使用してレスポンスヘッダーのContent-Security-PolicyフィールドにGA4のディレクティブを追加しデバックしてみることにします。

CSP(Contents Security Policy)とは

Charlesでデバックする前にCSPについて解説します。CSPについてMDNには以下のように記載されています。

HTTP の Content-Security-Policy レスポンスヘッダーは、ウェブサイト管理者が、あるページにユーザーエージェントが読み込みを許可されたリソースを管理できるようにします。いくつかの例外を除いて、大半のポリシーにはサーバーオリジンとスクリプトエンドポイントの指定を含んでいます。これはクロスサイトスクリプティング攻撃 (クロスサイトスクリプティング) を防ぐのに役立ちます。 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Security-Policy

レスポンスヘッダーのContent-Security-Policyフィールドにてサイトに必要なリソースを宣言することでリソースの管理が行えます。CSPに宣言されていないリソースは読み込まれないため、悪意のあるリソースの読み込みを回避しクロスサイトスクリプティング攻撃（XSS攻撃）を防ぐことにつながるようです。

Charlesでデバックする

CharlesのRewriteという機能を使用すればHTTPリクエスト/レスポンスの内容を書き換えることが可能です。早速、レスポンスヘッダーのContent-Security-PolicyフィールドにGA4のディレクティブを追加していきます。

1.Charlesを選択した状態でアプリケーションメニュー > Tools > Rewriteを選択する

Charlesを起動してアプリケーションメニュー > Tools > Rewriteの順序で添付画像のRewriteを選択します。

image

2.Enable Rewriteのチェックボックスにチェックを入れ、Rewrite Settingsを追加する

Rewrite SettingsでEnable Rewriteを有効にし、Rewriteの設定を新規作成するのでAddを選択します。設定の名前はmodify cspとしました。

次に、Rewriteの対象となる該当のURIを添付画像の赤枠箇所のAddから設定していきます。

URIをProtocol、Host、Port、Path、Queryに分けて記載することで、Locationの設定は完了です。

最後に、Rewrite RuleにてレスポンスヘッダーのContent-Security-Policyフィールドの修正を設定していきます。赤枠箇所のAddからURIの設定の際と同じようにRewrite Ruleの新規作成を行います。

設定項目について順番に解説します。

  • Type
    • 実行するRewriteのタイプを指定します。今回はレスポンスヘッダーを修正するのでModify Headerを選択しましょう。
  • Where
    • Rewriteを適用する場所を選択します。レスポンスヘッダーを修正するのでResponseにチェックを入れましょう。
  • Match
    • 修正するヘッダー名とその値を指定します。値は空白にし、どんな値でも置換されるように、Match whole valueにチェックを入れます。大文字と小文字を区別したい場合はCase sensitiveに、正規表現を使用したい場合はRegexにチェックを入れます。
  • Replace
    • 修正後のContent-Security-Policyフィールドの値を設定します。値にGA4のディレクティブを追加します。値はすべて書き換えるので、Replace Allにチェックを入れます。

image

以上でRewriteの設定は完了です。

3.該当のサイトにてGA4ログが正しく飛んでいるか確認する

添付画像の通り、意図した通りにGA4ログを確認することができました。

おわりに

CharlesのRewriteは、実際にサーバーの設定を変更することなく私自身の環境でデバックすることが可能です、かなり便利ですね。

今回の私のケースのように、外部の会社にサイトの運用を依頼している場合は原因調査に時間とコストがかかると思いますのでCharlesの利用をぜひ検討してみてはいかがでしょうか。

どなたかの参考になれば、幸いです。