# CSPによりタグがブロックされていないか確認する

サイトにContent Security Policy（CSP）が設定されている場合、Wicleの計測タグやデータ送信がブロックされることがあります。

## 症状 <a href="#symptoms" id="symptoms"></a>

* タグは設置されているが、イベントが送信されない
* ブラウザのコンソールに以下のようなエラーが表示される

```
Refused to load the script 'https://cdn-edge.karte.io/...' because it violates the following Content Security Policy directive: "script-src ..."
```

```
Refused to connect to 'https://....karte.io/...' because it violates the following Content Security Policy directive: "connect-src ..."
```

## 確認方法 <a href="#how-to-check" id="how-to-check"></a>

1. Google Chromeのデベロッパーツールを開く（右クリック →「検証」）
2. 「Console」タブを開く
3. `Refused` や `Content Security Policy` で検索する
4. `karte.io` を含むエラーが表示されていないか確認する

## 対応方法 <a href="#how-to-fix" id="how-to-fix"></a>

サイトのCSP設定に以下のディレクティブを追加してください。

| ディレクティブ       | 追加する値                      |
| ------------- | -------------------------- |
| `script-src`  | `unsafe-eval` `*.karte.io` |
| `connect-src` | `*.karte.io`               |
| `style-src`   | `*.karte.io`               |
| `img-src`     | `*.karte.io`               |

{% hint style="warning" %}
Webサイト側の既存のCSP設定によって、実際の変更内容は異なります。サイトのセキュリティ要件に合わせて設定してください。
{% endhint %}

CSPの設定方法について詳しくは、[計測タグの設置 - Content Security Policyについて](/initial-setting/tag.md#content-security-policy)をご参照ください。

## CSPの設定変更後の確認 <a href="#after-fix" id="after-fix"></a>

1. CSPの設定を変更後、ブラウザのキャッシュをクリアしてページを再読み込みする
2. コンソールに `karte.io` に関するCSPエラーが表示されなくなったことを確認する
3. [Chrome拡張のイベントビューア](/chrome-extension/event-viewer.md)でイベントが発生していることを確認する


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wicle.io/other/troubleshoot/tag/check-csp.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.