ما هي عناوين URL للبيانات

عنوان URL للبيانات هو مخطط URI يوفر طريقة لتضمين البيانات في مستند ، ويتم استخدامه بشكل شائع لتضمين الصور في HTML و CSS

مقدمة

عنوان URL للبيانات هو مخطط URI يوفر طريقة لتضمين البيانات في مستند HTML.

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

<img src="image.png" />

أو يمكنك ترميزها بتنسيق خاص يسمى Data URL ، مما يجعل من الممكن تضمين الصورة مباشرة في مستند HTML ، بحيث لا يضطر المتصفح إلى تقديم طلب منفصل للحصول عليها.

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

أيضًا ، تكون الصورة المشفرة على أنها عنوان URL للبيانات أكبر قليلاً من نفس الصورة بتنسيق ثنائي.

إنها ليست عملية كثيرًا إذا تم تحرير صورك بشكل متكرر ، لأنه في كل مرة يتم فيها تغيير الصورة ، يجب ترميزها مرة أخرى.

ومع ذلك ، فإن لهم مكانهم على منصة الويب.

كيف يبدو عنوان URL للبيانات

عنوان URL للبيانات هو سلسلة تبدأ بـdata:متبوعًا بتنسيق نوع MIME. على سبيل المثال ، تحتوي صورة PNG على نوع mimeimage/png.

ويتبع ذلك بفاصلة ثم البيانات الفعلية.

يتم عادةً نقل النص بتنسيق نص عادي ، بينما يتم عادةً تشفير البيانات الثنائية باستخدام base64.

فيما يلي مثال على الشكل الذي سيبدو عليه عنوان URL للبيانات:

<img src="data:image/png,%89PNG%0D%0A..." />

وهذه نسخة صغيرة من صورة البانر لهذه المقالة مشفرة في رابط

إليك كيف يبدو عنوان URL للبيانات المشفرة باستخدام base64. لاحظ أنه يبدأ بـdata:image/png;base64:

<img src="data:image/png;base64,iVBORw0KGgoAA..." />

وهنا نسخة صغيرة من صورة لافتة لهذه المقالة base64 مشفرة في رابط.

يحتوي هذا الموقع على مولد عنوان URL للبيانات رائع جدًا:https://dopiaza.org/tools/datauri/index.phpوالتي يمكنك استخدامها لتحويل أي صورة موجودة على سطح المكتب إلى عنوان URL للبيانات.

يمكن استخدام عناوين URL للبيانات في أي مكان يمكن استخدام عنوان URL فيه ، كما رأيت أنه يمكنك استخدامه للروابط ، ولكن من الشائع أيضًا استخدامها في CSS:

.main {
    background-image url('data:image/png;base64,iVBORw0KGgoAA...');
}

دعم المتصفح

هم انهممدعوم في جميع المتصفحات الحديثة.

حماية

يمكن لعناوين URL للبيانات ترميز أي نوع من المعلومات ، وليس الصور فقط ، وبالتالي تأتي مع مجموعة من الآثار الأمنية الخاصة بها.

منويكيبيديا:

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

الشيكهذه المقالة من مدونة Mozilla Firefoxلمزيد من المعلومات حول كيفية استخدام عناوين URL للبيانات من قبل المستخدمين الضارين للقيام بأشياء سيئة ، وكيف يخفف متصفح Firefox من هذه المخاطر.

يتم تحديد عناوين URL للبيانات فيRFC 2397.


المزيد من دروس المتصفح: