الگوی داده‌ای یوآرآی

الگوی داده‌ای یوآرآی، یک الگوی یوآرآی یا به عبارتی الگوی نشانی وب است که راهی‌ست برای وارد کردن داده با قالبی خاص در داخل یک صفحه وب، به‌صورتی که انگار آن‌ها منابع خارجی مانند تصاویر هستند. این روش به ما اجازه میدهد برای فراخوانی یک صفحه وب، بجای ارسال چند بار درخواست اچ‌تی‌تی‌پی، برای احضار چند منبع (مثلاً احضار و فراخوانی فایلهای تصاویر، سی‌اس‌اس، جاوااسکریپت و ...) تنها یکبار دستور درخواست اچ‌تی‌تی‌پی را ارسال نماییم، که می‌تواند به بهره‌بری بالاتری منجر گردد.

گاه یوآرآی علی‌رغم اینکه به محلی در خارج اشاره نمی‌کنند، با نشانی وب (به انگلیسی:Uniform Resource Locator یا URL) اشتباه گرفته می‌شوند. الگوی یوآرآی در استاندارد RFC2397 تعریف گردیده است.

پشتیبانی در مرورگرهای وب

از فروردین ۱۳۹۱ مرورگرهای زیر الگوی داده‌ای یوآرآی را پشتیبانی میکنند:

• مرورگرهای برپایه گکو، مانند: فایرفاکس، سی‌مانکی، xB Browser، Camino، فایرفاکس برای تلفن همراه یا Fennec و کا-ملین
• کانکرور توسط سیستم ورودی/خروجی KIOی کی‌دی‌ئی یا KDE
• اپرا (شامل دستگاههایی مانند Nintendo DSi یا Wii)
• مرورگرهای برپایه وب‌کیت، مانند سافاری (شامل آی‌اواس)، مرورگر اندروید، مرورگر کیندل ۴، وب (مرورگر وب) و Midori و همچنین مرورگرهای برپایه وب‌کیت/کرومیوم، مانند گوگل کروم
• ترایدنت
  • اینترنت اکسپلورر ۸، مایکروسافت پشتیبانی از محتویات غیرقابل پیمایش را با ادعای نگرانیهای امنیتی، محدود نموده است. یکی از دلایل این ادعا را نگرانیها، در خصوص محتویات صفحات وب دارای جاوااسکریپت عنوان نموده که قابل ترجمه توسط فیلترینگ کلاینتهای پست‌الکترونیکی مانند Outlook نیستند. در نسخه ۸ این مرورگر داده‌های یوآرآی باید از ۳۲ کیلوبایت کمتر باشند. داده‌های یوآرآی در اینترنت اکسپلورر تنها برای موارد زیر پشتیبانی می‌شوند:
    • شیء (فقط تصویر)
    • img
    • input type=image
    • link (داده یوآرآی باید در حالت base64 کد شده باشد)
    • دستورهایی از برگه‌های سبک آبشاری یا CSS که URL را قبول می‌کنند، مانند background-image, background, list-style-type, list-style و مشابه اینها
  • اینترنت اکسپلورر ۹ محدودیت ۳۲ کیلوبایتی نسخه ۸ را ندارد.

پشتیبانی در برنامه‌های مدیریت پست الکترونیک یا کلاینت ایمیل

برنامه‌های زیر داده‌های یوآرآی که برای تصویر باشند را پشتیبانی می‌کنند:

• Apple Mail 4
• BlackBerry Curve
• HTC HD7
• iPad 2
• iPhone 3GS
• LG Optimus
• Lotus Notes 8
• Me.com
• Nokia N96
• Outlook 2003
• Thunderbird 3
• Yahoo! Mail

مزایا

• درخواست اچ‌تی‌تی‌پی و ترافیک Header برای این نوع داده وجود ندارد.
• برای انتقال تعداد زیادی از فایلهای کوچک، این روش می‌تواند سریعتر باشد. انتقال می‌تواند با سرعت کمتری صورت پذیرد اگر هر فایل به صورت جداگانه درخواست اچ‌تی‌تی‌پی خود را ارسال نمایند.
• برای مرور صفحات امنی که از پروتکل امن انتقال ابرمتن یا HTTPS استفاده میکنند، همیشه استفاده از ترکیبی از منابع امن و غیرامن یک نگرانی بوده‌است. بنابراین با استفاده از این روش بیشتر عناصر یک صفحه را بدون نیاز به فراخوانی از منابع غیرامن می‌توان انتقال داد. به اضافه اینکه، در یک سرور امن با تنظیمات بد، فشار یک درخواست HTTPS همیشه بیشتر از HTTP معمولی است و با قرار دادن داده‌های یوآرآی در یک صفحه، نیاز به ارسال تعداد زیادی درخواست HTTPS امن به سرور را از بین برده و سرعت را افزایش می‌دهیم.
• مرورگرها اصولاً به‌صورتی تنظیم گردیده‌اند که تعداد مشخصی از ارتباطات HTTP همزمان را با یک دامنه ایجاد مینمایند. پس با اینکار نیاز به استفاده بیش از حد از ارتباطات همزمان برای دامنه هدف را از بین میبریم و باعث افزایش بهره‌بری خواهد شد.
• از این روش می‌توان در محیطهایی که دارای محدودیت یا جلوگیری از دسترسی به منابع خارجی دارند در زمانی که اجازه دسترسی به خارج وجود ندارد می‌توان استفاده نمود. به‌طور مثال یک مؤسسه ویرایشگر پیشرفته HTML به منظور مخفی کردن پیچیدگی منابع خارجی برای کاربر، می‌تواند یک تصویر را گرفته و به داده یوآرآی تبدیل نموده و در صفحه وب مورد نظر قرار دهد.
• این روش استفاده از تنها یک صفحه را برای ایجاد صفحات چندرسانه‌ای امکان‌پذیر مینماید.
• الگوی پیام رایانامه می‌تواند محتوی تصاویری (برای پشت‌صحنه و امضاء) باشد بدون اینکه فایل پیوستی به پیام قابل دید باشد.

معایب

معایبی نیز برای این روش ذکر میگردد مانند:

• عدم پشتیبانی یا پشتیبانی کم در برخی مرورگرها خصوصاً اینترنت اکسپلرر مایکروسافت
• عدم قرار گرفتن در حافظه کش این نوع داده به صورت جداگانه از فایلی (فایل CSS یا HTML) که محتوی آن است
• افزایش ۱/۳ حجم اطلاعات با کد شدن بر اساس Base64 در مقیاس با شکل دودویی آن داده‌ها (هرچند این افزایش حجم می‌تواند به اندازه ۲-۳٪ کل آن کاهش پیدا کند اگر وب سرور، پاسخ‌های ارسالی را با استفاده از جی‌زیپ یا gzip فشرده نماید.)
• نیاز به ارجاع دادن به یک داده یوآرآی یکسان در یک صفحه، منجر به کپی کردن چندین بار آن کد در آن صفحه می‌شود. در حالیکه با استفاده از یک منبع خارجی، ما تنها یکبار آن منبع را فراخوانده و یکبار هم آن در Decode میکنیم.
• تشخیص داده‌های یوآرآی توسط نرم‌افزارها و دستگاههای امنیتی برای فیلتر کردن محتویات مخرب بسیار دشوارتر میگردد

ترکیب و قالب مورد استفاده

 data:[<MIME-type>][;charset=<encoding>][;base64],<data>

مثالها

اچ‌تی‌ام‌ال

در کد زیرین یک نقطه قرمز رنگ مانند به کد تبدیل شده است که اگر کد داخل علامت نقل قول که بعد از src آمده است را در قسمت آدرس مرورگری که داده یوآرآی را پشتیبانی میکند کپی نماییم این نقطه قرمز رنگ را با قالب تصویری PNG نمایش میدهد:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

یا در زیر کد یک خط که میتواند برای تشکیل پشت‌صحنه یک جعبه متنی مثل فرم ورود اطلاعات کاربر مورد استفاده قرار گیرد آمده است:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAA0CAAAAACF
/rZIAAAAM0lEQVQIW63CsQ0AEBRAwfeTV1lKbVrjGEMnCsIKCpdz
48aFEwd2bFgwHvJ1xYQZD4LBBVKOCciNazFCAAAAAElFTkSuQmCC" alt="TextBox Line">

چنانچه در مثال‌های بالا میبینید یک کد داده یوآرآی می‌تواند محتوی فضای خالی نیز باشد و فضای خالی در بین کد تأثیری در آن ندارد.

CSS

یک دستور Background-image در سی‌اس‌اس:

ul.checklist li.complete {
    padding-left: 20px;
    background: white url('data:image/png;base64,iVBORw0KGgoAA
AANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0l
EQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6
P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC') no-repeat scroll left top;
}

در فایرفاکس ۵، گوگل کروم ۱۷، و آی‌ای ۹، داده یوآرآی نباید محتوی خط جدید باشد.

JavaScript

یک عبارت جاوااسکریپت، که یک زیر ویندوز را باز می‌کند:

window.open('data:text/html;charset=utf-8,%3C%21DOCTYPE%20' +
  'html%3E%0D%0A%3Chtml%20lang%3D%22en%22%3E%0D%0A%3Chead%' +
  '3E%3Ctitle%3EEmbedded%20Window%3C%2Ftitle%3E%3C%2Fhead%' +
  '3E%0D%0A%3Cbody%3E%3Ch1%3E42%3C%2Fh1%3E%3C%2Fbody%3E%0A' +
  '%3C%2Fhtml%3E%0A%0D%0A','_blank','height=300,width=400');

این مثال با اینترنت اکسپلرر ۸ کار نمی‌کند.

جستارهای وابسته

• اچ‌تی‌ام‌ال