أدوات المطور · التشفير ووحدة فك التشفير Base64
شرح عناوين URI للبيانات: كيف تعمل data:image/png;base64 ومن أين أتت
· خلفية
base64 ترميز
البيانات: تم تحديد مخطط URL في 1998 كوسيلة لتضمين الموارد الصغيرة مباشرة في الصفحة. يشرح هذا المنشور قواعده النحوية، ولماذا يعد Base64 اختياريًا، وأين تضع المتصفحات حدودًا.
الرمز المفضل الذي كان عبارة عن حرف 1,300 URL - يلتقي بالبيانات: URI في البرية ويقرأ أجزائها
بيانات: URI تقوم بتضمين مورد صغير مباشرةً في URL، مع تجنب طلب HTTP المنفصل. تم تحديد التنسيق في RFC 2397 (تم تعريفه في 1998) ويستخدم قواعد نحوية مع مخطط ونوع وسائط اختياري وعلامة ترميز اختيارية والحمولة نفسها. على سبيل المثال، data:text/plain,hello عبارة عن بيانات نصية عادية URI تحتوي على الكلمة hello. يعالج المتصفح هذا بنفس الطريقة التي يعالج بها طلب HTTP، ولكن بدلاً من جلب المحتوى عبر الشبكة، يقوم بفك تشفيره من URL نفسه.
تعد عناوين URI للبيانات أكثر شيوعًا بالنسبة للصور الصغيرة وأيقونات CSS وتركيبات الاختبار. تبدو البيانات: URI بتشفير Base64 كما يلي: data:image/png;base64,iVBORw0K.... التقسيم هو: البيانات: هو المخطط؛ image/png هو نوع الوسائط؛ ;base64 هو علامة الترميز؛ السلسلة الطويلة هي بايت الصورة المشفرة بـ Base64. عندما يرى المتصفح هذا URL، فإنه يقوم بفك تشفير Base64 لاستعادة البايتات الأصلية، ثم يعرض الصورة باستخدام تلك البايتات.
قراءة البيانات URI من قواعدها النحوية المرئية - نوع الوسائط وعلامة Base64 الاختيارية والحمولة
إذا تم حذف علامة الترميز (data:text/html,<p>hello</p>)، فإن الحمولة تكون مشفرة بنسبة مئوية UTF-8 text، وليست base64. إن وجود ;base64 يخبر المتصفح بقاعدة فك التشفير التي يجب تطبيقها. نوع الوسائط في البيانات: URI هو نوع MIME، وهو نفس سلسلة النوع المستخدمة في HTTP رؤوس نوع المحتوى. تعتبر الصورة/png, text/plain, التطبيق/json والصورة/svg+xml من الأمثلة الشائعة. إذا لم يتم تحديد نوع الوسائط، فإن النوع الافتراضي هو text/plain;charset=US-ASCII.
يجب أن يحدد المتصفح كيفية عرض البايتات بناءً على نوع الوسائط: إذا كانت الصورة /png, فإن البايتات هي PNG؛ إذا كان النص /html, فإن المحتوى هو HTML. يمكن أن يؤدي تحديد نوع الوسائط الخاطئ إلى نتائج مربكة؛ سيتم عرض ملف PNG المسمى كنص /plain كأحرف غير صحيحة بدلاً من صورة. Base64 اختياري في البيانات: URI. بالنسبة لمحتوى النص، غالبًا ما يكون التشفير المئوي (نفس التشفير المستخدم في سلاسل الاستعلام URL) أكثر إحكاما من base64. يقرر مستهلك البيانات URI كيفية تفسير الحمولة من نوع الوسائط والعلامة قبل الفاصلة. يوفر برنامج التشفير Base64 أحرف الحمولة فقط. لا يضيف نوع MIME، اختر ما إذا كانت البايتات تصف PNG أو SVG، أو التحقق من صحة العنوان المجمع.
لماذا يعتبر Base64 اختياريًا - الحمولات النصية المشفرة بنسبة مئوية لـ SVG والنص العادي مقابل Base64 للثنائي
تحتوي البيانات URI: text/html,<p>Hello</p> على HTML كأحرف حرفية (مع ترميز النسبة المئوية لأي أحرف خاصة مثل علامات الاقتباس أو الأقواس الزاوية). يعد Base64 مفيدًا للبيانات الثنائية التي لا يمكن تمثيلها كنص، وفي الحالات التي تحتوي فيها الحمولة على العديد من الأحرف الخاصة التي قد يؤدي ترميز النسبة المئوية إلى تضخمها. قد يكون ملف SVG صغير أو ملف نصي أصغر بنسبة مئوية؛ يجب أن يكون الملف الثنائي هو base64. يتطلب إنشاء البيانات: URI يدويًا معرفة نوع الوسائط والتشفير.
بالنسبة للأيقونة SVG، يمكنك استخدام data:image/svg+xml متبوعة إما بعلامة SVG المشفرة بنسبة مئوية أو البايتات المشفرة بbase64 وbase64. بالنسبة للتشفير بالنسبة المئوية، قم بتغليف SVG في البيانات: image/svg+xml, ثم قم بتشفير النسبة المئوية لأي أقواس زاوية وعلامات اقتباس وأحرف خاصة أخرى. والنتيجة طويلة ولكن يمكن قراءتها من قبل الإنسان. بالنسبة إلى base64، خذ SVG بايتات، وقم بتشفيرها إلى base64، وأنتج البيانات:image/svg+xml;base64, ثم قم بإلحاق سلسلة base64. عادة ما يكون Base64 أكثر إحكاما بالنسبة للثنائي، ولكن بالنسبة للنص SVG، قد يكون النموذج المرمز بالنسبة المئوية أقصر.
مثال عملي: إنشاء بيانات: URI لـ SVG صغيرة يدويًا - ترميز العلامات كنص وتجميع السلسلة
يمكن للمتصفحات والتطبيقات المستهلكة فرض حدود أو قيود سياسية على عناوين URI للبيانات، لكن هذا المستودع لا ينشئ سقفًا رقميًا محمولاً. يعتمد استخدام الذاكرة وسلوك المحلل اللغوي وسياسة الأمان أيضًا على مكان ظهور القيمة، لذا اختبر المتصفح الهدف الدقيق وسياق التضمين بدلاً من الاعتماد على الحد الذي يتم تذكره.
سيؤدي وجود صورة 5 MB مضمنة في كل ملف HTML إلى زيادة حجم الصفحة. تعتبر عناوين URI للبيانات هي الأفضل للموارد الصغيرة: CSS الرموز أو الصور الصغيرة أو بيانات الاختبار. بالنسبة للملفات الكبيرة، يكون الطلب الخارجي أسرع لأن المتصفح يمكنه تخزين الاستجابة مؤقتًا وإعادة استخدامها عبر صفحات متعددة؛ بيانات: URI يتم تضمينها في كل مرة يتم فيها تحميل الصفحة.
يجب التحقق من حدود المتصفح والأمان في التطبيق المستهلك بدلاً من افتراضها
العتبة الشائعة هي بضعة كيلو بايت؛ أدناه، البيانات: عناوين URI فعالة؛ وفوق ذلك، تكون الملفات الخارجية عادةً أسرع. سياسات الأمان والمتصفح تقيد البيانات: URI الاستخدام في سياقات معينة. غالبًا ما يتم حظر التنقل عالي المستوى (النقر فوق رابط يشير إلى البيانات: URI مع محتوى HTML) لمنع التصيد الاحتيالي. يمكن للبيانات: URI في سمة البرنامج النصي src تنفيذ JavaScript بشكل عشوائي، مما يؤدي إلى مخاطر أمنية.
تطبق المتصفحات قواعد سياسة أمان المحتوى (CSP) على البيانات: عناوين URI؛ قد يمنعهم CSP الصارم تمامًا. عادةً ما يُسمح بالبيانات: URI في img src أو iframe src، ولكن قد يتم تقييد تضمينها في نمط أو سياق البرنامج النصي. تحقق دائمًا من توافق المتصفح وسياسة الأمان الخاصة ببيئتك المستهدفة. تعتبر عناوين URI للبيانات في CSS شائعة بالنسبة لصور الخلفية الصغيرة. بناء الجملة هو نفسه: url(data:image/png;base64,...).
حيث البيانات: لا تزال عناوين URI هي الأداة الصحيحة — CSS من الأيقونات والصور المضمنة الآمنة للبريد الإلكتروني وتركيبات الاختبار
ملف CSS يحتوي على بيانات مضمنة: يمكن شحن معرفات URI كملف واحد مع تضمين جميع الصور، مما يقلل HTTP من الطلبات. وهذا مفيد لمجموعات الرموز الصغيرة أو الرسومات البسيطة. الصور الكبيرة المضمنة في CSS تؤدي إلى تضخم الملف وإبطاء تحليله. يمكن لأدوات البناء الحديثة (مثل حزمة الويب) تحويل الصور الصغيرة تلقائيًا إلى بيانات: عناوين URI في CSS، والصور الخارجية إلى عناوين URL عادية، مما يؤدي إلى موازنة الأداء.
البيانات: يتم تعريف تنسيق URI بواسطة RFC 2397، وهو مستند قصير يحدد القواعد النحوية ولكنه لا يحدد أين يمكن أو لا يمكن استخدام معرفات URI للبيانات. أضاف بائعو المتصفح قيودهم الخاصة بناءً على مخاوف تتعلق بالأمان والأداء.
ما لا يغطيه هذا هو blob: عناوين URL وعناوين URL للكائنات والوصول إلى نظام الملفات
لقد أوقفت بعض الأنظمة البيانات: URI الدعم في سياقات معينة (مثل إجراء النموذج في مستوى CSP 3) لمنع إساءة الاستخدام. عند استخدام البيانات: URI، اختبرها في متصفحك المستهدف؛ يشير RFC إلى أن التنسيق صالح، ولكن سياسة أمان المتصفح قد تمنعه.
إنشاء البيانات: URI يدويًا أمر غير شائع في الإنتاج؛ تتعامل معظم أدوات البناء والمكتبات مع التحويل. لكن فهم التنسيق مفيد لتصحيح الأخطاء. إذا رأيت بيانات طويلة: image/... URL في CSS أو HTML، فيمكنك فك تشفيرها باستخدام أداة التشفير وفك التشفير Base64: قم بإزالة البيانات: image/...;base64, البادئة، والصق السلسلة المتبقية في الأداة، وقم بفك تشفيرها لرؤية البايتات الفعلية.
الوجبات الجاهزة: تنسيق صغير بقواعد نحوية صارمة - كيف يتعامل برنامج التشفير ووحدة فك التشفير Base64 مع خطوة ترميز النص حتى تتمكن من تجميع URI صالح
بالنسبة إلى بيانات SVG: عناوين URI، يمكنك فك ترميز النموذج النصي بنسبة مئوية وقراءة ترميز XML. فهم تشريح البيانات: URI يجعل من السهل استكشاف أخطاء الموارد المضمنة وإصلاحها. معرفات URI للبيانات هي معيار ويب (RFC 2397) يسمح بتضمين الموارد مباشرة كعناوين URL. وهي أكثر كفاءة بالنسبة للموارد الصغيرة والمستقرة التي لا تستفيد من التخزين المؤقت المنفصل. يتضمن التنسيق مواصفات اختيارية لنوع الوسائط وعلامة ترميز (base64 أو ترميز النسبة المئوية الضمنية).
تشفير Base64 مطلوب للبيانات الثنائية ولكنه اختياري للنص؛ يمكن أن يكون SVG المشفر بنسبة مئوية أكثر قابلية للقراءة. تحدد سياسات أمان المتصفح مكان البيانات: يمكن استخدام معرفات URI، لذلك يعد فهم القيود في البيئة المستهدفة أمرًا ضروريًا. يمكن أن تساعدك أداة التشفير وفك التشفير Base64 في تشفير المورد يدويًا أو فك تشفير URI المضمن لفحص محتواه.