コンテンツセキュリティポリシー
サイトが Content-Security-Policy ヘッダーを送信している場合、ブラウザーはそのポリシーで許可されていないすべてのリソースをブロックします。Kaleidrのスクリプト、iframe、リクエストも対象です。このページでは製品ごとに許可が必要なものを示します。ヘッダーを送っていない場合、この設定は不要です。
許可が必要なリソースは、製品の実行場所によって異なります：
| 製品 | 実行場所 | ポリシーで許可するもの |
|---|---|---|
| Viewer | Kaleidrがホストするiframe内 | ローダースクリプトとiframe。 |
| Tile | Kaleidrがホストするiframe内 | ローダー、セッションリクエスト、iframe。 |
| Chat | お使いのページ内 | ローダー、APIリクエスト、挿入スタイル、埋め込みフォント、画像。 |
| Editor | お使いのページ内（独立した地図を使用） | 上記に加え、ベースマップホスト、地図ワーカー、地図画像。 |
ViewerとTileのiframe内部では、地図とその読み込みリソースをKaleidr自身のポリシーで制御します。ページ側のポリシーではありません。そのため必要な許可項目が少なくなっています。
使用するホスト
| ホスト | 提供するもの | 使用する製品 |
|---|---|---|
https://cdn.kaleidr.com | kaleidr.js と製品バンドル（chat.js、viewer.js、editor.js、tile.js）。 | SDKを利用するすべての製品。 |
https://api.kaleidr.com | セッション交換およびChatの回答中のリクエスト。 | Chat、Editor、Tile。 |
https://map-embed.kaleidr.com | ViewerとTileのiframe内に表示されるページ。 | Viewer、Tile。 |
https://tile.kaleidr.com | Editor内の地図が使用するベースマップ（スタイル、タイル、スプライト、フォント）。 | Editor。 |
Kaleidr製品のためにMapbox、MapTiler、OpenStreetMapのホストを許可する必要はありません。以前のこのページには記載されていましたが、削除できます。ただしページが独自の地図を利用する場合は、その地図が必要とするホストは引き続き許可してください。
Viewer
SDK要素または Kaleidr.mount を使う場合：
script-src https://cdn.kaleidr.com;
frame-src https://map-embed.kaleidr.com;
Studioの単純なiframe埋め込みコードならスクリプトはありません：
frame-src https://map-embed.kaleidr.com;
キーなしでマウントしたViewerはページからリクエストを送らないため、connect-src の項目は不要です。
Tile
script-src https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
frame-src https://map-embed.kaleidr.com;
connect-src は、iframeの生成前にSDKが公開可能キーを用いて行うセッション交換を許可するために必要です。
Chat
script-src https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
style-src 'unsafe-inline';
font-src data:;
img-src data: https:;
| ディレクティブ | 理由 |
|---|---|
script-src https://cdn.kaleidr.com | ローダーと chat.js。 |
connect-src https://api.kaleidr.com | セッション交換とすべての質問・回答。 |
style-src 'unsafe-inline' | Chatは文書のheadにnonceなしの <style> 要素を追加します。 |
font-src data: | Chatのフォントはバンドル内に data: URLとして埋め込まれています。 |
img-src data: | Chatのアイコンは data: URLとして埋め込まれています。 |
img-src https: | 場所カードの写真は場所ごとに異なる画像ホストから取得され、ここでは列挙できません。img-src を厳しくすると許可外のホストの写真は読み込めません。 |
img-src https:（サ イトアイコン） | 回答中のリンクや場所カードのWebサイトにはアイコンが表示されます。Googleのfaviconサービス https://www.google.com から取得され、https://t0.gstatic.com から https://t3.gstatic.com へリダイレクトされます。厳しい img-src では https://www.google.com と https://*.gstatic.com を許可してください。そうしないとアイコンだけが欠け、リンク自体は機能します。 |
Chatバンドルには地図ライブラリが含まれず、'wasm-unsafe-eval' も不要です。ページに既にある地図に描画するため、そのライブラリが要求するスクリプトホスト、connect-src と img-src のタイル・スタイルホスト、Mapbox GL JSやMapLibre GL JSの worker-src blob: は維持してください。
Chatが独自の地図ではなくKaleidrのViewerまたはTile要素を操作する場合は、frame-src https://map-embed.kaleidr.com を含む該当製品の設定も追加してください。
Editor
script-src 'self' https://cdn.kaleidr.com;
style-src 'self' 'unsafe-inline';
connect-src 'self' https://api.kaleidr.com https://tile.kaleidr.com;
img-src 'self' data: blob: https://tile.kaleidr.com;
worker-src blob:;
font-src 'self' data:;
| ディレクティブ | 理由 |
|---|---|
script-src https://cdn.kaleidr.com | ローダーと editor.js。 |
style-src 'unsafe-inline' | Editorはnonceを使わずJavaScriptからスタイルシートを追加します。 |
connect-src https://api.kaleidr.com | セッション交換。 |
connect-src https://tile.kaleidr.com | ページから取得するベースマップのスタイル、タイル、スプライト、ラベルフォント。 |
img-src data: blob: https://tile.kaleidr.com | 地図画像とアイコン。地図は blob: と data: URLから画像を生成します。 |
worker-src blob: | 地図ワーカーを blob: URLから実行します。 |
font-src data: | EditorのUIフォントは data: URLとしてバンドルに埋め込まれています。 |
'wasm-unsafe-eval' は標準のリストに含めません。3Dモデルのデコードに使う editor.js のWebAssemblyコンパイルがポリシーでブロックされた、とコンソールに表示された場合だけ script-src に追加してくだ さい。
styleId に完全なスタイルURLを渡す場合は、そのスタイルのホストも connect-src と img-src で許可してください。
1ページで複数の製品を使う場合
必要な項目を組み合わせます。TileマップをChatパネルで操作するページには次が必要です：
script-src https://cdn.kaleidr.com;
connect-src https://api.kaleidr.com;
frame-src https://map-embed.kaleidr.com;
style-src 'unsafe-inline';
font-src data:;
img-src data: https:;
完全なポリシー
前述のブロックはKaleidrに固有の追加要件です。実際のポリシーでは自サイトのリソースも許可する必要があります。その他のリソースを自分のオリジンから提供し、ViewerとTileを埋め込むサイトの完全なヘッダー例：
Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.kaleidr.com; connect-src 'self' https://api.kaleidr.com; frame-src https://map-embed.kaleidr.com; style-src 'self' 'unsafe-inline'
この例に style-src 'unsafe-inline' が含まれるのはKaleidrのコードとは別の理由です。このドキュメントの例は style="display:block; height:480px" というインライン属性で要素の高さを指定します。'unsafe-inline' のないポリシーではインラインstyle属性が無効になります。インラインスタイルをブロックしたい場合は、スタイルシートでサイズを設定してください：
kaleidr-map { display: block; height: 480px; }
SDKがiframeに与えるサイズには影響しません。スクリプトで指定され、スタイルポリシーではブロックされないためです。要素のデフォルトの display:block も <style> タグや style 属性から提供されるものではなく、'unsafe-inline' を必要としません。
Nonce、ハッシュ、strict-dynamic
- スクリプト。 ローダーは各バンドルを
<script src>要素として追加します。ホストを列挙するscript-srcで許可できます。nonceと'strict-dynamic'を使う場合、ローダーのタグにnonceを付けてください。追加のスクリプトは'strict-dynamic'によって信頼され、ホストの指定は不要です。 - スタイル。 ChatとEditorが挿入するスタイルにSDKからnonceを指定できません。内容はリリースで変わるためハッシュも固定できません。この2製品には
style-srcの'unsafe-inline'が必要です。ViewerとTileはページにスタイルを挿入しません。 - 完全性。 ローダータグに
integrity属性を追加しないでください。ファイルは同じURLで更新されます。CDNのバージョン管理を参照してください。
リソースがブロックされたときの表示
ブロックはブラウザーのコンソールに原因のディレクティブとともに表示されます。次の表と照合してください。
| 症状 | コンソールのディレクティブ | 追加する設定 |
|---|---|---|
何もマウントされない。Kaleidr is not defined。 | script-src | script-src に https://cdn.kaleidr.com。 |
要素が空白。コンソール：[kaleidr:<product>] [kaleidr] failed to load …/embed/v1/<product>.js | script-src | 同じホスト。ローダーはハッシュなどで許可されていたが、バンドルは許可されていません。 |
| ViewerまたはTileが空白の枠を表示。 | frame-src（または child-src、default-src） | frame-src に https://map-embed.kaleidr.com。 |
Tile、Chat、Editorが起動せず、sessions リクエストがブロック。 | connect-src | connect-src に https://api.kaleidr.com。 |
| チャットパネルのスタイルがない。 | style-src | style-src に 'unsafe-inline'。 |
| Chatのアイコンかフォントが表示されない。 | img-src、font-src | 両方に data:。 |
| 場所の写真やリンク横のアイコンがない。 | img-src | img-src に https:、またはコンソールに表示されたホスト。 |
| Editorのパネルは表示されるが地図が空白。 | connect-src、worker-src または img-src | connect-src と img-src に https://tile.kaleidr.com、worker-src と img-src に blob:。 |
| Editorのスタイルがない。 | style-src | style-src に 'unsafe-inline'。 |
style 属性の高さが反映されない。 | style-src | 追加不要。スタイルシートからサイズを設定してください。 |
すべての障害がポリシーの問題とは限りません。sessions が送信され、401、403、429が返った場合はポリシーによる通信は成功しており、APIが拒否しています。エラーとCORSと許可オリジンを参照してください。
レポート専用 モードでの導入
本番ページを壊さずに厳しいポリシーへKaleidrを追加する手順：
- 現行ポリシーと並べて
Content-Security-Policy-Report-Onlyに候補ポリシーを設定し、自分で管理するレポート受信先を指定します。 - 埋め込みをテストします。ページを開いて地図を動かし、Chatで写真付きの場所が返る質問をします。
- レポートに出てきた提供元を該当ディレクティブに追加します。場所の写真が新しいホストを増やすことがよくあります。
- 違反レポートがなくなったら、設定を
Content-Security-Policyに移します。
許可が不要なもの
- Kaleidr製品のためのMapbox、MapTiler、OpenStreetMapのホスト。
script-srcの'unsafe-inline'。ローダーは製品バンドルを<script src>要素として追加し、インラインスクリプトは作りません。frame-ancestors。これは自分のページを誰がiframeに入れられるかを制御するもので、自分のページが何をiframeに入れられるかとは関係ありません。- ViewerまたはTileのiframe内部で動作するリソースに関する設定。