このドキュメントでは、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:;