ภาพรวมเฟรมที่มีการปิดกั้น

ฝังเนื้อหาลงในหน้าเว็บอย่างปลอดภัยโดยไม่ต้องแชร์ข้อมูลข้ามเว็บไซต์

สถานะการติดตั้งใช้งาน

• กำหนดเวลาไว้เพื่อเลิกใช้งาน
• Intent to Ship: Remove FencedFrame element and window.fence APIs
• สถานะแพลตฟอร์ม Chrome

ทำไมเราจึงต้องใช้เฟรมที่มีการปิดกั้น

เฟรมที่มีการปิดกั้น (<fencedframe>) เป็นองค์ประกอบ HTML สำหรับเนื้อหาที่ฝัง ซึ่งคล้ายกับ iframe แต่เฟรมที่มีการปิดกั้นจะจำกัดการสื่อสารกับบริบทการฝังเพื่อให้เฟรมเข้าถึงข้อมูลข้ามเว็บไซต์ได้โดยไม่ต้องแชร์กับบริบทการฝัง Privacy Sandbox API บางรายการ อาจกำหนดให้เอกสารบางรายการแสดงผลภายในเฟรมที่มีการปิดกั้น

ในทำนองเดียวกัน ระบบจะไม่แชร์ข้อมูลจากบุคคลที่หนึ่งในบริบทการฝังกับเฟรมที่มีการปิดกั้น

ตัวอย่างเช่น หาก news.example (บริบทการฝัง) ฝังโฆษณาจาก shoes.example ในเฟรมที่มีการปิดกั้น news.example จะไม่สามารถดึงข้อมูลจากโฆษณา shoes.example และ shoes.example จะไม่สามารถเรียนรู้ข้อมูลจากบุคคลที่หนึ่งจาก news.example

เพิ่มความเข้มงวดให้กับการรักษาความเป็นส่วนตัวข้ามเว็บไซต์ด้วยการแบ่งพาร์ติชันพื้นที่เก็บข้อมูล

ขณะท่องเว็บ คุณอาจเคยดูผลิตภัณฑ์ในเว็บไซต์หนึ่ง แล้วเห็นผลิตภัณฑ์ดังกล่าวปรากฏขึ้นอีกครั้งในโฆษณาในเว็บไซต์อื่น

ปัจจุบัน เทคนิคการโฆษณานี้ทำได้โดยหลักๆ ผ่านเทคโนโลยีการติดตามที่ใช้คุกกี้ของบุคคลที่สามเพื่อแชร์ข้อมูลระหว่างเว็บไซต์

Chrome กำลังดำเนินการแบ่งพาร์ติชัน พื้นที่เก็บข้อมูล ซึ่ง จะแยกพื้นที่เก็บข้อมูลของเบราว์เซอร์ตามเว็บไซต์ หากไม่มีการแบ่งพาร์ติชัน หากมีการฝัง iframe จาก shoes.example ใน news.example และ iframe นั้นจัดเก็บค่าลงในพื้นที่เก็บข้อมูล เว็บไซต์ shoes.example จะอ่านค่าดังกล่าวได้ เมื่อมีการแบ่งพาร์ติชันพื้นที่เก็บข้อมูล iframe ข้ามเว็บไซต์จะไม่แชร์พื้นที่เก็บข้อมูลอีกต่อไป ดังนั้น shoes.example จะเข้าถึงข้อมูลที่ iframe จัดเก็บไว้ไม่ได้ หาก iframe แสดงจาก *.shoes.example และฝังอยู่ใน *.shoes.example ระบบจะแชร์พื้นที่เก็บข้อมูลของเบราว์เซอร์เนื่องจากถือว่าเป็น เว็บไซต์เดียวกัน

ระบบจะใช้การแบ่งพาร์ติชันพื้นที่เก็บข้อมูลกับ Storage API มาตรฐาน ซึ่งรวมถึง LocalStorage, IndexedDB และคุกกี้ ในโลกที่มีการแบ่งพาร์ติชัน การรั่วไหลของข้อมูลในพื้นที่เก็บข้อมูลของบุคคลที่หนึ่งจะลดลงอย่างมาก

ทำงานกับข้อมูลข้ามเว็บไซต์

เฟรมที่มีการปิดกั้นเป็นฟีเจอร์ Privacy Sandbox ที่แนะนำให้เว็บไซต์ระดับบนสุดแบ่งพาร์ติชันข้อมูล ข้อเสนอและ API ของ Privacy Sandbox หลายรายการมีเป้าหมายเพื่อรองรับกรณีการใช้งานข้ามเว็บไซต์โดยไม่ต้องใช้คุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ เช่น

• Protected Audience API ช่วยให้แสดงโฆษณาตามความสนใจได้ ในลักษณะที่รักษาความเป็นส่วนตัว
• Shared Storage ช่วยให้ เข้าถึงข้อมูลข้ามเว็บไซต์ที่ไม่ได้แบ่งพาร์ติชันได้ในสภาพแวดล้อมที่ปลอดภัย

เฟรมที่มีการปิดกั้นออกแบบมาให้ทำงานร่วมกับ Protected Audience API เมื่อใช้ Protected Audience API ระบบจะลงทะเบียนความสนใจของผู้ใช้ ในกลุ่มความสนใจในเว็บไซต์ของผู้ลงโฆษณา พร้อมกับโฆษณาที่ ผู้ใช้อาจสนใจ จากนั้นในเว็บไซต์อื่น (เรียกว่า "ผู้เผยแพร่") ระบบจะประมูลโฆษณาที่ลงทะเบียนไว้ในกลุ่มความสนใจที่เกี่ยวข้องและแสดงโฆษณาที่ชนะในเฟรมที่มีการปิดกั้น

หากผู้เผยแพร่แสดงโฆษณาที่ชนะใน iframe และสคริปต์อ่านแอตทริบิวต์ src ของ iframe ได้ ผู้เผยแพร่จะอนุมานข้อมูลเกี่ยวกับความสนใจของผู้เข้าชมจาก URL ของโฆษณานั้นได้ ซึ่งไม่รักษาความเป็นส่วนตัว

เมื่อใช้เฟรมที่มีการปิดกั้น ผู้เผยแพร่จะแสดงโฆษณาที่ตรงกับความสนใจของผู้เข้าชมได้ แต่ผู้ลงโฆษณาในเฟรมเท่านั้นที่จะทราบ src และกลุ่มความสนใจ ผู้เผยแพร่จะเข้าถึงข้อมูลนี้ไม่ได้

เฟรมที่มีการปิดกั้นทำงานอย่างไร

เฟรมที่มีการปิดกั้นใช้ออบเจ็กต์ FencedFrameConfig สำหรับการนำทาง ออบเจ็กต์นี้สามารถส่งคืนจากการประมูล Protected Audience API หรือการดำเนินการเลือก URL ของ Shared Storage จากนั้นระบบจะตั้งค่าออบเจ็กต์การกำหนดค่าเป็นแอตทริบิวต์ config ในองค์ประกอบเฟรมที่มีการปิดกั้น ซึ่งแตกต่างจาก iframe ที่มีการกำหนด URL หรือ URN ที่ไม่โปร่งใสให้กับแอตทริบิวต์ src ออบเจ็กต์ FencedFrameConfig มีพร็อพเพอร์ตี้ url แบบอ่านอย่างเดียว แต่เนื่องจากกรณีการใช้งานปัจจุบันกำหนดให้ซ่อน URL จริงของทรัพยากรภายในไว้ พร็อพเพอร์ตี้นี้จึงแสดงผลสตริง opaque เมื่ออ่าน

เฟรมที่มีการปิดกั้นไม่สามารถใช้ postMessage เพื่อสื่อสารกับเครื่องมือฝัง แต่เฟรมที่มีการปิดกั้นสามารถใช้ postMessage กับ iframe ภายในเฟรมที่มีการปิดกั้นได้

เฟรมที่มีการปิดกั้นจะแยกออกจากผู้เผยแพร่ในลักษณะอื่นๆ ด้วย เช่น ผู้เผยแพร่จะเข้าถึง DOM ภายในเฟรมที่มีการปิดกั้นไม่ได้ และเฟรมที่มีการปิดกั้นจะเข้าถึง DOM ของผู้เผยแพร่ไม่ได้ นอกจากนี้ แอตทริบิวต์ต่างๆ เช่น name ซึ่งตั้งค่าเป็นค่าใดก็ได้และผู้เผยแพร่สังเกตได้ จะไม่พร้อมใช้งานในเฟรมที่มีการปิดกั้น

เฟรมที่มีการปิดกั้นทำงานเหมือนบริบทการท่องเว็บระดับบนสุด (เช่น แท็บเบราว์เซอร์) แม้ว่าเฟรมที่มีการปิดกั้นใน กรณีการใช้งานบางอย่าง (เช่น โฆษณารีมาร์เก็ตติ้งตามความสนใจ) จะมีข้อมูลข้ามเว็บไซต์ (เช่น กลุ่มความสนใจ Protected Audience API ) ได้ แต่เฟรมจะเข้าถึงพื้นที่เก็บข้อมูลหรือคุกกี้ที่ไม่ได้แบ่งพาร์ติชันไม่ได้ เฟรมที่มีการปิดกั้นจะเข้าถึงคุกกี้ที่ไม่ซ้ำกันซึ่งอิงตาม Nonce และพาร์ติชันพื้นที่เก็บข้อมูลได้

คำอธิบายโดยละเอียดเกี่ยวกับลักษณะของเฟรมที่มีการปิดกั้นอยู่ใน คำอธิบาย

เฟรมที่มีการปิดกั้นแตกต่างจาก iframe อย่างไร

เมื่อทราบแล้วว่าเฟรมที่มีการปิดกั้นจะทำอะไรได้บ้างและทำอะไรไม่ได้บ้าง การเปรียบเทียบกับฟีเจอร์ iframe ที่มีอยู่จะเป็นประโยชน์

เฟรมที่มีการปิดกั้นรองรับตัวเลือกการสื่อสารภายนอกน้อยกว่าเพื่อรักษาความเป็นส่วนตัว

เฟรมที่มีการปิดกั้นจะมาแทนที่ iframe ไหม

ท้ายที่สุดแล้ว เฟรมที่มีการปิดกั้นจะไม่มาแทนที่ iframe และคุณไม่จำเป็นต้องใช้เฟรมที่มีการปิดกั้น เฟรมที่มีการปิดกั้นเป็นเฟรมที่รักษาความเป็นส่วนตัวได้มากกว่าสำหรับการใช้งานเมื่อต้องแสดงข้อมูลจากพาร์ติชันระดับบนสุดที่แตกต่างกันในหน้าเดียวกัน

iframe ในเว็บไซต์เดียวกัน (บางครั้งเรียกว่า iframe ที่เป็นมิตร) ถือเป็นเนื้อหาที่เชื่อถือได้

ใช้เฟรมที่มีการปิดกั้น

เฟรมที่มีการปิดกั้นจะทำงานร่วมกับ Privacy Sandbox API อื่นๆ เพื่อแสดงเอกสารจากพาร์ติชันพื้นที่เก็บข้อมูลที่แตกต่างกันภายในหน้าเดียว เรากำลังพูดคุยเกี่ยวกับ API ที่เป็นไปได้

ผู้สมัครปัจจุบันสำหรับการทำงานร่วมกันนี้ ได้แก่

• จากตระกูล TURTLEDOVE API (ซึ่งเป็น พื้นฐานของ Protected Audience API) เฟรมที่มีการปิดกั้นสามารถทำงานร่วมกับ Conversion Lift Measurement โดยใช้ Shared Storage
• อีกตัวเลือกหนึ่งคือการอนุญาตให้เฟรมที่มีการปิดกั้นเป็นแบบ อ่านอย่างเดียว หรือ เข้าถึงพื้นที่เก็บข้อมูลที่ไม่ได้แบ่งพาร์ติชัน

ดูรายละเอียดเพิ่มเติมได้ในคำอธิบายเกี่ยวกับกรณีการใช้งานเฟรมที่มีการปิดกั้น

ตัวอย่าง

หากต้องการรับออบเจ็กต์ config ของเฟรมที่มีการปิดกั้น คุณต้องส่ง resolveToConfig: true ไปยังการเรียก runAdAuction() ของ Protected Audience API หรือการเรียก selectURL() ของ Shared Storage หากไม่ได้เพิ่มพร็อพเพอร์ตี้ (หรือตั้งค่าเป็น false) Promise ที่ได้จะแสดงผลเป็น URN ที่ใช้ได้ใน iframe เท่านั้น

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

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

เมื่อได้การกำหนดค่าแล้ว คุณสามารถกำหนดการกำหนดค่าให้กับแอตทริบิวต์ config ของเฟรมที่มีการปิดกั้นเพื่อนำทางเฟรมไปยังทรัพยากรที่การกำหนดค่าแสดง Chrome เวอร์ชันก่อนหน้าไม่รองรับพร็อพเพอร์ตี้ resolveToConfig ดังนั้นคุณจึงต้องยืนยันว่า Promise แสดงผลเป็น FencedFrameConfig ก่อนที่จะนำทาง

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

ดูข้อมูลเพิ่มเติมได้ในคำอธิบายเกี่ยวกับเฟรมที่มีการปิดกั้นและการกำหนดค่าเฟรมที่มีการปิดกั้น

ส่วนหัว

เบราว์เซอร์จะตั้งค่า Sec-Fetch-Dest: fencedframe สำหรับคำขอที่ส่งจากเฟรมที่มีการปิดกั้นและ iframe ที่ฝังอยู่ภายในเฟรมที่มีการปิดกั้น

Sec-Fetch-Dest: fencedframe

เซิร์ฟเวอร์ต้องตั้งค่าส่วนหัวการตอบกลับ Supports-Loading-Mode: fenced-frame เพื่อให้เอกสารโหลดในเฟรมที่มีการปิดกั้น ส่วนหัวต้องมีสำหรับ iframe ใดๆ ที่อยู่ภายในเฟรมที่มีการปิดกั้นด้วย

Supports-Loading-Mode: fenced-frame

บริบท Shared Storage

คุณอาจต้องการใช้ Private Aggregation เพื่อรายงานข้อมูลระดับเหตุการณ์ในเฟรมที่มีการปิดกั้นซึ่งเชื่อมโยงกับข้อมูลตามบริบทจากเครื่องมือฝัง การใช้เมธอด fencedFrameConfig.setSharedStorageContext() จะช่วยให้คุณส่งข้อมูลตามบริบทบางอย่าง เช่น รหัสเหตุการณ์ จากเครื่องมือฝังไปยัง Worklet ของ Shared Storage ที่เริ่มต้นโดย Protected Audience API ได้

ในตัวอย่างต่อไปนี้ เราจะจัดเก็บข้อมูลบางอย่างที่พร้อมใช้งานในหน้าเครื่องมือฝังและข้อมูลบางอย่างที่พร้อมใช้งานในเฟรมที่มีการปิดกั้นใน Shared Storage จากหน้าเครื่องมือฝัง ระบบจะตั้งค่ารหัสเหตุการณ์จำลองเป็นบริบท Shared Storage จากเฟรมที่มีการปิดกั้น ระบบจะส่งข้อมูลเหตุการณ์ของเฟรม

จากหน้าเครื่องมือฝัง คุณสามารถตั้งค่าข้อมูลตามบริบทเป็นบริบท Shared Storage ได้ดังนี้

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 ของ Shared Storage ได้ (ไม่เกี่ยวข้องกับข้อมูลตามบริบทจากเครื่องมือฝังด้านบน)

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);

ดูข้อมูลเพิ่มเติมเกี่ยวกับบริบทของเครื่องมือฝังในออบเจ็กต์การกำหนดค่าเฟรมที่มีการปิดกั้นได้ในคำอธิบาย

ลองใช้เฟรมที่มีการปิดกั้น

ใช้ Chrome แฟล็ก เพื่อ เปิดใช้ Fenced Frame API ที่ chrome://flags/#enable-fenced-frames

ในกล่องโต้ตอบมีตัวเลือกหลายรายการ เราขอแนะนำให้คุณเลือก *เปิดใช้* ซึ่งจะช่วยให้ Chrome อัปเดตเป็นสถาปัตยกรรมใหม่โดยอัตโนมัติ เมื่อพร้อมใช้งาน

ตัวเลือกอื่นๆ ได้แก่ เปิดใช้ด้วย ShadowDOM และ เปิดใช้ด้วยสถาปัตยกรรมหลาย หน้า มีกลยุทธ์การติดตั้งใช้งานที่แตกต่างกัน ซึ่งเกี่ยวข้องกับวิศวกรเบราว์เซอร์เท่านั้น ปัจจุบัน เปิดใช้ ทำงานในลักษณะเดียวกับ เปิดใช้ด้วย ShadowDOM ในอนาคต เปิดใช้ จะแมปกับ เปิดใช้ด้วยสถาปัตยกรรมหลายหน้า

การตรวจหาฟีเจอร์

วิธีตรวจสอบว่ามีการกำหนดเฟรมที่มีการปิดกั้นไว้หรือไม่

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

วิธีตรวจสอบว่าการกำหนดค่าเฟรมที่มีการปิดกั้นพร้อมใช้งานหรือไม่

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

การสนับสนุนเบราว์เซอร์

• MDN
• สถานะแพลตฟอร์ม Chrome

มีส่วนร่วมและแชร์ความคิดเห็น

เรากำลังพูดคุยกันอย่างจริงจังเกี่ยวกับเฟรมที่มีการปิดกั้น และอาจมีการเปลี่ยนแปลงในอนาคต หากคุณลองใช้ API นี้และมีข้อเสนอแนะ โปรดแจ้งให้เราทราบ

• GitHub: อ่านคำอธิบาย, ถามคำถาม และติดตาม การสนทนา

ดูข้อมูลเพิ่มเติม

• สถานะแพลตฟอร์ม Chrome
• Blink Intent to Prototype