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

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

מידע נוסף על Content Security Policy

CSP מחמיר

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

אתרים שבהם נטען Maps JavaScript API מדומיין מדור קודם של 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:;