コンテンツセキュリティポリシーを設定する

コンテンツセキュリティポリシー (CSP) は、ブラウザがリソースを読み込むことを許可するソースを宣言することで、クロスサイトスクリプティング (XSS) やデータインジェクション攻撃のリスクを低減します。この記事では、HERE Maps API for JavaScriptを実行するために必要なCSPディレクティブについて説明します。

CSPは、サーバーのContent-Security-Policyレスポンスヘッダーを介して配信する必要があります。あるいは、完全にクライアントサイドの環境ではHTMLの<meta>要素を使用することもできますが、すべてのCSP機能がサポートされているわけではありません。

必須のディレクティブ

worker-src

このAPIは、ワーカースクリプト (タイルのデコード、クラスタリングなど) 用にblob URLを使用してWebワーカーを起動します。

worker-src blob:;

script-src-elem

すべてのAPIスクリプトファイルが許可されている必要があります。同一オリジンから読み込む場合 (バンドルまたはセルフホスト型)：

script-src-elem 'self';

HERE CDNから直接読み込む場合：

script-src-elem https://js.api.here.com;

style-src

HERE Maps UIモジュール (H.ui) は実行時にインラインスタイルを挿入するため、'unsafe-inline'が必要です。同じオリジンからスタイルシートを読み込む場合：

style-src 'self' 'unsafe-inline';

HERE CDNからmapsjs-ui.cssを直接読み込む場合：

style-src 'self' https://js.api.here.com 'unsafe-inline';

connect-src

次のHEREエンドポイントに対してネットワークリクエストが行われます。

最低限必要なディレクティブ：

connect-src https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;

ページとAPIが同じオリジン上に共存している場合は、'self'も追加します。

img-src

マーカーアイコンは画像として読み込まれます。インラインアイコンはデータURIとしてエンコードされます。

img-src data: https://js.api.here.com;

同じオリジンからカスタムマーカー画像を提供する場合は、'self'を追加します。

script-src (WebAssembly)

このAPIはWebAssembly (WASM) モジュールを使用します (例：HARPレンダラーでのジオメトリーのデコード)。WASMの実行を許可するには、'wasm-unsafe-eval'をscript-srcに追加します。

script-src 'wasm-unsafe-eval';

これは'unsafe-eval'よりも対象が限定されており、任意のJavaScript eval()を有効にすることなく、評価をWebAssemblyのみに制限します。

最小限のポリシー例

以下のポリシーは、バンドル (セルフホスト型) APIの使用を対象としています。

default-src 'none';
script-src-elem 'self';
script-src 'wasm-unsafe-eval';
style-src 'self' 'unsafe-inline';
connect-src 'self'
            https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;
img-src 'self' data: https://js.api.here.com;
worker-src blob:;

CDN経由で読み込まれるAPI

https://js.api.here.comからAPIモジュールを直接読み込む場合は、スクリプトおよびスタイルのソースを適宜調整します。

default-src 'none';
script-src 'wasm-unsafe-eval' https://js.api.here.com;
style-src https://js.api.here.com 'unsafe-inline';
connect-src https://js.api.here.com
            https://*.hereapi.com
            https://interactive.data.api.platform.here.com;
img-src blob: data: https://js.api.here.com;
worker-src blob: https://js.api.here.com;

地域固有の設定

韓国

韓国固有の地図およびRESTトラフィックについては、connect-srcにhttps://*.heremaps.krを追加します。

connect-src https://js.api.here.com
            https://*.hereapi.com
            https://*.heremaps.kr
            https://interactive.data.api.platform.here.com;

ポリシーに'self'が含まれている場合は、それを維持し、同じconnect-srcディレクティブにhttps://*.heremaps.krを追加します。

セキュリティに関するその他の推奨事項

• default-src 'none'をベースラインとして設定し、明示的に許可されていないものはすべて拒否するようにします。
• frame-ancestors 'self'を使用して、マップページがサードパーティのフレームに埋め込まれるのを防いでください (クリックジャッキング防止)。
• 'unsafe-eval'は使用しないでください。APIでは必要とされません。
• 機能セットが許す限り、の範囲を可能な限り狭く設定してください。connect-srcのスコープは、使用する機能セットが許す限り厳しく設定してください。インタラクティブマップレイヤーを使用しない場合は、https://interactive.data.api.platform.here.comを省略してください。