يقدّم هذا المستند اقتراحات حول كيفية ضبط سياسة أمان المحتوى (CSP) للموقع الإلكتروني في Maps JavaScript API. بما أنّ المستخدِمين النهائيين يستخدِمون مجموعة كبيرة ومتنوّعة من أنواع المتصفّحات وإصداراتها، ننصح المطوّرين باستخدام هذا المثال كمرجع، مع إجراء تعديلات دقيقة إلى أن لا تحدث أي انتهاكات أخرى لسياسة أمان المحتوى.
مزيد من المعلومات عن سياسة أمان المحتوى.
سياسة أمان المحتوى الصارمة
للمساعدة في حماية موقعك الإلكتروني من الهجمات التي تستخدم النصوص البرمجية على المواقع الإلكترونية (XSS)، نوصي
باستخدام سياسة أمان محتوى صارمة بدلاً من
سياسة أمان محتوى تستند إلى القائمة المسموح بها. تتيح Maps JavaScript API استخدام سياسة أمان محتوى صارمة تستند إلى قيمة nonce. على المواقع الإلكترونية ملء كل من العنصرَين script وstyle بقيمة nonce. داخليًا، ستعثر Maps JavaScript API على أول عنصر من هذا النوع، وستطبّق قيمة nonce الخاصة به على عنصرَي النمط أو النص البرمجي اللذَين يتم إدراجهما بواسطة النص البرمجي لواجهة برمجة التطبيقات على التوالي.
يسمح الكلمة الرئيسية 'strict-dynamic' في المثال التالي لنص برمجي يتضمّن
قيمة nonce صالحة بتحميل نصوص برمجية أخرى. بما أنّ صفحتك تحمّل Maps JavaScript API باستخدام قيمة nonce، يمكن لواجهة برمجة التطبيقات تحميل النصوص البرمجية الإضافية التي تحتاج إليها، لذا لن تحتاج إلى إدراج أي نطاقات Google في script-src. تتجاهل المتصفّحات التي تتيح 'strict-dynamic' المصدر https:
في المثال، وهو مجرّد حل بديل للمتصفّحات القديمة.
مثال
يوضّح المثال التالي نموذجًا لسياسة أمان المحتوى، بالإضافة إلى صفحة 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>
سياسة أمان المحتوى المستندة إلى القائمة المسموح بها
إذا كنت قد أعددت سياسة أمان محتوى مستندة إلى القائمة المسموح بها، يُرجى الاطّلاع على قائمة نطاقات "خرائط Google". ننصحك بالاطّلاع على هذا المستند وملاحظات إصدار Maps JavaScript API للبقاء على اطّلاع على آخر المستجدّات، وتضمين أي نطاق خدمة جديد في القائمة المسموح بها إذا لزم الأمر.
على المواقع الإلكترونية التي تحمّل Maps JavaScript API من نطاق Google APIs قديم (مثل maps.google.com) أو نطاق خاص بمنطقة معيّنة (مثل maps.google.fr) أن تضمّن أيضًا أسماء النطاقات هذه في إعداد 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:;