AIを使用して英語から翻訳されました
この記事はAI技術を使用して翻訳されたことにご注意ください。正確性を維持するよう努めていますが、一部の詳細は元のテキストを完全に反映していない場合があります。情報に不明な点がある場合は、英語版を参照してください。
エラー分析機能でJSエラーを表示する際、最上部のエラーは「スクリプトエラー」である可能性があります。
Contentsquareはウェブブラウザを介してエラーを収集しますが、ほとんどのブラウザは、他のドメインからのエラーの詳細（関数名、ファイルなど）を共有しません。
そのため、一部のエラーについては、Contentsquareは「スクリプトエラー」としか報告できません。これはブラウザとホスティングサーバーからの設定によるものです。
どのスクリプトをマスク解除するかの管理
開発者と協力して、再現および修正に苦労しているJSエラーを理解してください。
サードパーティプロバイダー*のリストを作成し、クロスオリジン属性でマスク解除されたスクリプトを追跡するためのスプレッドシートを作成できます。
*一部のサードパーティはマスク解除できないことに注意してください。例：Google、Meta、Adobe。
スクリプトエラーのマスク解除方法
| 注意： このプロセスには開発者の助けが必要です。 |
1. スクリプトにAccess-Control-Allow-Origin HTTPヘッダーを追加します：
Access-Control-Allow-Origin
2. レスポンスヘッダーを次のように設定します：
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. マスク解除するスクリプトを選択する
マスク解除するスクリプトが多いほど、収集できるエラーも増えます。
まず、マスク解除するスクリプトの優先順位を付ける必要があります：
- サイトの開発者に問い合わせる 彼らは、エラーの詳細を明らかにし、収集し、今後修正するために最もアクセスしやすいスクリプトを選択する手助けをしてくれます。
- エラー分析モジュールからスクリプトを選択する 一部の「スクリプトエラー」は特定のファイルを指しており、詳細を知りたい場合は明らかにするのが良いかもしれません。
- サードパーティのプロバイダーにも同様のことを依頼する これにより、彼らの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時間後、スクリプトエラーはエラー分析の実際のスクリプトの詳細に置き換わり始めるはずです。