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

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

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

เอกสารนี้อธิบายองค์ประกอบ HTML ใหม่ ซึ่งก็คือ <fencedframe>

• พร้อมใช้งานสำหรับผู้ใช้ทั่วไปใน Chrome
• สถานะแพลตฟอร์ม Chrome

เหตุใดเราจึงต้องใช้เฟรมที่จำกัด

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

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

เช่น หาก news.example (บริบทการฝัง) ฝังโฆษณาจาก shoes.example ใน Fenced Frame 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 ระบบจะแชร์พื้นที่เก็บข้อมูลของเบราว์เซอร์เนื่องจากถือว่าเป็น same-site

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

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

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

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

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

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

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

Fenced Frame ทำงานอย่างไร

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

เฟรมที่จำกัดไม่สามารถใช้ postMessage เพื่อสื่อสารกับผู้ฝังได้ อย่างไรก็ตาม เฟรมที่จำกัดสามารถใช้ postMessage กับ iframe ภายในเฟรมที่จำกัดได้

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

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

ลักษณะของเฟรมที่จำกัดจะอธิบายรายละเอียดเพิ่มเติมในคำอธิบาย

เฟรมที่จำกัดต่างจาก iframe อย่างไร

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

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

Fenced Frame จะมาแทนที่ iframe ไหม

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

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

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

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

ผู้สมัครรับเลือกในปัจจุบันสำหรับชุดค่าผสมนี้ ได้แก่

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

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

ตัวอย่าง

หากต้องการรับออบเจ็กต์ config ของกรอบที่จำกัด คุณต้องส่ง resolveToConfig: true ไปยังการเรียก runAdAuction() ของ Protected Audience API หรือการเรียก selectURL() ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน หากไม่ได้เพิ่มพร็อพเพอร์ตี้ (หรือตั้งค่าเป็น false) สัญญาที่ได้จะเปลี่ยนเป็น 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;
}

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

ส่วนหัว

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

Sec-Fetch-Dest: fencedframe

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

Supports-Loading-Mode: fenced-frame

บริบทของ Shared Storage

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

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

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

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 ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกันได้ (ไม่เกี่ยวข้องกับข้อมูลตามบริบทจากโปรแกรมฝังด้านบน)

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 จากนั้นรายงานผ่านการรวบรวมข้อมูลแบบส่วนตัวได้โดยทำดังนี้

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 อัปเดตเป็นสถาปัตยกรรมใหม่โดยอัตโนมัติ เมื่อพร้อมใช้งาน

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

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

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

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

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

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

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

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

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

Fenced Frame อยู่ระหว่างการหารืออย่างต่อเนื่องและอาจมีการเปลี่ยนแปลงในอนาคต หากคุณลองใช้ API นี้และมีความคิดเห็น เรายินดีรับฟัง

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

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

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