مخطط بيانات URI

📅 آخر تحديث: ٢١ يوليو ٢٠٢٦
✍️ نُشر في: ٢١ يوليو ٢٠٢٦
📷 يحتوي على 3 صور
الموسوعة الحرة

نظام معرّف الموارد الموحد للبيانات ( Data URI ) هو نظام معرّف موارد موحد (URI) يتيح تضمين البيانات مباشرةً في صفحات الويب كما لو كانت موارد خارجية. وهو شكل من أشكال تعريف الملفات أو المستندات المضمنة . تسمح هذه التقنية بجلب عناصر منفصلة عادةً، مثل الصور وأوراق الأنماط، في طلب واحد عبر بروتوكول نقل النص التشعبي (HTTP) ، مما قد يكون أكثر كفاءة من طلبات HTTP المتعددة، [ 1 ] وتستخدمها العديد من إضافات المتصفح لتجميع الصور ومحتوى الوسائط المتعددة الأخرى في ملف HTML واحد لحفظ الصفحة. [ 2 ] [ 3 ] اعتبارًا من عام 2024[ 4 ] يتم دعم عناوين URI للبيانات بشكل كامل من قبل جميع المتصفحات الرئيسية.

بناء الجملة

تم تعريف بنية معرّفات الموارد الموحدة (URIs) للبيانات في طلب التعليقات (RFC) 2397، المنشور في أغسطس 1998، [ 5 ] وتتبع بنية مخطط معرّفات الموارد الموحدة . يتكون معرّف الموارد الموحدة النموذجي للبيانات (على سبيل المثال data:content/type;base64,) مما يلي:

  • المخطط ، . dataويتبعه نقطتان رأسيتان ( :).
  • نوع وسائط اختياري . قد يتضمن جزء نوع الوسائط مُعاملًا واحدًا أو أكثر، بالصيغة التالية attribute=value: ، مفصولة بفواصل منقوطة ( ;). أحد مُعاملات نوع الوسائط الشائعة هو charset، الذي يُحدد مجموعة الأحرف لنوع الوسائط، حيث تكون القيمة من قائمة أسماء مجموعات الأحرف الصادرة عن هيئة IANA . [ 6 ] إذا لم يتم تحديد نوع وسائط، يُفترض أن يكون نوع وسائط معرّف الموارد الموحد للبيانات هو text/plain;charset=US-ASCII.
  • امتداد Base64 اختياري base64، مفصول عن الجزء السابق بفاصلة منقوطة. يشير وجوده إلى أن محتوى بيانات URI هو بيانات ثنائية ، مُشفّرة بتنسيق ASCII باستخدام خوارزمية Base64 لتحويل البيانات الثنائية إلى نص . يتميز امتداد Base64 عن أي معلمات لأنواع الوسائط بعدم احتوائه على أي =valueمكون، وبوقوعه بعد أي معلمات لأنواع الوسائط. نظرًا لأن حجم البيانات المُشفّرة بـ Base64 أكبر بنسبة 33% تقريبًا من حجم البيانات الأصلية، يُنصح باستخدام معرّفات URI لبيانات Base64 فقط إذا كان الخادم يدعم ضغط HTTP أو إذا كانت الملفات المُضمّنة أصغر من 1 كيلوبايت.
  • البيانات ، مفصولة عن الجزء السابق بفاصلة ( ). البيانات عبارة عن سلسلة من صفر أو أكثر من البايتات ممثلة بأحرف. الفاصلة مطلوبة في معرّف الموارد الموحد (URI ) للبيانات، حتى عندما يكون طول جزء البيانات صفرًا. تشمل الأحرف المسموح بها في جزء البيانات أحرف ASCII الكبيرة والصغيرة، والأرقام، والعديد من علامات الترقيم والأحرف الخاصة ASCII. لاحظ أن هذا قد يشمل أحرفًا، مثل النقطتين، والفاصلة المنقوطة، والفاصلة، وهي فواصل في مكونات معرّف الموارد الموحد (URI) التي تسبق جزء البيانات. يجب ترميز البايتات الأخرى بنسبة مئوية . إذا كانت البيانات مُرمّزة بنظام Base64، فيجب أن يحتوي جزء البيانات على أحرف Base64 صالحة فقط. [ 7 ] لاحظ أن معرّفات الموارد الموحدة (URI) المُرمّزة بنظام Base64 تستخدم مجموعة أحرف Base64 القياسية (مع ' ' و' ' كحرفين 62 و63) بدلاً من مجموعة أحرف " Base64 الآمنة لعناوين URL ".,data:+/

أمثلة على عناوين URI للبيانات التي تُظهر معظم الميزات هي:

  • data:text/vnd-example+xyz;foo=bar;base64,R0lGODdh
  • data:text/plain;charset=UTF-8;page=21,the%20data:1234,5678(المخرجات: "البيانات: 1234,5678")
  • data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD
  • data:image/svg+xml,<svg width="10"... </svg>

الحد الأدنى من بيانات URI هو data:,، ويتكون من المخطط، ولا يوجد نوع وسائط، وبيانات طولها صفر.

وبالتالي، ضمن بنية URI العامة، يتكون معرّف بيانات URI من مخطط ومسار ، دون أي جزء خاص بالسلطة أو سلسلة استعلام أو جزء مُجزأ . ويُعدّ كل من نوع الوسائط الاختياري ، ومؤشر base64 الاختياري ، والبيانات نفسها، أجزاءً من مسار URI .

أمثلة على الاستخدام

HTML

جزء من كود HTML يتضمن صورة PNG مشفرة بنظام base64 لنقطة حمراء صغيرة ( ):النقطة

< img alt = "Red dot" src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAAABJRU5ErkJggg== width = "5" height = "5" >

في هذا المثال، تم تقسيم الأسطر لأغراض التنسيق. في عناوين URI الفعلية، بما في ذلك عناوين URI للبيانات، تُعتبر أحرف التحكم (ASCII من 0 إلى 31، و127) والمسافات (ASCII 32) "أحرفًا مستبعدة". هذا يعني أن أحرف المسافات البيضاء غير مسموح بها في عناوين URI للبيانات. مع ذلك، في سياق HTML 4 وHTML 5، يتم تجاهل فواصل الأسطر داخل قيمة سمة العنصر (مثل "src" أعلاه) . لذا، سيتم معالجة عنوان URI للبيانات أعلاه مع تجاهل فواصل الأسطر، مما يُعطي النتيجة الصحيحة. لكن تجدر الإشارة إلى أن هذه ميزة خاصة بـ HTML، وليست ميزة خاصة بعناوين URI للبيانات، وفي سياقات أخرى، لا يُمكن الاعتماد على تجاهل المسافات البيضاء داخل عنوان URI.

جزء من كود HTML يتضمن صورة SVG لنقطة حمراء أكبر ( النقطة):

< img alt = "Red dot" src = "data:image/svg+xml, <svg width='10' height='10' xmlns='http://www.w3.org/2000/svg'> <circle style='fill:red' cx='5' cy='5' r='5'/> </svg>" >

في هذا المثال، يجب استخدام علامة اقتباس مفردة في بيانات SVG حيث يتم استخدام علامة اقتباس مزدوجة لتغليف مصدر الصورة.

يمكن أيضًا إنشاء أيقونة الموقع (favicon) باستخدام بيانات SVG التي يجب أن تظهر في قسم "head" من ملف HTML:

< link rel = "icon" href = "data:image/svg+xml, <svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"> <circle style="fill:red" cx="5" cy="5" r="5"/> </svg>' >

CSS

قاعدة CSS تتضمن صورة خلفية:

ماي . قائمة المراجعة لي . كامل { الحشوة اليسرى : 20 بكسل ؛ الخلفية : عنوان URL باللون الأبيض ( 'data:image/png;base64,iVB\ORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAABlBMVEU\AAAD///+l2Z/dAAAAM 0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8\yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAEl\FTkSuQmCC' ) عدم تكرار التمرير إلى أعلى اليسار ; }

في هذا المثال، \ + <linefeed>تُعدّ فواصل الأسطر ميزةً من ميزات CSS، تُشير إلى استمرار النص في السطر التالي. سيقوم مُعالج أنماط CSS بإزالة هذه الفواصل، وسيُعاد تكوين مُعرّف البيانات (Data URI) بدون مسافات بيضاء، مما يجعله صحيحًا، حيث لا يُسمح بوجود مسافات بيضاء ضمن مُكوّن البيانات في مُعرّف البيانات (data: URI).

جافا سكريبت

عبارة جافا سكريبت تفتح نافذة فرعية مضمنة، كما هو الحال بالنسبة لرابط الحاشية السفلية:

window.open ( 'data:text/html;charset=utf-8,' + encodeURIComponent ( // Escape for URL formatting ' <!DOCTYPE html>' + '<html lang="en">' + ' <head><title>Embedded Window</title></head>' + '<body><h1>42</h1></body>' + '</html>' ) );

SVG

مثال على صورة SVG تحتوي على صور JPEG مضمنة

صورة رسومية متجهة قابلة للتوسيع تحتوي على صورة JPEG مضمنة مشفرة بنظام Base64:

<svg> <image width= "64" height= "24" href= "البيانات: صورة/jpeg؛base64،/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDADIiJSwlHZIsKSw4NTI7S31RS0VFS5lt c1p9tZ++u7Kfr6zI4f/zyNT/16yv+v/9////////////////2wBDATU4OEtCS5NRUZP/zq/O///////// /////////////////////////////////////////////wAARCAAYAEADAREAAhEBAxEB/8QAG QAAAgMBAAAAAAAAAAAAAAAQMAAgQF/8QAJRABAAIBBAEEAgMAAAAAAAAAQIRAAMSITEEEyJBgTORUWFx/8QAFA EBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AOgM52xQDrjvAV5Xv0vfKUALlTQfeBm0HThMNHXkL0Lw/swN5qgA8yT4MCS1OEOJV8mBz9Z05yfW8iSx7p4j+jA1aD6Wj7ZMzstsfvAas4U yRHvjrAkC9KhpLMClQntlqFc2X1gUj4viwVObKrddH9YDoHvuujAEuNV+bLwFS8XxdSr+Cq3Vf+4F5RgQl6ZR2p1e AzU/HX80YBYyJLCuexwJCO2O1bwCRidAfWBSctswbI12GAJT3yiwFR7+MBjGK2g/WAJR3FdF84E2rK5VR0YH/9k =" /> </svg>

البرامج الضارة والتصيد الاحتيالي

يمكن استخدام معرّف الموارد الموحد للبيانات (URI) لإنشاء صفحات هجومية تسعى للحصول على أسماء المستخدمين وكلمات المرور من مستخدمي الإنترنت غير المتوقعين. كما يمكن استخدامه للتحايل على قيود البرمجة النصية عبر المواقع (XSS)، وذلك بتضمين حمولة الهجوم بالكامل داخل شريط العنوان، واستضافتها عبر خدمات اختصار الروابط بدلاً من الحاجة إلى موقع ويب كامل تتحكم فيه جهة خارجية. [ 8 ] ونتيجةً لذلك، تحظر بعض المتصفحات الآن صفحات الويب من الوصول إلى معرّفات الموارد الموحدة للبيانات. [ 9 ]

مراجع

  1. ↑ "استخدام عناوين URI للبيانات لتسريع موقعك الإلكتروني" . مدونة تري هاوس. 27 مارس 2014.
  2. ↑ "SingleFile - متجر Chrome الإلكتروني" . متجر Chrome الإلكتروني . تم الاطلاع عليه بتاريخ 25 أغسطس 2018 .
  3. ↑ "SingleFile – إضافات لمتصفح فايرفوكس" . إضافات فايرفوكس . تم الاطلاع عليه بتاريخ 25 أغسطس 2018 .
  4. ↑ ديفيريا، أليكسيس (يوليو 2015). "هل يمكنني استخدام..." تم الاطلاع عليه بتاريخ 31 أغسطس 2015 .
  5. ↑ ماسينتر، ل. (أغسطس 1998). "RFC 2397 - مخطط عنوان URL "البيانات"" . فريق عمل هندسة الإنترنت . تم الاسترجاع في 12 أغسطس 2008 .
  6. ↑ فريد، نيد؛ دورست، مارتن، محرران. (20 ديسمبر 2013). "مجموعات الأحرف" . هيئة الأرقام المخصصة للإنترنت . تم الاسترجاع في 31 أغسطس 2015 .
  7. ↑ بيرنرز-لي، تيم ؛ فيلدينغ، روي ؛ ماسينتر، لاري (يناير 2005). "معرفات الموارد الموحدة (URI): بناء الجملة العام" . فريق عمل هندسة الإنترنت . تم الاسترجاع في 31 أغسطس 2015 .
  8. ↑ التصيّد الاحتيالي بدون صفحة ويب - باحث يكشف كيف يمكن أن يكون الرابط نفسه خبيثًا، Naked Security من Sophos، 31 أغسطس 2012 https://nakedsecurity.sophos.com/2012/08/31/phishing-without-a-webpage-researcher-reveals-how-a-link-itself-can-be-malicious/ مؤرشف في 16 أبريل 2016 على Wayback Machine
  9. ↑ "عناوين URL للبيانات - HTTP | MDN" . وثائق MDN على الويب . موزيلا . تم الاطلاع عليه بتاريخ 11 مايو 2018 .