WorldShopping BIZ をご利用いただくための CSP 設定のお願い

ECサイトにCSP（Content Security Policy／コンテンツセキュリティポリシー）を設定されている場合、WorldShopping BIZ が正しく動作しないことがあります。

CSPは、サイトのセキュリティを高めるために「どの外部サービスとの通信を許可するか」を制限する仕組みです。
WorldShopping BIZ は海外のお客様向けにバナーや専用カートを表示するため、いくつかの外部ドメインと通信を行います。
CSPでこれらの通信がブロックされていると、バナーが表示されない・カートが動作しないといった不具合が生じます。

本ページでは、WorldShopping BIZ が利用する要素と、許可していただきたい設定をご案内します。
サイトのCSP設定をご担当されている開発・システム担当者様へお渡しください。

1.許可していただきたいドメイン（最重要）

以下の3つのドメインを許可してください。開発環境・本番環境、および今後のサブドメインを使用した機能追加に対応するため、ワイルドカード（*）での指定をお願いしております。

https://*.worldshopping.jp

https://*.worldshopping.global

https://*.worldshopping.biz

2. ディレクティブ別の設定内容

上記ドメインを、以下の各ディレクティブに対して許可してください。

ディレクティブ	許可が必要な理由
script-src	サービス本体のスクリプト（checkout-js / shop-js）を読み込むため
connect-src	海外IP判定API（Geolocation）と通信するため
img-src	バナーやロゴなどの画像一式を読み込むため
style-src	バナー・カートの見た目を制御するCSSを読み込むため

設定例

Content-Security-Policy:   script-src 'self' https://*.worldshopping.jp https://*.worldshopping.global https://*.worldshopping.biz;   connect-src 'self' https://*.worldshopping.jp https://*.worldshopping.global https://*.worldshopping.biz;   img-src 'self' https://*.worldshopping.jp https://*.worldshopping.global https://*.worldshopping.biz;   style-src 'self' https://*.worldshopping.jp https://*.worldshopping.global https://*.worldshopping.biz;

※ 上記は記載例です。既存のCSP設定に、WorldShopping のドメインを追記する形でご対応ください。

3. WorldShopping BIZ が読み込む要素・API（ご参考）

「どの通信が必要なのか詳細を確認したい」という開発担当者様向けに、
WorldShopping BIZ がサイト上で読み込む要素・APIの一覧を記載します。

サービスを起動するためのJSタグ

サイトに設置いただくタグを通じて、WorldShopping のサービスが読み込まれます。

https://checkout-api.worldshopping.jp/v1/script?token=（ショップキー）

バナー表示・動作のための要素

バナー表示用のDOM要素：#zigzag-worldshopping-checkout
グローバル変数：window.zigzag（バナーや動作に関する情報を格納）

使用するAPI

用途	説明	URL（例）
アクセス解析（PostHog / analytics）	お客様の行動・イベントデータを収集	https://posthog.worldshopping.global/e/ https://checkout-api.worldshopping.jp/v1/analytics
海外IP判定（Geolocation）	IPアドレスから海外ユーザーを判定	https://checkout-api.worldshopping.jp/v1/geolocation
UIモジュール（checkout-js）	サービス共通の設定スクリプト	https://checkout-js.worldshopping.jp/checkout-xxxx.js
UIモジュールCSS	バナー・カートの見た目を制御	https://checkout-js.worldshopping.jp/checkout.xxxx.css
ショップ個別スクリプト（shop-js）	各ショップごとのカスタマイズ設定	https://shop-js.worldshopping.jp/v1/（ショップキー）/index.js
商品HTML取得（fetchHtml）	商品詳細ページのHTMLを取得	https://checkout-api.worldshopping.jp/v1/fetch-html
スクリーンショット（screenshot）	カート追加商品の画像取得に使用	https://checkout-api.worldshopping.jp/v1/screenshot
エラーログ（shop-report）	エラー検知のためのログ取得	https://checkout-api.worldshopping.jp/v1/shop-report

使用する画像

UIモジュールで使用している画像とロゴ（2種類）。img-src の許可ドメインから読み込まれます。

4. 設定後のお願い

CSPの設定変更が完了しましたら、弊社サポートまでお知らせください。海外からのアクセスで WorldShopping BIZ のバナー・カートが正常に表示・動作するか、弊社にて確認いたします。

ご不明な点がございましたら、お気軽にサポートまでお問い合わせください。

WorldShopping BIZ サポートチーム