במסמך הזה מפורטות המלצות להגדרת מדיניות אבטחת התוכן (CSP) של האתר לממשק API של JavaScript במפות Google. מכיוון שמשתמשי הקצה משתמשים במגוון רחב של סוגים וגרסאות של דפדפנים, מומלץ למפתחים להשתמש בדוגמה הזו כמקור מידע, ולבצע שינויים עד שלא יהיו עוד הפרות של CSP.
מידע נוסף על מדיניות האבטחה של תוכן
CSP מחמיר
מומלץ להשתמש ב-CSP מחמיר במקום ב-CSP של רשימת ההיתרים, כדי לצמצם את האפשרות להתקפות אבטחה.
ב-Maps JavaScript API יש תמיכה בשימוש ב-CSP מחמירים ומבוססת-על.
אתרים חייבים לאכלס את האלמנטים script
ו-style
בערך nonce.
באופן פנימי, Maps JavaScript API ימצא את הרכיב הראשון מסוג זה, ויחיל את ערך הצופן שלו (nonce) על סגנון או על רכיבי סקריפט שנוספו על ידי סקריפט ה-API, בהתאמה.
דוגמה
בדוגמה הבאה מוצג קוד CSP לדוגמה, לצד דף HTML שבו הוא מוטמע:
דוגמה למדיניות Content Security Policy
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 כדי להתעדכן, ולכלול ברשימת ההיתרים כל דומיין שירות חדש לפי הצורך.
אתרים שטוענים את JavaScript API של מפות Google מדומיין מדור קודם של Google APIs (למשל maps.google.com
) או מדומיין ספציפי לאזור (למשל maps.google.fr
), חייבים לכלול גם את שמות הדומיינים האלה בהגדרת ה-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:;