Sweetalert: توافق نهج أمان المحتوى

تحتاج إلى تحديث قيمة Content-Security-Policy لاستيعاب التوجيه style-src الذي يجب أن يحتوي على "nonafe-inline" (مع الحرص على الاقتباس) لتنفيذ الأنماط المضمنة التي تم إدخالها.

بالتأكيد ليس من المثالي إجبار المطورين على استخدام سياسة unsafe-inline لـ CSS. ربما يجب أن نجد طريقة أفضل للتعامل مع هذا.

تتمثل إحدى الطرق في عدم استيراد ملف css داخل التعليمات البرمجية الخاصة بك وإتاحته كملف منفصل يمكن استيراده داخل كود المطور. شيء مثل
import 'sweetalert/sweetalert.css
بهذه الطريقة سيكون من مسؤولية المطور التأكد من أنه لا ينتهك CSP

لا علاقة له (تقريبًا) بمكان وجود ملف CSS (طالما أن CSS موجود في نفس المجال). Sweetalert _injects_ CSS مضمنة ، والتي لن تسمح بها أي CSP تستحق امتلاكها ما لم تكن هناك قيمة nonce / hash. إنه يسبب لي الألم الذي لا نهاية له هذا الصباح ؛ قد أضطر إلى إزالته من مشروعي ، وهذا عار ، لأنني أحب ذلك حقًا (د).

هل كان هناك أي تحديثات على هذا؟ أواجه نفس المشكلة؛ فقط أتساءل ما هي أفضل طريقة للالتفاف حول هذا؟

الحل هو إضافة التجزئة إلى رأس Content-Security-Policy الخاص بك.

شيء مثل

style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-wTr/bct+DGhJCU0mVZOm9Z1v99oBZrIu4VCMYQJWdfI=';

ليست مثالية ولكنها أفضل من unsafe-inline . المشكلة هي أنه إذا تغيرت الملفات ، فلن تتطابق التجزئات بعد الآن وسيرفضها المتصفح.

سيكون الوضع المثالي هو استخراج css إلى ملفه الخاص واستضافته على CDN. بهذه الطريقة يمكننا إدراج الملف في القائمة البيضاء.

لا علاقة له (تقريبًا) بمكان وجود ملف CSS (طالما أن CSS موجود في نفس المجال). Sweetalert _injects_ CSS مضمنة ، والتي لن تسمح بها أي CSP تستحق امتلاكها ما لم تكن هناك قيمة nonce / hash. إنه يسبب لي الألم الذي لا نهاية له هذا الصباح ؛ قد أضطر إلى إزالته من مشروعي ، وهذا عار ، لأنني أحب ذلك حقًا (د).

كذلك هنا.

يمكنني الحصول على اثنين من تجزئات الأنماط المضمنة من sweetalert.min.js في Chrome. عند إضافته إلى رأس CSP ، لم يعد Chrome يشكو.
لكن لا يزال Firefox و Safari يشكوان ، ولا يمكنني العثور على التجزئة المناسبة. لا تقدم هذه المتصفحات أي تلميحات.
Firefox: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“style-src”)
سفاري: Refused to apply a stylesheet because its hash, its nonce, or 'unsafe-inline' does not appear in the style-src directive of the Content Security Policy.