內容安全政策指南

本文說明 Maps JavaScript API 網站內容安全政策 (CSP) 的設定建議。使用者的瀏覽器類型和版本各有不同,因此建議開發人員將本範例當做參考並進行微調,直到不再出現 CSP 違規事項。

進一步瞭解內容安全政策

嚴格 CSP

我們建議您使用嚴格 CSP (而非許可清單 CSP),降低遭受安全性攻擊的風險。Maps JavaScript API 支援使用以 Nonce 為基礎的嚴格 CSP。網站必須在 scriptstyle 元素中填入 Nonce 值。Maps JavaScript API 會在內部找到第一個這類元素,然後將 Nonce 值分別套用至 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 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:;