Utilia

مولد تجزئة SRI

أنشئ تجزئات sha384 لسلامة الموارد الفرعية (SRI) لملف JavaScript أو CSS، وانسخ خاصيتي integrity وcrossorigin جاهزتين، محليًا في متصفحك.

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

حساب التجزئة لـ

يُحسب النص بترميز UTF-8. تحوّل المتصفحات نهايات الأسطر في Windows ‏(CRLF) إلى LF في النص الملصوق، وتغيير بايت واحد يُفسد التجزئة: افتح الملف نفسه عند الشك.

الخوارزميات

يُكتب الرابط في المقتطف فقط ولا يُطلب أبدًا. اتركه فارغًا لاستخدام اسم الملف.

كيف تنشئ تجزئة SRI؟

  1. تحت حساب التجزئة لـ اختر شيفرة ملصوقة أو ملفات.
  2. الصق المحتوى الدقيق للسكربت أو ورقة الأنماط في حقل محتوى السكربت أو ورقة الأنماط ثم اضغط إنشاء تجزئة SRI، أو أفلت ملفًا أو أكثر بامتداد .js و.css في منطقة الإفلات. تتحدّث التجزئات أثناء الكتابة.
  3. أبقِ SHA-384 (موصى به) مفعّلًا، أو أضف SHA-256 وSHA-512. كل خوارزمية مفعّلة تضيف رمزًا واحدًا إلى القيمة.
  4. اختر الوسم (تلقائي حسب اسم الملف، أو <script>، أو <script type="module">، أو <link rel="stylesheet">)، واكتب رابط المورد للمقتطف (اختياري)، واختر وضع crossorigin.
  5. انسخ قيمة integrity أو الوسم كاملًا.
  6. للتحقق من وسم تستخدمه فعلًا، الصق قيمته أو الوسم كله في حقل التحقق من قيمة integrity موجودة (اختياري).

ما الذي تفعله سلامة الموارد الفرعية؟

عندما تحمّل صفحةٌ سكربتًا من شبكة توصيل المحتوى (CDN)، يثق المتصفح بكل ما يعيده ذلك الخادم. فإذا اختُرقت الشبكة أو عُدّل الملف، تعمل الشيفرة المعدّلة بصلاحيات كاملة داخل صفحتك. تسدّ سلامة الموارد الفرعية (W3C SRI) هذه الثغرة: تنشر التجزئة المتوقعة للملف في الخاصية integrity، فيحسب المتصفح تجزئة ما ينزّله، ويرفض تشغيل السكربت أو تطبيق ورقة الأنماط إذا اختلفت القيمتان.

<script src="https://cdn.example.com/lib.min.js"
        integrity="sha384-H8BRh8j48O9oYatfu5AZzq6A9RINhZO5H16dQZngK7T62em8MUt1FLm52t+eX6xO"
        crossorigin="anonymous"></script>

تتكوّن القيمة من اسم الخوارزمية ثم شرطة ثم الملخص المرمَّز بـ Base64 لبايتات الملف. المثال أعلاه هو تجزئة alert('Hello, world.'); المأخوذة من مواصفة SRI. وعند إدراج عدة تجزئات، لا ينظر المتصفح إلا إلى أقوى خوارزمية موجودة، ويقبل الملف إذا طابقته أي تجزئة من تلك الخوارزمية. وبهذه الطريقة يمكن لموقع أن يدرج نسختين من ملف أثناء الانتقال بينهما.

لماذا تلزم الخاصية crossorigin؟

لا يستطيع المتصفح التحقق من سلامة ملف على أصل آخر إلا إذا جُلبت الاستجابة بوضع CORS، لذا يحتاج الوسم إلى الخاصية crossorigin، ويجب أن يجيب الخادم بالترويسة Access-Control-Allow-Origin. استخدم anonymous (دون ملفات تعريف الارتباط) لشبكات CDN العامة، أما use-credentials فللموارد الخاصة النادرة. ومن دون CORS يحظر المتصفح الملف بدلًا من تحميله دون تحقق.

لماذا لا تجلب هذه الأداة الروابط؟

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

الأسئلة الشائعة

أي خوارزمية أستخدم؟

SHA-384 هي الخيار المعتاد وهي ما تنشره معظم شبكات CDN. كما تدعم كل المتصفحات الحديثة SHA-256 وSHA-512. أما MD5 وSHA-1 فغير مسموح بهما في SRI.

التجزئة صحيحة لكن المتصفح ما زال يحظر الملف. لماذا؟

تأكّد من أن الخادم يرسل Access-Control-Allow-Origin وأن الوسم يحتوي على crossorigin. وتأكّد أيضًا من أن شبكة CDN تقدّم البايتات نفسها: فإصدار مختلف أو أداة تصغير تلقائية أو سطر أخير مفقود، كلها تغيّر التجزئة.

لماذا تعطي الشيفرة الملصوقة تجزئة مختلفة عن الملف؟

تحوّل المتصفحات نهايات الأسطر في Windows ‏(CRLF) إلى LF داخل حقول النص، وقد يضيف المحرر علامة ترتيب البايتات (BOM) أو سطرًا أخيرًا أو يحذفهما. افتح الملف نفسه لحساب تجزئة بايتاته الدقيقة.

هل أحتاج إلى SRI لملفات على نطاقي الخاص؟

تحمي SRI من التعديلات التي تحدث بعد حساب التجزئة، لذا تكون أهم ما تكون مع الاستضافات الخارجية. أما لملفاتك الخاصة فعادةً ما يكون استخدام أداة تجميع (bundler) تولّد التجزئات أثناء البناء أسهل.

هل تعمل SRI مع الصور أو الخطوط؟

الخاصية integrity مدعومة في <script> و<link rel="stylesheet"> (وفي <link rel="preload"> أو modulepreload لهذين النوعين). ولا يمكن استخدامها مع الصور والخطوط.