🦭

Reporting APIでWebを監視してみた

に公開
HTML
React
TypeScript
Amplify
tech

はじめに

最近は、Client Side AIの情報収集のために、Chrome Platform Status でリリースされたJavaScript APIをチェックするようにしています

そこで Reporting API という セキュリティ違反 や 非推奨API の呼び出しをモニタリングする機能があったため試してみました!

仕組み

JavaScript APIですが、レポートの送信にはJavaScriptを利用するのではなく、HTTP Headerに送信先や送信対象を設定することで、エラー発生時に指定したEndpointに自動的にレポートがPOST送信されます

Key Value
Reporting-Endpoints レポートの送信先サーバの定義
Content-Security-Policy-Report-Only 外部スクリプト・CSS・画像の不正読み込み
Cross-Origin-Embedder-Policy-Report-Only CORP未設定のiframe・画像の埋め込み
Cross-Origin-Opener-Policy-Report-Only 不正なページ間通信
Permissions-Policy-Report-Only カメラ・マイク・位置情報の不正利用

私の ポートフォリオサイト は、AWS Amplifyでデプロイしているため、以下のように設定しました

customHeaders:
  - pattern: "**"
    headers:
      - key: Reporting-Endpoints
        value: default="https://metalmental.uriports.com/reports"
      - key: Content-Security-Policy-Report-Only
        value: default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self';
          object-src 'none'; report-to default
      - key: Cross-Origin-Embedder-Policy-Report-Only
        value: require-corp; report-to=default
      - key: Cross-Origin-Opener-Policy-Report-Only
        value: same-origin; report-to=default
      - key: Permissions-Policy-Report-Only
        value: camera=(), microphone=(), geolocation=(), payment=(); report-to=default

送信例

Chrome DevTools の Application タブから確認可能です

URIports という監視ツールに送信し可視化してみました

外部のAPI、CSS、Google Fontの読み込みでCSPが発生していました

感想

ログが多く、コスト観点や可視化の必要性からデメリットが大きい気がします
そのためか、ネット上の情報も少ないです
開発環境で試してみるくらいがちょうどよいかもしれません

GitHubで編集を提案

Discussion