הודעה: בקרוב תהיה אפשרות להשתמש בסגנון חדש למפות הבסיס בפלטפורמה של מפות Google. העדכון הזה לסגנון המפה כולל ערכת צבעים חדשה שמוגדרת כברירת מחדל, סיכות מודרניות ושיפורים בחוויית השימוש במפה ובממשק שלה. כל סגנונות המפה יתעדכנו באופן אוטומטי במרץ 2025. מידע נוסף על הזמינות ועל האופן שבו אפשר להביע הסכמה מוקדם יותר זמין במאמר סגנון מפה חדש בפלטפורמה של מפות Google.

דף זה תורגם על ידי Cloud Translation API.

מדריך בנושא Content Security Policy

במסמך הזה מפורטות המלצות להגדרת מדיניות אבטחת התוכן (CSP) של האתר לממשק API של JavaScript במפות Google. מכיוון שמשתמשי הקצה משתמשים במגוון רחב של סוגים וגרסאות של דפדפנים, מומלץ למפתחים להשתמש בדוגמה הזו כמקור מידע, ולבצע שינויים עד שלא יהיו עוד הפרות של CSP.

מידע נוסף על מדיניות האבטחה של תוכן

CSP מחמיר

מומלץ להשתמש ב-CSP מחמיר במקום ב-CSP של רשימת ההיתרים, כדי לצמצם את האפשרות להתקפות אבטחה. ממשק API של JavaScript במפות Google תומך בשימוש ב-CSP מחמיר שמבוסס על nonce. אתרים חייבים לאכלס את האלמנטים script ו-style בערך nonce. באופן פנימי, ממשק ה-API של JavaScript במפות Google יאתר את האלמנט הראשון כזה, ויחיל את ערך ה-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 כדי להתעדכן, ולכלול ברשימת ההיתרים כל דומיין שירות חדש לפי הצורך.

אתרים שטעינים את Maps JavaScript API מדומיין קודם של Google APIs (לדוגמה maps.google.com) או מדומיין ספציפי לאזור (לדוגמה maps.google.fr), חייבים לכלול גם את שמות הדומיינים האלה בהגדרה script-src של ה-CSP, כפי שמוצג בדוגמה הבאה:

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:;