ブラウザ DevTools でローカルのスクリーンショットから PDF への処理を確認する方法

「ローカルで処理」はテスト可能である必要があります。プライバシーに関する声明は便利ですが、ブラウザ ツールは、どのネットワーク リクエストが発生するか、リクエスト ペイロードに含まれる内容、オプションの分析がいつ読み込まれるか、アップロードされた画像がブラウザから流出したかどうかなど、観察可能な証拠を公開することもできます。

このガイドでは、現在のスクリーンショット PDF 0.0.13 アーキテクチャを文書化し、再現可能な DevTools 手順を提供します。これは正式な侵入テストではなく、空のネットワーク パネルでは将来のすべてのバージョンが同じように動作することを証明できません。バージョンを記録し、マテリアルの変更後にチェックを繰り返します。

ここでのローカル処理の意味

エディターでは、ブラウザーは選択された画像を FileReader で読み取り、それを画像要素にデコードし、ピクセルを Canvas に描画し、注釈スナップショットをローカル オブジェクト URL として作成し、jsPDF で PDF データを生成します。スクリーンショットのコンテンツ、注釈ピクセル、透かしテキスト、プレビュー、および生成された PDF バイトは、スクリーンショット PDF アプリケーション サーバーには送信されません。

Web サイト自体は、HTML、JavaScript、スタイル、フォント、または画像に対する通常のインフラストラクチャ リクエストを引き続き必要とします。 Cloudflareは、IPアドレスやリクエストヘッダーなどの接続メタデータを処理できます。オプションの Google Analytics は別のパスであり、分析の同意後にのみ読み込まれます。ローカル ドキュメント処理は、ページがネットワーク リクエストをまったく行わないことを意味するものではありません。

機密性のないテスト ファイルを準備する

銀行取引明細書や個人的な会話からプライバシー テストを開始しないでください。色付きのグリッド、一意のフレーズ、および 1200 × 3000 ピクセルなどの既知のサイズを含む合成 PNG を作成します。このユニークなフレーズは、実際の情報を公開することなく DevTools ペイロードを検索するのに役立ちます。

オペレーティング システムでテスト ファイルのハッシュが提供されている場合は、テスト ファイルのハッシュを記録します。ハッシュは、それ自体ではファイルがどこで処理されたかを証明するものではありませんが、正確なテスト入力を区別するのに役立ちます。

ファイルを選択する前に DevTools を開いてください

1. 新しいタブでスクリーンショット PDF エディターを開きます。
2. Chrome DevTools を開き、ネットワーク を選択します。
3. ログの保存を有効にし、テスト セッションのキャッシュを無効にします。
4. 既存のリクエストをクリアします。
5. 最初のパスでは、プライバシーの選択でオプションの分析を無効のままにしておきます。
6. 合成画像をアップロードし、表示される注釈と透かしを追加し、ページをプレビューして、PDF をエクスポートします。

Chrome の ネットワーク パネルのドキュメント では、リクエストの検査、フィルタリング、ペイロード ビューについて説明しています。

タイプとペイロード別にリクエストを検査する

fetch と xhr をフィルターし、アップロード、注釈、プレビュー、またはエクスポート中に発生するリクエストを検査します。 URL、メソッド、リクエスト ヘッダー、クエリ文字列、フォーム データ、リクエスト ペイロード、およびレスポンスを確認します。

保存されたログで合成フレーズとファイル名を検索します。また、タイミングがアップロードと一致する異常に大きいリクエストボディも探します。画像ピクセルはバイナリまたはエンコードされている可能性があるため、フレーズが存在しないだけでは不十分です。ペイロード サイズとコンテンツ タイプも重要です。

ブログまたはインターフェイスからの静的画像リクエストは、ユーザーのドキュメントのアップロードではありません。 blob: URL はブラウザのローカル オブジェクト参照であり、リモート ネットワークの宛先ではありません。 data: URL は現在のドキュメント コンテキストにデータを埋め込みますが、同様に HTTP アップロードを表しません。

同意状態を比較する

オプションの分析同意を付与した後、セッションを繰り返します。 Google Analytics ライブラリは、使用状況イベントを読み込んで送信できるようになりました。スクリーンショット PDF の分析レイヤーは、エディターの起動、エクスポートの開始、成功または失敗、ページ数、ロケール、広範な使用状況などの製品イベントを記録します。スクリーンショットの内容、ファイル名、透かしテキスト、電子メール アドレス、直接識別子は含まれないように設計されています。

分析リクエストが無害であると仮定するのではなく、イベント パラメーターを検査します。合成フレーズやファイル名が存在しないことを確認してください。 AdSense の申請段階では広告の同意は無効のままであるため、分析が受け入れられたという理由だけで広告リクエストが表示されるべきではありません。

障害パスの検証

操作が失敗した場合でも、プライバシーの動作が変更されるべきではありません。サポートされていない小さなファイルを試すか、ファイル ピッカーをキャンセルしてください。エラー報告の一部としてドキュメント ペイロードが送信されていないことを確認します。巨大な機密ファイルを使用してブラウザを意図的にクラッシュさせないでください。

メモリ関連のテストの場合は、生成されたパターンを使用し、徐々に次元を増やします。エディターが画像を拡大縮小したり、ブラウザーが遅くなった場合は停止します。目的は、デバイスを使い果たすことではなく、リクエストの動作を観察することです。

DevToolsだけでは証明できないこと

• ブラウザ拡張機能とサービス ワーカーは別個の実行コンテキストを持つことができます。キャプチャ転送をテストするときに、関連する拡張サービス ワーカーを検査します。
• 暗号化されたリクエストは DevTools で宛先とリクエストのメタデータを公開しますが、ペイロードの解釈にはリクエスト ビューが必要になる場合があります。
• 1 つのテストで 1 つのバージョン、ブラウザ、同意状態、およびワークフローがカバーされます。
• 他の発行者からインストールされたブラウザ拡張機能は、独自の権限に従ってページを観察できます。
• オペレーティング システムのテレメトリは、Web ページの [ネットワーク] パネルの範囲外です。

より確実性の高いレビューを行うには、ソース コード、ビルド アーティファクト、拡張機能のアクセス許可、コンテンツ セキュリティ ポリシー、およびネットワークの動作を一緒に検査します。

監査結果を記録する

日付、Web サイトのビルド、拡張機能のバージョン、ブラウザーのバージョン、同意状態、テスト ファイルのハッシュ、実行されたアクション、監視された宛先、ドキュメント ペイロードの結果、レビュー担当者を含む小さなテーブルを作成します。編集された HAR は、トークン、Cookie、プライベート URL、またはその他の機密ヘッダーが含まれていない場合にのみ保存してください。

ドキュメント ピクセルまたはファイル データが予期しないリモート リクエストに表示された場合は、停止して最小の合成例で再現します。宛先、リクエ​​ストのタイプ、リクエストをトリガーしたアクション、およびバージョンを [email protected] に報告します。

ローカル処理は、主張、実装、同意行動、および観察可能なネットワーク証拠が一致する場合に最も強力になります。リリース後にこのチェックを繰り返すことで、マーケティング フレーズが保守可能なエンジニアリング プロパティに変わります。