😺

Cloudflare PageShield Script Monitoring の実装手順

2023/10/22に公開

PageShieldはHTML内部で呼び出されるjsファイルの変更履歴をトラックし記録するサービスです。攻撃者にjsファイルを変更され、フォームに入力された情報(クレジットカード等)が外部へ送信されていた、という事件が発生するケースがありますが、このサービスを使うことでその変更を検知することができます。
別途不正なスクリプトの実行を明示的に禁止するPageShield Positive Blocking/Policiesというサービスも存在しています。
この記事ではScript Monitoringに焦点を当てます。

PCI-DSS4.0 と Script Monitoring

PCI-DSS4.0では新しい要件として実行されるスクリプトを正しい場所からロードされること、変更履歴をトラックできるようにすることなどを定めています。
変更履歴をトラックするものがScript Monitoringであり、正しい場所からのロードを監視するものがPageShield Positive Blocking/Policiesになります。

さっそくやってみる

このサービスはCloudflareのEnterpriseアカウントでドメインを保有している方のみ作業が可能です。検証などを行ってみたい方は@kameoncloudまで連絡ください。

まずはWebサーバを立てます。
手順が必要な方は以下を見てnginxを起動するのが一番楽だと思います。
https://zenn.dev/kameoncloud/articles/6d2dec59232917

以下2つのファイルを配置します。

hello.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello World with External Script</title>
</head>
<body>
    <h1>Hello World</h1>

    <!-- テキストを表示するための要素 -->
    <div id="output"></div>

    <!-- 外部のJavaScriptファイルを読み込む -->
    <script type="text/javascript" src="script.js"></script>
</body>
</html>
script.js
document.addEventListener("DOMContentLoaded", function () {
  // HTML要素を取得
  const outputElement = document.getElementById("output");

  // テキストを設定
  outputElement.textContent = "Hello World from external script";
});

正しく配置できていれば以下のように表示されるはずです。

DNS Proxyモードの設定とキャッシュの無効か

これからCloudflare経由の環境を設定しますが、テスト目的にキャッシュを無効化します。改ざんがあった場合、キャッシュが有効化されていると改ざん前のファイルがダウンロードされテスト結果が正しく反映されないからです。
各ドメインのトップ画面でDevelopment Modeのトグルをオンにします。これによりキャッシュが無効かされます。

次に左ペインのDNSRecordをクリックします。

以下のようにDNS Proxyモードをセットします。

設定が完了したらブラウザでデベロッパーツールを開いて何度かアクセスをします。以下のようにcf-cache-statusDYNAMICになっていればOKです。

PageShield の有効化

左ペインでSecurityPageShieldをクリックします。

Enable Page Shieldをクリックします。

この状態でブラウザから先ほどのサイトを10回読み込みましょう。
この際デベロッパーツールでDisable cacheを必ずチェックしておきます。

デベロッパーツールにたまに以下のようなAlertが表示されます。これはPageShieldがScriptの実行を監視するために意図的にHeaderに特定の文字列を付与するために発生します。この状態でもスクリプトは実行されています。(Positive Blocking/Policiesと異なり、Script Monitorはスクリプトの実行を止めません)

マネージメントコンソールを数分待って確認すると何かが表示されています。

まずこの画面では怪しいスクリプトが表示されます。今回のテストで用いているスクリプトは表示されないです。右下のView all scriptsをクリックします。
そうするとテストで読み込んでいるscriptが表示されます。

ではここで少しscript.jsを変更してみます。

script.js
// script.js
document.addEventListener("DOMContentLoaded", function () {
  // HTML要素を取得
  const outputElement = document.getElementById("output");

  // テキストを設定
  outputElement.textContent = "Hello World from external script edited again";
});

以下が表示されるまで気長に20回ほど待ちます。

数秒前に変更が行われたことを検知していることがわかります。

PageShield Paid-Add-Onについて

Paid Add-Onは不正なURLから読み込まれたScriptの実行を禁止するPositive Blockingという機能を提供します。一方この機能を有効化すると上記のScript Monitoringにも新しい追加機能が加わります。
まず以下の通りCloudflare独自ロジックでスクリプトの判定が行われます。

この辺りは詳細ロジックは不明ですのであくまで目安として取り扱うことをお勧めします。
さらに実行されたスクリプトをハッシュ値として出力します。これを改ざんの目安とすることができます。将来的には変更履歴の出力が予定されていますが、現時点ではハッシュ値は履歴が出力されませんのでご注意ください。

挙動について

PageShield Script Monitoringは全てのリクエストによるjsの読み込みを監視しているわけではないことに注意してください。
おおよそ5%~10%ぐらいの割合でサンプリングを行い調査します。

Discussion