دليل سياسة أمان المحتوى

يقدّم هذا المستند اقتراحات حول كيفية ضبط سياسة أمان المحتوى (CSP) للموقع الإلكتروني من أجل استخدام Maps JavaScript API. بما أنّ المستخدمين النهائيين يستخدمون مجموعة كبيرة من أنواع المتصفّحات وإصداراتها، ننصح المطوّرين باستخدام هذا المثال كمرجع، مع إجراء تعديلات دقيقة إلى أن تتوقف انتهاكات سياسة أمان المحتوى.

مزيد من المعلومات حول "سياسة أمان المحتوى"

سياسة أمان المحتوى (CSP) الصارمة

للمساعدة في حماية موقعك الإلكتروني من هجمات البرمجة عبر المواقع (XSS)، ننصح باستخدام سياسة أمان محتوى صارمة بدلاً من سياسة أمان محتوى تستند إلى قائمة مسموح بها. تتيح Maps JavaScript API استخدام "سياسة أمان المحتوى" الصارمة المستندة إلى الرموز المميّزة. يجب أن تملأ المواقع الإلكترونية كلاً من العنصرَين script وstyle بقيمة رقمية تُستخدم مرة واحدة. داخليًا، ستعثر واجهة برمجة التطبيقات Maps JavaScript API على أول عنصر من هذا النوع، وتطبّق قيمة nonce على عناصر الأنماط أو النصوص البرمجية التي تم إدراجها بواسطة النص البرمجي لواجهة برمجة التطبيقات على التوالي.

تتيح الكلمة الرئيسية 'strict-dynamic' في المثال التالي لنص برمجي يحتوي على قيمة عشوائية صالحة تحميل نصوص برمجية أخرى. بما أنّ صفحتك تحمّل Maps JavaScript API باستخدام رقم خاص، يمكن لواجهة برمجة التطبيقات تحميل النصوص البرمجية الإضافية التي تحتاج إليها، لذا لست بحاجة إلى إدراج أي نطاقات على Google في script-src. تتجاهل المتصفّحات التي تتوافق مع 'strict-dynamic' المصدر https: في المثال، فهو مجرد خيار احتياطي للمتصفّحات القديمة.

مثال

يعرض المثال التالي نموذجًا لسياسة CSP، بالإضافة إلى صفحة 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:;