مراقبة تطبيق الويب باستخدام Reporting API

يمكنك استخدام Reporting API لرصد الانتهاكات الأمنية وطلب البيانات من واجهة برمجة التطبيقات المتوقّفة نهائيًا وغير ذلك.

Maud Nalpas
Maud Nalpas

لا تحدث بعض الأخطاء إلا في مرحلة الإنتاج. لن تظهر لك على الجهاز أو أثناء عملية التطوير لأن المستخدمين الفعليين والشبكات الحقيقية والأجهزة الفعلية يغيرون اللعبة. تساعد واجهة برمجة التطبيقات Reporting API في رصد بعض هذه الأخطاء، مثل الانتهاكات الأمنية أو طلبات البيانات من واجهة برمجة التطبيقات التي سيتم إيقافها نهائيًا أو سيتم إيقافها قريبًا على موقعك الإلكتروني، كما تنقلها إلى نقطة النهاية التي حدّدتها.

ويتيح لك تحديد ما تريد مراقبته من خلال عناوين HTTP، ويتم تشغيله من خلال المتصفّح.

من خلال إعداد واجهة Reporting API، لا داعي للقلق بشأن الأخطاء التي قد تحدث بعد هذه الأنواع من الأخطاء لكي تتمكّن من إصلاحها.

تتناول هذه المشاركة الإجراءات التي يمكن أن تتخذها واجهة برمجة التطبيقات هذه وكيفية استخدامها. لنطّلِع على التفاصيل.

العرض التوضيحي والرمز

يمكنك الاطّلاع على Reporting API بشكل عملي بدءًا من Chrome 96 والإصدارات الأحدث (الإصدار التجريبي من Chrome أو إصدار Canary اعتبارًا من تشرين الأول (أكتوبر) 2021).

نظرة عامة

رسم بياني يلخص الخطوات أدناه، بدءًا من إنشاء التقارير ووصولاً إلى وصول مطوِّر البرامج إلى التقارير
كيفية إنشاء التقارير وإرسالها

لنفترض أنّ موقعك الإلكتروني، site.example، يتضمّن سياسة أمان محتوى وسياسة مستندات. ألا تعرف ماذا تفعل هذه؟ لا بأس، ستظل قادرًا على فهم هذا المثال.

ولذلك قررت مراقبة موقعك لمعرفة متى يتم انتهاك هذه السياسات، ولكن أيضًا لأنك تريد أيضًا مراقبة واجهات برمجة التطبيقات المتوقّفة أو التي سيتم قريبًا إيقافها نهائيًا والتي قد تستخدمها قاعدة الرموز البرمجية.

ولإجراء ذلك، يمكنك ضبط عنوان Reporting-Endpoints وربط أسماء نقاط النهاية هذه باستخدام التوجيه report-to في سياساتك عند الحاجة.

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the `default` endpoint

يحدث شيء غير متوقع، ويتم انتهاك هذه السياسات لدى بعض المستخدمين لديك.

أمثلة على الانتهاكات

index.html

<script src="script.js"></script>
<!-- CSP VIOLATION: Try to load a script that's forbidden as per the Content-Security-Policy -->
<script src="https://example.com/script.js"></script>

script.js، تم التحميل بواسطة index.html

// DOCUMENT-POLICY VIOLATION: Attempt to use document.write despite the document policy
try {
  document.write('<h1>hi</h1>');
} catch (e) {
  console.log(e);
}
// DEPRECATION: Call a deprecated API
const webkitStorageInfo = window.webkitStorageInfo;

يُنشئ المتصفّح تقريرًا بانتهاك سياسة CSP وتقريرًا حول انتهاك سياسة المستندات وتقرير الإيقاف النهائي لتسجيل هذه المشاكل.

من خلال مهلة قصيرة - تصل إلى دقيقة واحدة - يرسل المتصفّح التقارير إلى نقطة النهاية التي تم ضبطها لنوع الانتهاك هذا. يتم إرسال التقارير خارج الإطار من خلال المتصفّح نفسه (وليس من خلال موقعك الإلكتروني أو الخادم).

وتستلم نقاط النهاية هذه التقارير.

يمكنك الآن الوصول إلى التقارير المتعلقة بنقاط النهاية هذه ومراقبة المشكلة التي حدثت. أنت مستعد لبدء تحديد المشاكل التي تؤثر في المستخدمين وحلّها.

مثال للتقرير

{
  "age": 2,
  "body": {
    "blockedURL": "https://site2.example/script.js",
    "disposition": "enforce",
    "documentURL": "https://site.example",
    "effectiveDirective": "script-src-elem",
    "originalPolicy": "script-src 'self'; object-src 'none'; report-to main-endpoint;",
    "referrer": "https://site.example",
    "sample": "",
    "statusCode": 200
  },
  "type": "csp-violation",
  "url": "https://site.example",
  "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
}

حالات الاستخدام وأنواع التقارير

يمكن ضبط Reporting API لمساعدتك في رصد العديد من أنواع التحذيرات أو المشاكل المهمة التي تحدث على موقعك الإلكتروني:

نوع التقرير مثال على حالة يتم فيها إنشاء تقرير
انتهاك CSP (المستوى 3 فقط) لقد ضبطت Content-Security-Policy (CSP) على إحدى صفحاتك، ولكنّ الصفحة تحاول تحميل نص برمجي لا يسمح به CSP.
انتهاك سياسة COOP لقد ضبطت Cross-Origin-Opener-Policy على إحدى الصفحات، ولكن هناك نافذة من مصادر متعددة تحاول التفاعل مباشرةً مع المستند.
انتهاك سياسة COEP لقد ضبطت Cross-Origin-Embedder-Policy على إحدى الصفحات، إلا أنّ المستند يتضمّن إطار iframe من مصادر متعددة لم يتم السماح بتحميله من خلال مستندات متعددة المصادر.
انتهاك سياسة المستندات تتضمن الصفحة سياسة مستندات تمنع استخدام document.write، لكن نص برمجي يحاول استدعاء document.write.
انتهاك سياسة الأذونات تتضمن الصفحة سياسة أذونات تمنع استخدام الميكروفون ونصًا برمجيًا يطلب إدخال صوت.
تحذير بشأن الإيقاف النهائي تستخدم الصفحة واجهة برمجة تطبيقات تم إيقافها نهائيًا أو سيتم إيقافها نهائيًا، ويتم استدعاؤها مباشرةً أو من خلال نص برمجي تابع لجهة خارجية.
التدخل تحاول الصفحة تنفيذ إجراء يقرّر المتصفّح عدم الالتزام به، وذلك لأسباب تتعلّق بالأمان أو الأداء أو تجربة المستخدم. مثال في Chrome: تستخدم الصفحة document.write على الشبكات البطيئة أو تستدعي navigator.vibrate في إطار من مصادر متعددة لم يتفاعل معه المستخدم بعد.
حادث سير يتعطل المتصفّح عندما يكون موقعك الإلكتروني مفتوحًا.

التقارير

كيف تبدو التقارير؟

ويرسل المتصفّح التقارير إلى نقطة النهاية التي ضبطها. وترسل هذه الميزة الطلبات التي تبدو على النحو التالي:

POST
Content-Type: application/reports+json

وتكون حمولة هذه الطلبات عبارة عن قائمة تقارير.

أمثلة على قائمة التقارير

[
  {
    "age": 420,
    "body": {
      "columnNumber": 12,
      "disposition": "enforce",
      "lineNumber": 11,
      "message": "Document policy violation: document-write is not allowed in this document.",
      "policyId": "document-write",
      "sourceFile": "https://site.example/script.js"
    },
    "type": "document-policy-violation",
    "url": "https://site.example/",
    "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
  },
  {
    "age": 510,
    "body": {
      "blockedURL": "https://site.example/img.jpg",
      "destination": "image",
      "disposition": "enforce",
      "type": "corp"
    },
    "type": "coep",
    "url": "https://dummy.example/",
    "user_agent": "Mozilla/5.0... Chrome/92.0.4504.0"
  }
]

في ما يلي البيانات التي يمكنك الاطّلاع عليها في كل من هذه التقارير:

الحقل الوصف
age عدد المللي ثانية بين الطابع الزمني للتقرير والوقت الحالي.
body تمثّل هذه السمة بيانات التقرير الفعلية في سلسلة JSON. يتم تحديد الحقول المضمّنة في body الخاص بالتقرير من خلال type الخاص بالتقرير. ⚠️ تتضمّن التقارير التي تشير إلى أنواع مختلفة نصوصًا مختلفة. للاطّلاع على النص الدقيق لكل نوع تقرير، راجِع نقطة نهاية إعداد التقارير التجريبية واتّبِع التعليمات لإنشاء نماذج للتقارير.
type نوع تقرير، على سبيل المثال csp-violation أو coep.
url عنوان المستند أو العامل الذي تم إنشاء التقرير منه. وتتم إزالة البيانات الحساسة، مثل اسم المستخدم وكلمة المرور والأجزاء من عنوان URL هذا.
user_agent عنوان User-Agent للطلب الذي تم إنشاء التقرير منه.

التقارير المعتمدة

إنّ نقاط نهاية إعداد التقارير التي تتضمّن المصدر نفسه للصفحة التي تنشئ التقرير تتلقّى بيانات الاعتماد (ملفات تعريف الارتباط) في الطلبات التي تتضمّن التقارير.

وقد توفّر بيانات الاعتماد سياقًا إضافيًا مفيدًا حول التقرير، مثلاً، ما إذا كان حساب مستخدم معيّن يعرض أخطاءً باستمرار أو ما إذا كان تسلسل معيّن من الإجراءات المتخذة على صفحات أخرى يؤدي إلى ظهور تقرير على هذه الصفحة.

متى يرسل المتصفّح التقارير وكيف؟

يتم إرسال التقارير خارج الإطار من موقعك الإلكتروني: يتحكّم المتصفِّح في كيفية إرسالها إلى نقاط النهاية التي تم ضبطها. لا توجد أيضًا طريقة للتحكم في وقت إرسال المتصفح للتقارير، فهو يجمع هذه التقارير ويضعها في قوائم الانتظار ويرسلها تلقائيًا في وقت مناسب.

وهذا يعني أنّ استخدام واجهة برمجة التطبيقات Reporting API لا يعني عدم حدوث أي قلق بشأن الأداء أو عدم توفّرها.

يتم إرسال التقارير مع تأخير يصل إلى دقيقة واحدة لزيادة فرص إرسال التقارير على دفعات. ويوفر ذلك معدل نقل البيانات بطريقة محترمة لاتصال شبكة المستخدم، وهو أمر مهم بشكل خاص على الأجهزة الجوّالة. يمكن للمتصفح أيضًا تأخير التسليم إذا كان مشغولاً بمعالجة العمل ذي الأولوية العالية، أو إذا كان المستخدم على شبكة بطيئة و/أو مزدحمة في ذلك الوقت.

مشاكل الطرف الثالث والطرف الأول

إنّ التقارير التي تنشأ بسبب مخالفات أو عمليات إيقاف نهائية تحدث على صفحتك سيتم إرسالها إلى نقاط النهاية التي أعددتها. ويشمل ذلك الانتهاكات التي ترتكبها النصوص البرمجية التابعة لجهات خارجية والتي يتم تشغيلها على صفحتك.

لن يتم الإبلاغ عن المخالفات أو عمليات الإيقاف نهائيًا التي حدثت في إطار iframe من مصادر متعددة ومضمّنة في صفحتك (على الأقل، ليس تلقائيًا). ويمكن لإطار iframe إعداد تقاريره الخاصة، وكذلك إعداد تقارير إلى خدمة إعداد التقارير لموقعك الإلكتروني، أي خدمة إعداد التقارير التابعة للطرف الأول، ولكن هذا الأمر يعود إلى الموقع الإلكتروني المؤطر. تجدر الإشارة أيضًا إلى أنّ معظم التقارير لا يتم إنشاؤها إلا إذا تم انتهاك سياسة الصفحة، وأن تختلف سياسات صفحتك عن سياسات إطار iframe.

مثال مع عمليات الإيقاف النهائي

إذا تم إعداد عنوان &quot;نقاط النهاية لإعداد التقارير&quot; على صفحتك: سيتم إبلاغ نقطة النهاية بواجهة برمجة التطبيقات المتوقّفة التي يتم استدعاؤها من خلال نصوص برمجية تابعة لجهات خارجية يتم تشغيلها على صفحتك. لن يتم إبلاغ نقطة النهاية عن واجهة برمجة التطبيقات المتوقفة نهائيًا والتي تم استدعاؤها من خلال إطار iframe مضمّن في صفحتك. لن يتم إنشاء تقرير الإيقاف إلّا إذا أعدّ خادم iframe نقاط النهاية ضمن التقارير، وسيتم إرسال هذا التقرير إلى نقطة النهاية التي أعدّها خادم iframe.
في حال إعداد عنوان "نقاط النهاية لإعداد التقارير" على صفحتك: سيتم إبلاغ نقطة النهاية الخاصة بواجهة برمجة التطبيقات المتوقّفة والتي تم إيقافها نهائيًا بواسطة النصوص البرمجية التابعة لجهات خارجية والتي يتم تشغيلها على صفحتك. لن يتم إبلاغ نقطة النهاية عن واجهة برمجة التطبيقات المتوقفة نهائيًا والتي تم استدعاؤها من خلال إطار iframe مضمّن في صفحتك. لن يتم إنشاء تقرير الإيقاف إلّا إذا أعدّ خادم iframe نقاط النهاية ضمن التقارير، وسيتم إرسال هذا التقرير إلى نقطة النهاية التي أعدّها خادم iframe.

المتصفحات المتوافقة

يلخص الجدول أدناه دعم المتصفح للإصدار 1 من واجهة برمجة التطبيقات لإعداد التقارير، والذي يتضمن عنوان Reporting-Endpoints. ولا يزال توافق المتصفِّح مع الإصدار 0 من Reporting API (عنوان Report-To) هو نفسه، باستثناء نوع واحد من التقارير: "تسجيل أخطاء الشبكة" غير متاح في Reporting API الجديدة. يُرجى قراءة دليل نقل البيانات للاطّلاع على التفاصيل.

نوع التقرير Chrome Chrome لنظام التشغيل iOS برنامج المتصفح Safari Firefox Edge
انتهاك سياسة أمان المحتوى (CSP) (المستوى 3 فقط)* ✔ نعم ✔ نعم ✔ نعم ✘ لا ✔ نعم
تسجيل أخطاء الشبكة ✘ لا ✘ لا ✘ لا ✘ لا ✘ لا
مخالفة COOP/COEP ✔ نعم ✘ لا ✔ نعم ✘ لا ✔ نعم
جميع الأنواع الأخرى: انتهاك سياسة المستند، والإيقاف النهائي، والتدخل، والتعطُّل ✔ نعم ✘ لا ✘ لا ✘ لا ✔ نعم

يلخص هذا الجدول فقط دعم report-to باستخدام عنوان Reporting-Endpoints الجديد. يُرجى الاطّلاع على نصائح نقل البيانات الخاصة بتقارير CSP إذا كنت تريد نقل البيانات إلى Reporting-Endpoints.

استخدام Reporting API

تحديد الوجهة التي يجب إرسال التقارير فيها

ثمة خياران:

  • إرسال التقارير إلى خدمة حالية لجمع التقارير
  • يمكنك إرسال التقارير إلى جهة تجميع التقارير التي تنشئها وتديرها بنفسك.

الخيار 1: استخدام خدمة حالية لجمع التقارير

في ما يلي بعض الأمثلة على خدمات جمع التقارير:

إذا كانت لديك حلول أخرى، يُرجى فتح مشكلة لإعلامنا بها، وسنعدّل هذه المشاركة.

بالإضافة إلى الأسعار، يُرجى مراعاة النقاط التالية عند اختيار جهة تجميع التقارير: 🧐

  • هل يتوافق هذا المجمِّع مع جميع أنواع التقارير؟ على سبيل المثال، لا تدعم جميع حلول نقاط نهاية إعداد التقارير تقارير COOP/COEP.
  • هل توافق على مشاركة أي من عناوين URL لتطبيقك مع أداة تجميع تقارير تابعة لجهات خارجية؟ وحتى إذا أزال المتصفّح المعلومات الحساسة من عناوين URL هذه، قد يتم تسريب المعلومات الحساسة بهذه الطريقة. إذا كان هذا يبدو خطيرًا جدًا لتطبيقك، فشغّل نقطة نهاية إعداد التقارير الخاصة بك.

الخيار 2: إنشاء أداة تجميع التقارير وتشغيلها

إن إنشاء خادم خاص بك يتلقى التقارير ليس بالأمر السهل للغاية. للبدء، يمكنك تقسيم النموذج النموذجي الخفيف. وقد تم إنشاؤه باستخدام Express، ويمكنه تلقّي التقارير وعرضها.

  1. انتقِل إلى أداة تجميع التقارير النموذجية.

  2. انقر على إنشاء ريمكس لتعديله ليصبح المشروع قابلاً للتعديل.

  3. لديك الآن النسخة الطبق الأصل عنها. ويمكنك تخصيصه لأغراضك الخاصة.

إذا كنت لا تستخدم النص النموذجي وتريد إنشاء خادمك الخاص من البداية:

  • تحقَّق من أنّ طلبات POST باستخدام Content-Type من application/reports+json للتعرّف على التقارير التي يرسلها المتصفّح إلى نقطة النهاية.
  • إذا كانت نقطة النهاية متوفّرة على مصدر مختلف عن موقعك الإلكتروني، تأكَّد من أنّها متوافقة مع طلبات طلب التنفيذ المُسبَق لخدمة CORS.

الخيار 3: دمج الخيارين 1 و2

ننصحك بالسماح لمقدّم خدمة معيّن بالاهتمام ببعض أنواع التقارير، ولكن الحصول على حلّ داخلي للمستخدمين الآخرين.

في هذه الحالة، عيِّن نقاط نهاية متعددة على النحو التالي:

Reporting-Endpoints: endpoint-1="https://reports-collector.example", endpoint-2="https://my-custom-endpoint.example"

ضبط عنوان Reporting-Endpoints

ضبط عنوان للاستجابة Reporting-Endpoints يجب أن تكون قيمتها واحدة أو سلسلة من أزواج المفتاح/القيمة المفصولة بفواصل:

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

في حال نقل البيانات من واجهة Reporting API القديمة إلى واجهة Reporting API الجديدة، قد يكون من المنطقي ضبط كل من Reporting-Endpoints وReport-To. يُرجى الاطّلاع على التفاصيل في دليل نقل البيانات. على وجه التحديد، إذا كنت تستخدم الإبلاغ عن انتهاكات Content-Security-Policy من خلال التوجيه report-uri فقط، راجِع خطوات نقل البيانات لإعداد تقارير سياسة أمان المحتوى (CSP).

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"
Report-To: ...

المفاتيح (أسماء نقاط النهاية)

يمكن أن يكون كل مفتاح اسمًا من اختيارك، مثل main-endpoint أو endpoint-1. يمكنك اختيار ضبط نقاط نهاية مُسمّاة مختلفة لأنواع تقارير مختلفة، مثل my-coop-endpoint وmy-csp-endpoint. باستخدام ذلك، يمكنك توجيه التقارير إلى نقاط نهاية مختلفة بناءً على نوعها.

إذا أردت تلقّي تقارير التدخل و/أو الإيقاف و/أو الأعطال، اضبط نقطة نهاية باسم default.

إذا لم يحدِّد عنوان Reporting-Endpoints نقطة نهاية default، لن يتم إرسال تقارير من هذا النوع (ولكن سيتم إنشاؤها).

القيم (عناوين URL)

كلّ قيمة هي عنوان URL من اختيارك، حيث سيتم إرسال التقارير إليه. يعتمد عنوان URL الذي يجب تعيينه هنا على ما حددته في الخطوة 1.

عنوان URL لنقطة النهاية:

أمثلة

Reporting-Endpoints: my-coop-endpoint="https://reports.example/coop", my-csp-endpoint="https://reports.example/csp", default="https://reports.example/default"

ويمكنك بعد ذلك استخدام كل نقطة نهاية مُسمّاة في السياسة المناسبة أو استخدام نقطة نهاية واحدة في جميع السياسات.

أين يمكن ضبط العنوان؟

في Reporting API الجديدة، وهي الواجهة التي يتم تناولها في هذه المشاركة، يتم تحديد نطاق التقارير على المستندات. وهذا يعني أنّه بالنسبة إلى مصدر واحد معيّن، يمكن للمستندات المختلفة، مثل site.example/page1 وsite.example/page2، إرسال التقارير إلى نقاط نهاية مختلفة.

لتلقّي تقرير عن الانتهاكات أو عمليات الإيقاف النهائي في أي صفحة من موقعك الإلكتروني، يمكنك ضبط العنوان على أنّه برمجية وسيطة في جميع الردود.

إليك مثال على النسخ الاحتياطي السريع:

const REPORTING_ENDPOINT_BASE = 'https://report.example';
const REPORTING_ENDPOINT_MAIN = `${REPORTING_ENDPOINT_BASE}/main`;
const REPORTING_ENDPOINT_DEFAULT = `${REPORTING_ENDPOINT_BASE}/default`;

app.use(function (request, response, next) {
  // Set up the Reporting API
  response.set(
    'Reporting-Endpoints',
    `main-endpoint="${REPORTING_ENDPOINT_MAIN}", default="${REPORTING_ENDPOINT_DEFAULT}"`,
  );
  next();
});

تعديل سياساتك

الآن وبعد إعداد عنوان Reporting-Endpoints، أضِف التوجيه report-to إلى كل عنوان سياسة تريد تلقّي تقارير المخالفات له. يجب أن تكون قيمة report-to إحدى نقاط النهاية المُسمّاة التي أعددتها.

يمكنك استخدام نقاط النهاية المتعددة لسياسات متعددة أو استخدام نقاط نهاية مختلفة في السياسات.

بالنسبة إلى كل سياسة، يجب أن تكون قيمة report-to إحدى نقاط النهاية المُسمّاة التي أعددتها.

لا حاجة إلى استخدام علامة report-to في تقارير الإيقاف النهائي والتدخل والأعطال. ولا تكون هذه التقارير مرتبطة بأي سياسة. يتم إنشاء نقاط النهاية ما دام تم إعداد نقطة نهاية default ويتم إرسالها إلى نقطة نهاية default هذه.

مثال

# Content-Security-Policy violations and Document-Policy violations
# will be sent to main-endpoint
Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0;report-to=main-endpoint;
# Deprecation reports don't need an explicit endpoint because
# these reports are always sent to the default endpoint

مثال على الرمز

للاطلاع على كل هذا في السياق، يوجد أدناه مثال على خادم عقدة يستخدم Express، ويجمع كل القطع التي تمت مناقشتها في هذه المقالة. يعرض التقرير كيفية ضبط التقارير للعديد من أنواع التقارير المختلفة وعرض النتائج.

تصحيح أخطاء إعداد التقارير

إنشاء التقارير عمدًا

عند إعداد واجهة Reporting API، عليك على الأرجح انتهاك سياساتنا عن قصد للتحقّق ممّا إذا تم إنشاء التقارير وإرسالها على النحو المتوقّع. للاطّلاع على نموذج لرمز برمجي ينتهك السياسات وينفّذ إجراءات ضارة أخرى قد تؤدي إلى إنشاء تقارير من جميع الأنواع، يُرجى مراجعة العرض التوضيحي.

توفير الوقت

قد يتأخر إرسال التقارير حوالي دقيقة واحدة، وهي فترة طويلة عند تصحيح الأخطاء. \t لحسن الحظ، عند تصحيح الأخطاء في Chrome، يمكنك استخدام العلامة --short-reporting-delayلتلقّي التقارير فور إنشائها.

شغِّل الأمر التالي في الوحدة الطرفية لتفعيل هذه العلامة:

YOUR_PATH/TO/EXECUTABLE/Chrome --short-reporting-delay

استخدام "أدوات مطوري البرامج"

في Chrome، استخدِم "أدوات مطوري البرامج" للاطّلاع على التقارير التي تم إرسالها أو التي سيتم إرسالها.

اعتبارًا من تشرين الأول (أكتوبر) 2021، أصبحت هذه الميزة تجريبية. ولاستخدامه، اتّبِع الخطوات التالية:

  1. استخدام الإصدار 96 من Chrome أو إصدار أحدث (تحقَّق من خلال كتابة chrome://version في المتصفّح)
  2. اكتب chrome://flags/#enable-experimental-web-platform-features أو الصقه في شريط عناوين URL في Chrome.
  3. انقر على مُفعَّلة.
  4. إعادة تشغيل المتصفّح
  5. افتح "أدوات مطوري البرامج في Chrome".
  6. في "أدوات مطوري البرامج في Chrome"، افتح "الإعدادات". ضمن "التجارب"، انقر على تفعيل لوحة Reporting API في لوحة التطبيق.
  7. أعِد تحميل "أدوات مطوري البرامج".
  8. إعادة تحميل الصفحة سيتم إدراج التقارير التي أنشأتها الصفحة "أدوات مطوري البرامج" التي تم فتحها في لوحة التطبيق ضمن "أدوات مطوري البرامج في Chrome" ضمن Reporting API.
لقطة شاشة تُظهر التقارير في &quot;أدوات مطوري البرامج&quot;
تعرض "أدوات مطوري البرامج في Chrome" التقارير التي تم إنشاؤها على صفحتك وحالتها.

حالة التقرير

يخبرك عمود الحالة ما إذا كان قد تم إرسال التقرير بنجاح.

الحالة الوصف
Success أرسل المتصفّح التقرير وردّت نقطة النهاية برمز نجاح (200 أو رمز استجابة آخر للنجاح 2xx).
Pending يحاول المتصفّح حاليًا إرسال التقرير.
Queued تم إنشاء التقرير ولا يحاول المتصفح إرساله في الوقت الحالي. يظهر التقرير على شكل Queued في إحدى الحالتين التاليتين:
  • التقرير جديد والمتصفّح في انتظار تلقّي المزيد من التقارير قبل محاولة إرساله.
  • التقرير ليس جديدًا، فالمتصفح قد حاول من قبل إرسال هذا التقرير ولم ينجح، وهو الآن في انتظار إعادة المحاولة.
MarkedForRemoval بعد إعادة المحاولة لفترة من الوقت (Queued)، توقّف المتصفّح عن محاولة إرسال التقرير وسيزيله قريبًا من قائمة التقارير المطلوب إرسالها.

تتم إزالة التقارير بعد فترة، سواء تم إرسالها بنجاح أم لا.

تحديد المشاكل وحلّها

هل لا يتم إنشاء التقارير أو لا يتم إرسالها على النحو المتوقع إلى نقطة النهاية؟ إليك بعض النصائح لتحديد هذه المشكلة وحلّها.

لا يتم إنشاء التقارير.

تم إنشاء التقارير التي تظهر في "أدوات مطوري البرامج" بشكلٍ صحيح. إذا لم يظهر التقرير الذي تتوقّعه في هذه القائمة:

  • اطّلِع على report-to في سياساتك. وإذا تم إعداد ذلك بشكل خاطئ، لن يتم إنشاء تقرير. يُرجى الانتقال إلى تعديل سياساتك لحلّ هذه المشكلة. تتوفّر طريقة إضافية لتحديد المشاكل وحلّها، وهي التحقّق من وحدة تحكُّم "أدوات مطوري البرامج" في Chrome: إذا ظهر خطأ في وحدة التحكّم لمعرفة الانتهاك الذي توقّعته، هذا يعني أنّه من المحتمل أن تكون سياستك قد تمّ ضبطها بشكل صحيح.
  • ملاحظة: لن تظهر في هذه القائمة سوى التقارير التي تم إنشاؤها للمستند المفتوح في "أدوات مطوري البرامج". مثال: إذا كان موقعك الإلكتروني site1.example يتضمّن إطار iframe site2.example يخالف إحدى السياسات، وبالتالي ينشئ تقريرًا، لن يظهر هذا التقرير في أدوات مطوّري البرامج إلا إذا فتحته في نافذته الخاصة به وفتحت "أدوات مطوري البرامج" لتلك النافذة.

يتم إنشاء التقارير ولكن لا يتم إرسالها أو عدم استلامها.

ماذا لو ظهر لك تقرير في "أدوات مطوري البرامج" ولكن لم تتلقَّه نقطة النهاية؟

  • احرص على استخدام حالات تأخير قصيرة. ربما يكون سبب عدم تمكّنك من رؤية التقرير هو عدم إرساله بعد!
  • تحقَّق من إعدادات عنوان Reporting-Endpoints. وفي حال وجود مشكلة بها، لن يتم إرسال التقرير الذي تم إنشاؤه بشكل صحيح. في "أدوات مطوري البرامج"، ستبقى حالة التقرير Queued (قد ينتقل إلى Pending، ثم يعود سريعًا إلى Queued عند إجراء محاولة تسليم) في هذه الحالة. في ما يلي بعض الأخطاء الشائعة التي قد تؤدي إلى حدوث ذلك:

  • يتم استخدام نقطة النهاية ولكن لم يتم إعدادها. مثال:

خطأ في التعليمات البرمجية
 Document-Policy: document-write=?0;report-to=endpoint-1;
 Reporting-Endpoints: default="https://reports.example/default"

يجب إرسال تقارير انتهاك سياسة المستندات إلى endpoint-1، ولكن لم يتم ضبط اسم نقطة النهاية هذا في Reporting-Endpoints.

  • نقطة النهاية default غير متوفّرة. بعض أنواع التقارير، مثل تقارير الإيقاف النهائي والتدخل، لن يتم إرسالها إلا إلى نقطة النهاية المسماة default. تعرَّف على مزيد من المعلومات في ضبط عنوان نقاط النهاية لإعداد التقارير.

  • ابحث عن المشاكل في بنية عناوين السياسات، مثل علامات الاقتباس المفقودة. الاطّلاع على التفاصيل

  • عليك التأكّد من أنّ نقطة النهاية يمكنها معالجة الطلبات الواردة.

    • يجب أن تكون نقطة النهاية متوافقة مع طلبات طلب CORS المبدئية. وإذا لم يكن متوفّرًا، لن يتلقّى التقارير.

    • اختبِر سلوك نقطة النهاية. لإجراء ذلك، بدلاً من إنشاء التقارير يدويًا، يمكنك محاكاة المتصفّح من خلال الإرسال إلى طلبات نقاط النهاية التي تبدو على النحو الذي سيرسله المتصفّح. نفِّذ ما يلي:

    curl --header "Content-Type: application/reports+json" \
      --request POST \
      --data '[{"age":420,"body":{"columnNumber":12,"disposition":"enforce","lineNumber":11,"message":"Document policy violation: document-write is not allowed in this document.","policyId":"document-write","sourceFile":"https://dummy.example/script.js"},"type":"document-policy-violation","url":"https://dummy.example/","user_agent":"xxx"},{"age":510,"body":{"blockedURL":"https://dummy.example/img.jpg","destination":"image","disposition":"enforce","type":"corp"},"type":"coep","url":"https://dummy.example/","user_agent":"xxx"}]' \
      YOUR_ENDPOINT
    

    يجب أن تستجيب نقطة النهاية برمز نجاح (200 أو رمز استجابة آخر للنجاح 2xx). وإذا لم يحدث ذلك، يعني ذلك أنّ هناك مشكلة في الإعدادات.

إعداد التقارير فقط

تعمل عناوين -Report-Only السياسة وReporting-Endpoints معًا.

سيتم إرسال تقارير عند انتهاك هذه السياسات لنقاط النهاية التي تم ضبطها في Reporting-Endpoints والمحددة في الحقل report-to في Content-Security-Policy وCross-Origin-Embedder-Policy وCross-Origin-Opener-Policy.

يمكن أيضًا تحديد نقاط النهاية التي تم ضبطها في Reporting-Endpoints في الحقل report-to في Content-Security-Policy-Report-Only وCross-Origin-Embedder-Policy-Report-Only وCross-Origin-Opener-Policy-Report-Only. وستصلك أيضًا تقارير عند انتهاك هذه السياسات.

يتم إرسال البلاغات في كلتا الحالتين، إلا أنّ عناوين -Report-Only لا تفرض السياسات: لن يتعطل أي شيء أو يتم حظره في الواقع، ولكن ستتلقّى تقارير عمّا كان يمكن أن يكون معطلاً أو محظورًا.

ReportingObserver

يمكن أن تساعدك واجهة برمجة تطبيقات JavaScript ReportingObserver في ملاحظة التحذيرات من جهة العميل.

إنّ العنوان ReportingObserver والعنوان Reporting-Endpoints ينشئان تقارير تبدو متشابهة، ولكنهما تتيحان حالات استخدام مختلفة قليلاً.

يمكنك استخدام ReportingObserver في الحالات التالية:

  • ما عليك سوى مراقبة عمليات الإيقاف النهائي و/أو تدخلات المتصفّح. يعرض ReportingObserver التحذيرات من جهة العميل، مثل عمليات الإيقاف النهائي وتدخّلات المتصفّح، ولكنّه على عكس Reporting-Endpoints، لا يعرض أي أنواع أخرى من التقارير، مثل انتهاكات سياسة أمان المحتوى (CSP) أو سياسة COOP/COEP.
  • عليك التفاعُل مع هذه الانتهاكات في الوقت الفعلي. تتيح ReportingObserver إرفاق معاودة الاتصال بحدث انتهاك.
  • تريد إرفاق معلومات إضافية بأحد التقارير للمساعدة في تصحيح الأخطاء، من خلال معاودة الاتصال المخصّصة.

الفرق الآخر هو أنّ ReportingObserver يتم ضبطه من جهة العميل فقط، حيث يمكنك استخدامه حتى إذا لم تكن لديك إمكانية التحكّم في العناوين من جهة الخادم ويتعذّر عليك ضبط Reporting-Endpoints.

محتوى إضافي للقراءة

صورة رئيسية من تصوير Nine Koepfer / @enka80 على Un إيقاف لأول مرة نتوجّه بالشكر إلى "إيان كليللاند" و"إيجي كيتامورا" و"ميليكا ميهاجليا" على مراجعاتهم واقتراحاتهم بشأن هذه المقالة.