تنفيذ تصحيح أخطاء سياسة أمان المحتوى (CSP) والأنواع الموثوق بها في "أدوات مطوري البرامج في Chrome"

Kateryna Prokopenko

Alfonso Castaño

ملاحظة: هل يهمّك المساعدة في تحسين "أدوات مطوري البرامج"؟ اشترِك للمشاركة في برنامج البحث في سلوكيات المستخدمين من Google هنا.

تتناول مشاركة المدوّنة هذه كيفية استخدام أدوات مطوّري البرامج لتصحيح الأخطاء المتعلقة بسياسة أمان المحتوى (CSP) بمساعدة علامة التبويب المشاكل التي ظهرت مؤخرًا.

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

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

تسمح سياسة أمان المحتوى (CSP) بتقييد سلوكيات معيّنة في الموقع الإلكتروني لزيادة الأمان. على سبيل المثال، يمكن استخدام سياسة CSP لمنع النصوص البرمجية المضمّنة أو لمنع eval، وكلاهما يقلل من الأجزاء المعرضة للهجوم من أجل هجمات البرمجة النصية على المواقع الإلكترونية (XSS). للحصول على مقدمة مفصّلة عن سياسة أمان المحتوى (CSP)، اقرأ هنا.

هناك سياسة CSP جديدة تحديدًا هي سياسة الأنواع الموثوق بها(TT)، التي تمكِّن التحليل الديناميكي الذي يمكن أن يمنع بشكل منهجي فئة كبيرة من هجمات الحقن على المواقع الإلكترونية. لتحقيق ذلك، يدعم TT الموقع الإلكتروني في مراقبة رمز JavaScript للسماح فقط بتعيين أنواع معينة من الأشياء إلى أحواض DOM مثل innerHTML.

يمكن للموقع الإلكتروني تفعيل سياسة أمان المحتوى عن طريق تضمين عنوان HTTP محدّد. على سبيل المثال، يفعّل العنوان content-security-policy: require-trusted-types-for 'script'; trusted-types default سياسة "TT" لإحدى الصفحات.

يمكن أن تعمل كل سياسة بأحد الأوضاع التالية:

• الوضع الإلزامي: حيث يؤدي كل انتهاك للسياسة إلى حدوث خطأ
• وضع إعداد التقارير فقط - الذي يُبلغ عن رسالة الخطأ كتحذير، ولكنه لا يتسبب في حدوث إخفاق في صفحة الويب.

معالجة المشاكل المتعلّقة بسياسة أمان المحتوى في علامة التبويب المشاكل

كان الهدف من هذا العمل هو تحسين تجربة تصحيح الأخطاء لمشاكل CSP. عند النظر في المشاكل الجديدة، يتّبع فريق "أدوات مطوري البرامج" هذه العملية تقريبًا:

1. تعريف قصص المستخدم. حدد مجموعة من قصص المستخدمين في الواجهة الأمامية في "أدوات مطوري البرامج" والتي تتناول كيف يحتاج مطور الويب إلى التحقيق في المشكلة.
2. تنفيذ الواجهة الأمامية: استنادًا إلى قصص المستخدمين، حدد المعلومات المطلوبة للتحقيق في المشكلة في الواجهة الأمامية (على سبيل المثال، طلب ذي صلة، أو اسم ملف تعريف ارتباط، أو سطر في نص برمجي أو ملف html، وما إلى ذلك).
3. اكتشاف المشاكل: حدِّد الأماكن في المتصفح التي يمكن اكتشاف المشكلة فيها في Chrome وحدِّد المكان المناسب للإبلاغ عن المشكلة بما في ذلك المعلومات ذات الصلة من الخطوة (2).
4. حفظ المشاكل وعرضها: تخزين المشاكل في مكان مناسب وإتاحتها لأدوات مطوّري البرامج بعد فتحها
5. تصميم نص المشاكل: التوصل إلى نص توضيحي يساعد مطوّري برامج الويب على فهم المشكلة، والأهم من ذلك، حل المشكلة

الخطوة 1: تحديد قصص المستخدمين لمشاكل CSP

قبل أن نبدأ العمل، أنشأنا مستند تصميم يتضمن قصص المستخدمين لفهم ما كان علينا القيام به بشكل أفضل. على سبيل المثال، قمنا بتدوين قصة المستخدم التالية:

---

بصفتي مطوّر تطبيقات أدرك أنّ جزءًا من موقعي الإلكتروني محظور، أريد:- - ...معرفة ما إذا كانت سياسة أمان المحتوى (CSP) سببًا لحظر إطارات iframe / الصور في موقعي الإلكتروني. - ...التعرّف على توجيه سياسة CSP الذي يتسبب في حظر مورد معيّن - ...معرفة كيفية تغيير سياسة CSP في موقعي الإلكتروني للسماح بعرض الموارد المحظورة حاليًا / تنفيذ رموز js المحظورة حاليًا.

---

لاستكشاف قصة المستخدم هذه، أنشأنا بعض الأمثلة البسيطة لصفحات الويب التي أظهرت انتهاكات سياسة CSP التي كنا مهتمين بها، واستكشفنا نماذج الصفحات للتعرف على العملية بأنفسنا. في ما يلي بعض نماذج صفحات الويب (افتح العرض التوضيحي مع فتح علامة التبويب المشاكل):

• مشاكل سياسة أمان المحتوى (CSP)
• انتهاكات "الأنواع الموثوق بها"
• انتهاكات الأنواع الموثوق بها - وضع "إعداد التقارير فقط"

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

الخطوة 2: تنفيذ الواجهة الأمامية

حوّلنا هذه الإحصاءات إلى المسودة الأولى للمعلومات التي أردنا إتاحتها لأدوات مطوّري البرامج من خلال بروتوكول أدوات مطوّري البرامج في Chrome (CDP):

يتوفّر أدناه المقتطف من third_party/blink/public/devtools_protocol/browser_protocol.pdl

 type ContentSecurityPolicyIssueDetails extends object
   properties
     # The url not included in allowed sources.
     optional string blockedURL
     # Specific directive that is violated, causing the CSP issue.
     string violatedDirective
     boolean isReportOnly
     ContentSecurityPolicyViolationType contentSecurityPolicyViolationType
     optional AffectedFrame frameAncestor
     optional SourceCodeLocation sourceCodeLocation
     optional DOM.BackendNodeId violatingNodeId

يعمل التعريف أعلاه على ترميز بنية بيانات JSON بشكل أساسي. وهو مكتوب بلغة بسيطة تسمى PDL (لغة بيانات البروتوكول). يتم استخدام PDL لغرضين. أولاً، نستخدم PDL لإنشاء تعريفات TypeScript التي تعتمد عليها الواجهة الأمامية في أدوات مطوّري البرامج. على سبيل المثال، يُنشئ تعريف PDL أعلاه واجهة TypeScript التالية:

export interface ContentSecurityPolicyIssueDetails {
  /**
  * The url not included in allowed sources.
  */
  blockedURL?: string;
  /**
  * Specific directive that is violated, causing the CSP issue.
  */
  violatedDirective: string;
  isReportOnly: boolean;
  contentSecurityPolicyViolationType: ContentSecurityPolicyViolationType;
  frameAncestor?: AffectedFrame;
  sourceCodeLocation?: SourceCodeLocation;
  violatingNodeId?: DOM.BackendNodeId;
}

ثانيًا، وربما الأهم من ذلك، ننشئ مكتبة C++ من التعريف الذي يعالج إنشاء وإرسال هياكل البيانات هذه من الواجهة الخلفية لـ C++ Chromium إلى الواجهة الأمامية لـ DevTools. باستخدام هذه المكتبة، يمكن إنشاء كائن ContentSecurityPolicyIssueDetails باستخدام الجزء التالي من رمز C++:

protocol::Audits::ContentSecurityPolicyIssueDetails::create()
  .setViolatedDirective(d->violated_directive)
  .setIsReportOnly(d->is_report_only)
  .setContentSecurityPolicyViolationType(BuildViolationType(
      d->content_security_policy_violation_type)))
  .build();

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

الخطوة 3: رصد المشكلة

لإتاحة المعلومات لبروتوكول أدوات مطوّري البرامج في Chrome (CDP) بالتنسيق الموضح في القسم الأخير، احتجنا إلى إيجاد الموضع الذي كانت المعلومات متوفرة فيه فعليًا في الخلفية. لحسن الحظ، يحتوي رمز CSP على عنصر جانبي يُستخدَم في وضع إعداد التقارير فقط، حيث يمكننا الوصول إلى: ContentSecurityPolicy::ReportViolation تُبلِغ عن المشاكل في نقطة نهاية إعداد تقارير (اختيارية) يمكن ضبطها في عنوان HTTP الذي يتضمّن بروتوكول CSP. كانت معظم المعلومات التي أردنا الإبلاغ عنها متاحة بالفعل، لذلك لم تكن تغييرات كبيرة في الخلفية ضرورية لتعمل الأدوات.

الخطوة 4: حفظ المشاكل وعرضها

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

وبهذا اختتمنا العمل في الواجهة الخلفية، واحتجنا الآن إلى التركيز على كيفية إظهار المشكلة في الواجهة الأمامية.

الخطوة 5: تصميم نص المشكلات

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

يبدأ فريق أدوات مطوّري البرامج عادةً بمسودة تقريبية لما يتخيلونه:

## Header
Content Security Policy: include all sources of your resources in content security policy header to improve the functioning of your site

## General information
Even though some sources are included in the content security policy header, some resources accessed by your site like images, stylesheets or scripts originate from sources not included in content security policy directives.

Usage of content from not included sources is restricted to strengthen the security of your entire site.

## Specific information

### VIOLATED DIRECTIVES
`img-src 'self'`

### BLOCKED URLs
https://imgur.com/JuXCo1p.jpg

## Specific information
https://web.dev/strict-csp/

بعد التكرار، وصلنا إلى:

كما ترى، فإن إشراك فريق الميزات وDevRel يجعل الوصف أكثر وضوحًا ودقة!

يمكن أيضًا اكتشاف مشاكل سياسة CSP على صفحتك في علامة التبويب المخصّصة تحديدًا لانتهاكات سياسة CSP.

تصحيح أخطاء الأنواع الموثوق بها

قد يمثّل العمل باستخدام تقنية "تحويل النص إلى كلام" على نطاق واسع تحديًا بدون استخدام أدوات المطوّرين المناسبة.

طباعة محسَّنة لوحدة التحكّم

عندما نعمل مع كائنات موثوق بها، نود أن نعرض على الأقل المقدار نفسه من المعلومات للكائنات المشابهة غير الموثوق بها. للأسف، عند عرض كائن موثوق به في الوقت الحالي، لا يتم عرض أي معلومات عن الكائن الذي تم لفّه.

ويرجع ذلك إلى أنّ القيمة المعروضة في وحدة التحكّم يتم أخذها من استدعاء .valueOf() على الكائن تلقائيًا. ومع ذلك، في حالة النوع الموثوق، لا تكون القيمة التي يتم عرضها مفيدة للغاية. بدلاً من ذلك، نريد الحصول على اشتراك مشابه لما تحصل عليه عند الاتصال بـ .toString(). ولتنفيذ ذلك، نحتاج إلى تعديل V8 وBlink لتوفير معالجة خاصة للكائنات الموثوق بها.

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

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

• يمكن لكل أداة تضمين إنشاء وصف خاص بها
• إنشاء الوصف من خلال Blink API أسهل بكثير
• وبإمكان Blink الوصول إلى التعريف الأصلي للكائن. وبالتالي، إذا استخدمنا .toString() لإنشاء الوصف، لن يكون هناك احتمال بإعادة تعريف .toString().

كسر الانتهاكات (في وضع إعداد التقارير فقط)

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

تدعم أدوات مطوّري البرامج بالفعل مجموعة متنوعة من نقاط التوقف، لذا فإن البنية قابلة للتوسيع تمامًا. تتطلب إضافة نوع نقطة توقف جديد إجراء تغييرات في الخلفية (Blink) وCDP والواجهة الأمامية. علينا إدخال أمر CDP جديد، ولنسمّيه setBreakOnTTViolation. ستستخدم الواجهة الأمامية هذا الأمر لإبلاغ الواجهة الخلفية بنوع مخالفات TT التي يجب أن تتعطل فيها. ستوفّر الخلفية، على وجه الخصوص InspectorDOMDebuggerAgent، "محقّقًا"، onTTViolation() سيتم طلبه في كل مرة يحدث فيها انتهاك للسياسات. بعد ذلك، سيتحقّق InspectorDOMDebuggerAgent مما إذا كان يجب أن يؤدي هذا الانتهاك إلى تفعيل نقطة إيقاف، وفي هذه الحالة، سيتم إرسال رسالة إلى الواجهة الأمامية لإيقاف التنفيذ مؤقتًا.

ما الذي تم إنجازه والخطوة التالية؟

بعد طرح المشاكل الموضّحة هنا، طرأت بعض التغييرات على علامة التبويب المشاكل:

• تم تحسين صلتها باللوحات الأخرى في "أدوات مطوّري البرامج".
• تم نقل عملية الإبلاغ عن عدد من المشاكل الأخرى إلى علامة التبويب المشاكل: مستوى التباين والنشاط على الويب الموثوق به ووضع Quirks وAttribution Reporting API والمشاكل المتعلقة بسياسة CORS وغير ذلك.
• تم توفير فرصة لإخفاء المشاكل.

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

تنزيل قنوات المعاينة

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

التواصل مع فريق "أدوات مطوري البرامج في Chrome"

يُرجى استخدام الخيارات التالية لمناقشة الميزات والتغييرات الجديدة في المشاركة أو أي موضوع آخر ذي صلة بـ "أدوات مطوري البرامج".

• يمكنك إرسال اقتراحات أو ملاحظات إلينا عبر crbug.com.
• يمكنك الإبلاغ عن مشكلة في "أدوات مطوري البرامج" باستخدام خيارات إضافية   > مساعدة > الإبلاغ عن مشاكل في "أدوات مطوري البرامج" في "أدوات مطوري البرامج".
• يمكنك نشر تغريدة على @ChromeDevTool.
• يمكنك إضافة تعليقات على الميزات الجديدة في فيديوهات YouTube أو نصائح حول أدوات مطوّري البرامج في فيديوهات YouTube حول الميزات الجديدة.