コンテンツセキュリティポリシーに関するガイド

このドキュメントでは、Maps JavaScript API を対象としたウェブサイト用コンテンツセキュリティポリシー（CSP）の設定方法について説明します。エンドユーザーが使用するブラウザの種類とバージョンは多岐にわたるため、この記事の例を参考に、CSP 違反が発生しなくなるまで調整を加えることをおすすめします。

コンテンツセキュリティポリシーの詳細

厳格な CSP

セキュリティ攻撃の可能性を軽減できるよう、許可リストの CSP よりも厳格な CSP を使用することをおすすめします。Maps JavaScript API では、厳格な CSP をノンスベースで使用できます。ウェブサイトの script 要素と style 要素の両方にノンス値を入力してください。 Maps JavaScript API が内部でこれらの要素を検出し、入力されたノンスの値を、API スクリプトによって挿入されたスタイル要素またはスクリプト要素に適用します。

例

次の例は、サンプル CSP ��、サンプル CSP が埋め込まれた HTML ページを示しています。

コンテンツセキュリティポリシーの例

script-src 'nonce-{script value}' 'strict-dynamic' https: 'unsafe-eval' blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:;
font-src https://fonts.gstatic.com;
style-src 'nonce-{style value}' https://fonts.googleapis.com;
worker-src blob:;

HTML ページの例

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css" nonce="{style value}">
    <style nonce="{style value}">...</style>
    ...
  </head>
  <body>
    <div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async nonce="{script value}"></script>
    <script nonce="{script value}"> function initMap() { ... } </script>
  </body>
</html>

許可リストの CSP

許可リストの CSP を設定している場合は、Google Maps Domains のリストをご覧ください。また、このドキュメントと Maps JavaScript API のリリースノートを参照のうえ、最新の状態に保ち、必要に応じて新しいサービスドメインを許可リストに登録することをおすすめします。

従来の Google API ドメイン（maps.google.com など）または地域固有のドメイン（maps.google.fr など）から Maps JavaScript API を読み込むウェブサイトの場合、次の例に示すようにこれらのドメイン名を CSP の script-src 設定に含める必要があります。

script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:;
img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com  *.googleusercontent.com data:;
frame-src *.google.com;
connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com  data: blob:;
font-src https://fonts.gstatic.com;
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
worker-src blob:;