نمای کلی قاب های حصاردار

بدون اشتراک‌گذاری داده‌های بین سایتی، محتوا را به طور ایمن در یک صفحه جاسازی کنید.

وضعیت پیاده‌سازی

این سند یک عنصر HTML جدید را شرح می‌دهد: <fencedframe> .

• به طور کلی در Chrome در دسترس است .
• وضعیت پلتفرم کروم

چرا به قاب‌های حصارکشی شده نیاز داریم؟

یک قاب محصور ( <fencedframe> ) یک عنصر HTML برای محتوای جاسازی‌شده است، مشابه iframe. برخلاف iframeها، یک قاب محصور ارتباط با زمینه جاسازی‌شده خود را محدود می‌کند تا به قاب اجازه دهد بدون به اشتراک گذاشتن داده‌های بین‌سایتی با زمینه جاسازی، به آنها دسترسی داشته باشد. برخی از APIهای Privacy Sandbox ممکن است نیاز داشته باشند که اسناد انتخابی درون یک قاب محصور رندر شوند .

به طور مشابه، هیچ داده‌ی شخص ثالثی در زمینه‌ی جاسازی نمی‌تواند با فریم محصور شده به اشتراک گذاشته شود.

برای مثال، اگر news.example (زمینه جاسازی) یک تبلیغ از shoes.example را در یک قاب محصور جاسازی کند، news.example نمی‌تواند داده‌ها را از تبلیغ shoes.example استخراج کند و shoes.example نمی‌تواند داده‌های شخص ثالث را از news.example یاد بگیرد.

تقویت حریم خصوصی بین سایتی با پارتیشن‌بندی ذخیره‌سازی

احتمالاً هنگام وبگردی، محصولاتی را در یک سایت مشاهده کرده‌اید و سپس دیده‌اید که آنها دوباره در یک تبلیغ در سایتی کاملاً متفاوت ظاهر می‌شوند.

امروزه، این تکنیک تبلیغاتی عمدتاً از طریق فناوری ردیابی که از کوکی‌های شخص ثالث برای به اشتراک گذاشتن اطلاعات در سایت‌ها استفاده می‌کند، حاصل می‌شود.

کروم در حال کار بر روی پارتیشن‌بندی فضای ذخیره‌سازی است که فضای ذخیره‌سازی مرورگر را به ازای هر سایت جدا می‌کند. بدون پارتیشن‌بندی، اگر یک iframe از shoes.example در news.example تعبیه شده باشد و آن iframe مقداری را در فضای ذخیره‌سازی ذخیره کند، آن مقدار را می‌توان از سایت shoes.example خواند. هنگامی که فضای ذخیره‌سازی تقسیم شده باشد، iframe های بین سایتی دیگر فضای ذخیره‌سازی را به اشتراک نمی‌گذارند، بنابراین shoes.example قادر به دسترسی به اطلاعات ذخیره شده توسط iframe نخواهد بود. اگر iframe از *.shoes.example ارائه شود و در *.shoes.example تعبیه شود، فضای ذخیره‌سازی مرورگر به اشتراک گذاشته می‌شود زیرا این دو به عنوان same-site در نظر گرفته می‌شوند.

پارتیشن‌بندی ذخیره‌سازی بر روی APIهای استاندارد ذخیره‌سازی از جمله LocalStorage، IndexedDB و کوکی‌ها اعمال خواهد شد. در یک دنیای پارتیشن‌بندی‌شده، نشت اطلاعات در سراسر ذخیره‌سازی شخص اول به طور قابل توجهی کاهش خواهد یافت.

کار با داده‌های بین سایتی

فریم‌های محصور شده (Fenced frames) یک ویژگی Privacy Sandbox است که پیشنهاد می‌دهد سایت‌های سطح بالا باید داده‌ها را تقسیم‌بندی کنند. بسیاری از پیشنهادها و APIهای Privacy Sandbox با هدف برآورده کردن موارد استفاده بین سایتی بدون کوکی‌های شخص ثالث یا سایر مکانیسم‌های ردیابی ارائه می‌شوند. به عنوان مثال:

• API مخاطبان محافظت‌شده امکان نمایش تبلیغات مبتنی بر علایق را با حفظ حریم خصوصی فراهم می‌کند.
• فضای ذخیره‌سازی مشترک امکان دسترسی به داده‌های بین سایتی پارتیشن‌بندی نشده را در یک محیط امن فراهم می‌کند.

فریم‌های حصارکشی‌شده برای کار با API مخاطب محافظت‌شده طراحی شده‌اند. با API مخاطب محافظت‌شده، علایق کاربر در سایت تبلیغ‌کننده در گروه‌های علاقه‌مندی ، همراه با تبلیغاتی که ممکن است برای کاربر جالب باشد، ثبت می‌شوند. سپس، در یک سایت جداگانه (که به عنوان "ناشر" شناخته می‌شود)، تبلیغات ثبت‌شده در گروه‌های علاقه‌مندی مربوطه به حراج گذاشته می‌شوند و تبلیغ برنده در یک قاب حصارکشی‌شده نمایش داده می‌شود.

اگر ناشر، تبلیغ برنده را در یک iframe نمایش دهد و اسکریپت بتواند ویژگی src مربوط به iframe را بخواند، ناشر می‌تواند از طریق URL آن تبلیغ، اطلاعاتی در مورد علایق بازدیدکننده استنباط کند. این کار، حریم خصوصی را حفظ نمی‌کند.

با یک قاب محصور، ناشر می‌تواند تبلیغی را نمایش دهد که با علایق بازدیدکنندگان مطابقت داشته باشد، اما src و گروه علاقه‌مندی فقط برای تبلیغ‌کننده در قاب شناخته می‌شوند. ناشر نمی‌تواند به این اطلاعات دسترسی داشته باشد.

قاب‌های نرده‌ای چگونه کار می‌کنند؟

فریم‌های حصارکشی‌شده از شیء FencedFrameConfig برای پیمایش استفاده می‌کنند. این شیء می‌تواند از حراج API مخاطبان محافظت‌شده یا عملیات انتخاب URL در Shared Storage بازگردانده شود. سپس، شیء پیکربندی به عنوان ویژگی config در عنصر فریم حصارکشی‌شده تنظیم می‌شود. این با یک iframe که در آن یک URL یا URN مات به ویژگی src اختصاص داده می‌شود، متفاوت است. شیء FencedFrameConfig دارای یک ویژگی url فقط خواندنی است. با این حال، از آنجایی که موارد استفاده فعلی نیاز به پنهان بودن URL واقعی منبع داخلی دارند، این ویژگی هنگام خواندن، رشته opaque را برمی‌گرداند.

یک فریم حصارکشی شده نمی‌تواند از postMessage برای ارتباط با جاسازی‌کننده‌اش استفاده کند. با این حال، یک فریم حصارکشی شده می‌تواند postMessage با iframe های داخل فریم حصارکشی شده استفاده کند.

فریم‌های حصارکشی‌شده به روش‌های دیگری از ناشر جدا می‌شوند. برای مثال، ناشر به DOM داخل یک فریم حصارکشی‌شده دسترسی نخواهد داشت و فریم حصارکشی‌شده نمی‌تواند به DOM ناشر دسترسی داشته باشد. علاوه بر این، ویژگی‌هایی مانند name - که می‌تواند به هر مقداری تنظیم شود و توسط ناشر مشاهده شود - در فریم‌های حصارکشی‌شده در دسترس نیستند.

فریم‌های حصارکشی‌شده مانند یک زمینه مرور سطح بالا (مانند یک تب مرورگر) رفتار می‌کنند. اگرچه یک فریم حصارکشی‌شده در موارد استفاده خاص (مانند تبلیغات هدفمند مبتنی بر علاقه‌مندی) می‌تواند حاوی داده‌های بین‌سایتی (مانند یک گروه علاقه‌مندی API مخاطب محافظت‌شده) باشد، اما این فریم نمی‌تواند به فضای ذخیره‌سازی پارتیشن‌بندی نشده یا کوکی‌ها دسترسی داشته باشد. فریم حصارکشی‌شده می‌تواند به یک کوکی و پارتیشن ذخیره‌سازی منحصر به فرد و مبتنی بر nonce دسترسی داشته باشد.

ویژگی‌های قاب‌های حصارکشی‌شده در توضیح‌دهنده با جزئیات بیشتری شرح داده شده است.

فریم‌های حصارکشی شده در مقایسه با آی‌فریم‌ها چگونه هستند؟

حالا که می‌دانید فریم‌های حصارکشی‌شده چه کاربردی دارند و چه کاربردی ندارند، مقایسه‌ی آن‌ها با ویژگی‌های iframe موجود مفید است.

قاب‌های حصارکشی‌شده از گزینه‌های ارتباطی خارجی کمتری برای حفظ حریم خصوصی پشتیبانی می‌کنند.

آیا فریم‌های حصارکشی شده جایگزین آی‌فریم‌ها خواهند شد؟

در نهایت، فریم‌های حصارکشی‌شده جایگزین iframeها نمی‌شوند و شما مجبور به استفاده از آنها نخواهید بود. فریم‌های حصارکشی‌شده فریم‌های خصوصی‌تری برای استفاده هستند، زمانی که نیاز است داده‌های پارتیشن‌های سطح بالای مختلف در یک صفحه نمایش داده شوند.

آی‌فریم‌های مشابه سایت (که گاهی اوقات با نام آی‌فریم‌های دوستانه نیز شناخته می‌شوند) محتوای قابل اعتمادی محسوب می‌شوند.

از قاب‌های حصارکشی شده استفاده کنید

فریم‌های حصارکشی‌شده در ترکیب با سایر APIهای Privacy Sandbox برای نمایش اسناد از پارتیشن‌های ذخیره‌سازی مختلف در یک صفحه واحد کار خواهند کرد. APIهای بالقوه در حال بحث هستند.

نامزدهای فعلی برای این ترکیب عبارتند از:

• از خانواده APIهای TURTLEDOVE (که اساس API مخاطبان محافظت‌شده است)، فریم‌های حصارکشی‌شده می‌توانند با Conversion Lift Measurement با استفاده از Shared Storage کار کنند.
• گزینه دیگر این است که به فریم‌های حصارکشی شده اجازه دهید فقط خواندنی باشند یا به فضای ذخیره‌سازی پارتیشن‌بندی نشده دسترسی داشته باشند .

برای جزئیات بیشتر، به توضیح موارد استفاده Fenced Frames مراجعه کنید.

مثال‌ها

برای دریافت یک شیء config قاب حصارکشی‌شده، باید resolveToConfig: true را به فراخوانی runAdAuction() از API مخاطب محافظت‌شده یا فراخوانی selectURL() از ذخیره‌سازی مشترک ارسال کنید. اگر این ویژگی اضافه نشود (یا روی false تنظیم شود)، promise حاصل به یک URN تبدیل می‌شود که فقط می‌تواند در یک iframe استفاده شود.

const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});

const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

پس از دریافت پیکربندی، می‌توانید آن را به ویژگی config یک فریم حصارکشی‌شده اختصاص دهید تا فریم به منبعی که توسط پیکربندی نمایش داده می‌شود، هدایت شود. نسخه‌های قبلی کروم از ویژگی resolveToConfig پشتیبانی نمی‌کنند، بنابراین قبل از پیمایش، باید تأیید کنید که promise به یک FencedFrameConfig تبدیل شده است:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
  const frame = document.createElement('fencedframe');
  frame.config = frameConfig;
}

برای کسب اطلاعات بیشتر، به توضیحات Fenced Frame و Fenced Frame configuration مراجعه کنید.

سربرگ‌ها

مرورگرها برای درخواست‌های ارسالی از فریم‌های حصارکشی‌شده و iframeهایی که درون یک فریم حصارکشی‌شده تعبیه شده‌اند Sec-Fetch-Dest: fencedframe تنظیم می‌کنند.

Sec-Fetch-Dest: fencedframe

سرور باید هدر پاسخ Supports-Loading-Mode: fenced-frame برای بارگذاری سندی در یک frame حصارکشی شده تنظیم کند. این هدر باید برای هر iframe داخل یک frame حصارکشی شده نیز وجود داشته باشد.

Supports-Loading-Mode: fenced-frame

زمینه ذخیره‌سازی مشترک

ممکن است بخواهید از Private Aggregation برای گزارش داده‌های سطح رویداد در فریم‌های حصاربندی‌شده مرتبط با داده‌های زمینه‌ای از جاسازی‌کننده استفاده کنید. با استفاده از متد fencedFrameConfig.setSharedStorageContext() ، می‌توانید برخی از داده‌های زمینه‌ای، مانند شناسه رویداد، را از جاسازی‌کننده به workletهای ذخیره‌سازی مشترک که توسط API مخاطب محافظت‌شده آغاز شده‌اند، منتقل کنید.

در مثال زیر، برخی از داده‌های موجود در صفحه جاسازی‌کننده و برخی از داده‌های موجود در قاب محصور شده را در فضای ذخیره‌سازی مشترک ذخیره می‌کنیم. از صفحه جاسازی‌کننده، یک شناسه رویداد ساختگی به عنوان زمینه ذخیره‌سازی مشترک تنظیم می‌شود. از قاب محصور شده، داده‌های رویداد قاب وارد می‌شوند.

از صفحه جاسازی‌کننده، می‌توانید داده‌های زمینه‌ای را به عنوان زمینه ذخیره‌سازی مشترک تنظیم کنید:

const frameConfig = await navigator.runAdAuction({ resolveToConfig: true });

// Data from the embedder that you want to pass to the shared storage worklet
frameConfig.setSharedStorageContext('some-event-id');

const frame = document.createElement('fencedframe');
frame.config = frameConfig;

از فریم حصارکشی شده، می‌توانید داده‌های سطح رویداد را از فریم به worklet ذخیره‌سازی مشترک منتقل کنید (که ربطی به داده‌های زمینه‌ای از embedder بالا ندارد):

const frameData = {
  // Data available only inside the fenced frame
}

await window.sharedStorage.worklet.addModule('reporting-worklet.js');

await window.sharedStorage.run('send-report', {
  data: {
    frameData
  },
});

شما می‌توانید اطلاعات زمینه‌ایِ جاسازی‌کننده را از sharedStorage.context و داده‌های سطح رویدادِ فریم را از شیء data بخوانید، سپس آنها را از طریق Private Aggregation گزارش دهید:

class ReportingOperation {
  convertEventIdToBucket(eventId) { ... }
  convertEventPayloadToValue(info) { ... }

  async run(data) {
    // Data from the embedder
    const eventId = sharedStorage.context;

    // Data from the fenced frame
    const eventPayload = data.frameData;

    privateAggregation.contributeToHistogram({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

برای کسب اطلاعات بیشتر در مورد زمینه‌ی جاسازی‌کننده در یک شیء پیکربندی قاب حصارکشی‌شده، به توضیح‌دهنده مراجعه کنید.

قاب‌های حصارکشی شده را امتحان کنید

برای فعال کردن Fenced Frame API از Chrome flags در chrome://flags/#enable-fenced-frames استفاده کنید.

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

گزینه‌های دیگر، Enabled with ShadowDOM و Enabled with multiple page architecture ، استراتژی‌های پیاده‌سازی متفاوتی ارائه می‌دهند که فقط برای مهندسان مرورگر مرتبط هستند. امروزه، Enable به همان روشی که Enabled with ShadowDOM کار می‌کند، عمل می‌کند. در آینده، Enable به Enable with multiple page architecture نگاشت خواهد شد.

تشخیص ویژگی

برای تعیین اینکه آیا قاب‌های حصارکشی شده تعریف شده‌اند:

if (window.HTMLFencedFrameElement) {
  // The fenced frame element is defined
}

برای تعیین اینکه آیا پیکربندی قاب حصارکشی شده موجود است:

if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) {
   // The fenced frame config is available
}

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

• ام دی ان
• وضعیت پلتفرم کروم

مشارکت کنید و بازخورد خود را به اشتراک بگذارید

Fenced Frames در حال بررسی فعال است و ممکن است در آینده تغییر کند. اگر این API را امتحان کردید و بازخوردی داشتید، خوشحال می‌شویم آن را بشنویم.

• گیت‌هاب : توضیحات را بخوانید، سوال بپرسید و بحث را دنبال کنید .

اطلاعات بیشتر

• وضعیت پلتفرم کروم
• قصد چشمک زدن برای نمونه اولیه