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

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

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

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