英語からAIを使用して翻訳されました
この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
Contentsquareはウェブブラウザを通じてエラーを収集しますが、ほとんどのブラウザは、他のドメインからのエラーの詳細(関数名、ファイルなど)を許可されていない限り共有しません。
そのため、一部のエラーについては、Contentsquareは「スクリプトエラー」としか報告できません。これはブラウザとホスティングサーバーからの設定によるものです。
どのスクリプトをマスク解除するかの管理
開発者と協力して、再現および修正に苦労しているJSエラーを理解してください。
スプレッドシートを作成して、3rdパーティプロバイダー*をリストし、クロスオリジン属性でマスク解除されたスクリプトを追跡できます。
*一部の3rdパーティはマスク解除できないことに注意してください。例:Google、Meta、Adobe。
スクリプトエラーのマスク解除方法
| 注: このプロセスには開発者の助けが必要です。 |
1. スクリプトにAccess-Control-Allow-Origin HTTPヘッダーを追加します:
Access-Control-Allow-Origin2. レスポンスヘッダーを次のように設定します:
Access-Control-Allow-Origin:*サーバーは、任意のオリジンがこのファイルを取得できることをブラウザに示します。
3. スクリプトタグに属性を追加します:
crossorigin="anonymous"JavaScriptバージョン:script.crossOrigin="anonymous"(例:GTM非同期ローダー用)。このコードは、ブラウザにターゲットファイルを匿名で取得するよう指示し、クッキーやHTTP認証を介して機密データが転送されないようにします。
⚠️ これは、ヘッダーがクロスドメインを許可するスクリプトのみに対して行う必要があります(上記のステップ1!)。
FAQ
なぜスクリプトエラーをマスク解除する必要がありますか?
開発者が再現および修正に苦労しているJSエラーがある場合、それらをマスク解除して明示的なエラーメッセージを見ることができます。注:ヘッダー「Access-Control-Allow-Origin」を追加すると、Contentsquareだけでなく、ウェブサイト上で実行されているすべてのサードパーティスクリプトにスクリプトエラーメッセージが公開されます。
上記の2つの指示は何をしますか?
ヘッダーを更新することで(ステップ1)、サーバーはブラウザに任意のオリジンがこのファイルを取得して検査できることを示します。crossorigin属性を追加することで(ステップ2)、ブラウザにターゲットファイルを「匿名で」取得する必要があることを伝えます。これにより、クッキーやHTTP資格情報などのユーザーを特定する可能性のある情報が、ブラウザからサーバーに送信されることはありません。
結果が表示されるまでにどのくらいの時間がかかりますか?
3時間後、スクリプトエラーはエラー分析内のスクリプトの実際の詳細に置き換わり始めるはずです。
セキュリティ上の欠点は何ですか?
ステップ1に関して、最初に考慮すべきことは、このヘッダーはサーバーからブラウザに送信されるHTTPヘッダーに過ぎないということです。特定のオリジンに制限することやヘッダーを完全に無効にすることは、プライベートリソースが適切に保護されていない場合、ウェブサイトを安全にすることにはなりません。実際、最新のブラウザはヘッダーを考慮しますが、Postmanやロボットのようなアプリケーションはヘッダーを無視することができます。注:すべてのエラーを修正し、新しいエラーが発生しないと確信している場合は、スクリプトエラーをマスクすることを選択できます。新しいエラーが発生した場合は、プロセスを繰り返す必要があります。属性を追加する際(ステップ2)、ブラウザはスクリプトを通常通り実行しますが、同じオリジンでない限り、クッキー、クライアント側のSSL証明書、またはHTTP認証を介してユーザー資格情報の交換は行われません。スクリプトは静的ファイルであるため、これらの機能はほとんど必要ありません。
既存のファイルがHTTPヘッダーの更新を必要としているかどうかはどうやって判断しますか?
Google Chromeで、開発者ツールパネルを開き、ネットワークタブに移動してJSファイルの名前をクリックします。ヘッダータブの下で、「レスポンスヘッダー」を探します。「access-control-allow-origin」がリストされているはずです。注:ブラウザまたはコンテンツ配信ネットワーク(CDN)のキャッシュが更新されるまで待つ必要がある場合があります。
スクリプトエラーのマスク解除を手伝ってくれるチームのメンバーは誰ですか?
サイトのウェブ開発者を招集して、スクリプトエラーの優先順位を付けてマスク解除を手伝ってもらいましょう。
この記事を共有し、さらに詳しく学んでください!
なぜ一部のエラーは「スクリプトエラー」としてのみ報告されるのですか?
Contentsquareはウェブブラウザを通じてエラーを収集します。ほとんどのブラウザは、他のドメインからのエラーの詳細(関数名、ファイルなど)を許可されていない限り共有しません。これは、Google Analyticsのスクリプトのようなサードパーティツールにも当てはまります。
そのため、一部のエラーについては、Contentsquareは「スクリプトエラー」としか報告できません。これはブラウザとホスティングサーバーからの設定によるものです。
これを修正するには、スクリプトをマスク解除して、私たちのようなタグによる検査を受け入れることを示す必要があります。
自分のコンピュータでスクリプトエラーをマスク解除する方法
Contentsquareがエラーの具体的な詳細にアクセスできない場合でも、自分のコンピュータで再現できる場合は、どのエラーを最初にマスク解除するかについてより有用な情報を得ることができるはずです。
以下の手順に従ってください:
1. エラーが一貫して発生するページでウェブサイトを開きます。
2. ブラウザのJavaScriptコンソールを開きます(詳細はこちら)
3. コンソールには、このページのすべてのエラーの完全なマスク解除ログが表示されます。
4. 以下の関数を使用して、このエラーが発生したときにCSタグが何を見ているかを確認します。
window.onerror=function(errorName, file, lineNo, colNo, errStack) {
debugger;
}探しているものが見つからない場合は、サイトのウェブ開発者に確認してください!
スクリプトエラーを永久にマスク解除する方法
ステップ1. マスク解除するスクリプトを選択する
マスク解除するスクリプトが多いほど、収集できるエラーが増えます。
まず、マスク解除するスクリプトの優先順位を付ける必要があります:
- サイトの開発者に問い合わせる 彼らは、エラーの詳細を明らかにし、収集するために最もアクセスしやすいスクリプトを選択する手助けをしてくれます。そして、今後の修正に向けて進めます。
- Error Analysisモジュールからスクリプトを選択する 一部の「スクリプトエラー」は特定のファイルを指しており、詳細を知りたい場合は明らかにするのが良いかもしれません。
- サードパーティのプロバイダーにも同様のことを依頼する これにより、彼らのJavaScriptライブラリがあなたのウォッチリストに追加されます!
注: スクリプトエラーを明らかにするプロセスはグローバルな更新であり、新しいエラーが生成されるのを待つ必要はありません。以下の指示に従って明らかにすることで、このプロセスはすべてのJSエラーを明らかにします。
ステップ2. これらのスクリプトのサーバーにクロスオリジンHTTPヘッダーを追加する
スクリプトをホストしているサーバーは、このHTTPヘッダーを送信する必要があります:
| Access-Control-Allow-Origin: * |
誰がこれを行うことができますか?
これは、ウェブサイトを担当する開発者やホスティングプロバイダーによって行われるサーバーサイドのアクションです。彼らとこのページを共有してください!
これは何を意味しますか?
サーバーはブラウザに対して、任意のオリジンがこのファイルを取得して検査できることを示します。ホストを含みます。
新しいエラーが生成されるのを待つ必要がありますか?
いいえ、クロスオリジンヘッダーを使用してスクリプトエラーを明らかにするプロセスはグローバルな更新であり、新しいエラーが生成されるのを待つ必要はありません。以下の指示に従って明らかにすることで、このプロセスはすべてのサードパーティスクリプトを明らかにします。
ドメインの代わりに自分のウェブサイトのドメインを使用できますか?
はい、スクリプトが読み込まれる完全なオリジン(プロトコル、サブドメイン、ドメイン)を指定すれば、使用することもできます。
例えば: Access-Control-Allow-Origin: https://www.domain.com と Access-Control-Allow-Origin: https://checkout.domain.com あなたの "domain.com" ウェブサイトに対して、スクリプトが読み込まれる場所に応じて。
セキュリティ上の欠点はありますか?
いいえ。最初に考慮すべきことは、このヘッダーはサーバーからブラウザに送信されるHTTPヘッダーに過ぎないということです。特定のオリジンに制限することやヘッダーを完全に無効にすることは、プライベートリソースが適切に保護されていない場合、あなたのウェブサイトを安全にすることにはなりません。実際、現代のブラウザはヘッダーを考慮しますが、Postmanのようなアプリケーションやロボットは単にヘッダーを無視することができます。
ファイルのHTTPヘッダーを確認する方法は? [開発者向け]
- Google Chromeで開発者ツールパネルを開きます。
- ネットワークタブで、JSファイルの名前をクリックします。
- ヘッダータブの下で、「レスポンスヘッダー」を探します。
- 上記の更新後、または変更が必要ない場合は「access-control-allow-origin: *」がリストされているのを確認する必要があります。
注: ブラウザまたはコンテンツ配信ネットワーク(CDN)のキャッシュが更新されるのを待つ必要があるかもしれません。
ステップ3. これらのスクリプトにcrossorigin="anonymous"スクリプト属性を追加する
ファイルを呼び出すタグに、次の属性を追加します:
| <script src="http://another-domain.com/app.js"crossorigin="anonymous"></script> |
⚠️ これは、ヘッダーがクロスドメインを許可するスクリプトにのみ行う必要があります(上記のステップ2)。
誰がこれを行うことができますか? —これは、サイトを担当する開発チームによって行われるサーバーサイドのアクションです。彼らとこのページを共有してください!
これは何を意味しますか? —このコードは、ブラウザに対してターゲットファイルが「匿名」で取得されるべきであることを伝えます。これは、ブラウザがこのファイルを要求する際に、クッキーやHTTP認証情報のようなユーザーを特定する可能性のある情報がサーバーに送信されないことを意味します。
セキュリティ上の欠点はありますか? — いいえ。属性を追加すると、ブラウザはスクリプトを通常通り実行しますが、同じオリジンでない限り、クッキー、クライアント側のSSL証明書、またはHTTP認証を介してユーザーの資格情報の交換は行われません。スクリプトは静的ファイルであるため、これらの機能はほとんど必要ありません。
ステップ4. 結果を確認する
3時間後、スクリプトエラーはError analysisのスクリプトの実際の詳細に置き換わり始めるはずです。