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

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

สถานะการใช้งาน

เอกสารนี้ระบุองค์ประกอบ HTML ใหม่: <fencedframe>

ข้อเสนอ สถานะ
การเปลี่ยนแปลง Web API สำหรับ URI ที่จะกำหนดค่า
Explainer
พร้อมใช้งานใน Chrome ในไตรมาสที่ 1 ปี 2023
มาโครครีเอทีฟโฆษณาในเฟรมที่มีการปิดกั้นสำหรับการรายงานโฆษณา (FFAR)
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 3 ปี 2023
ส่งบีคอนอัตโนมัติครั้งเดียว
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 3 ปี 2023
การกำหนดค่าเฟรมที่มีการ Fenced แบบอนุกรม
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 3 ปี 2023
ตัวเลือกรูปแบบเพิ่มเติมสำหรับมาโครขนาดโฆษณาของ Protected Audience
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 4 ปี 2023
บีคอนอัตโนมัติที่ส่งไปยัง URL ที่ลงทะเบียนไว้ทั้งหมด
ปัญหาเกี่ยวกับ GitHub | ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 4 ปี 2023
เปิดใช้การออกจากกลุ่มความสนใจของโฆษณาจาก iframe และเฟรมคอมโพเนนต์โฆษณา
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 1 ปี 2024
แนะนำ Reserve.top_navigation_start/commit
ปัญหาเกี่ยวกับ GitHub, ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 1 ปี 2024
อย่าปิดใช้การตั้งค่าคุกกี้ใน ReportEvent จนกว่า 3PCD
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 1 ปี 2024
เพิ่มการรองรับบีคอนอัตโนมัติในเฟรมย่อยแบบข้ามต้นทาง
ปัญหาเกี่ยวกับ GitHub
พร้อมใช้งานใน Chrome ในไตรมาสที่ 1 ปี 2024

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

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

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

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

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

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

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

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

การเปรียบเทียบสถานะของการแบ่งพื้นที่เก็บข้อมูลก่อนและหลัง

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

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

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

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

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

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

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

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

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

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

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

ดูรายละเอียดเพิ่มเติมเกี่ยวกับลักษณะของเฟรมที่มีรั้วในผู้อธิบาย

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

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

ฟีเจอร์ iframe fencedframe
ฝังเนื้อหา ใช่ ใช่
เนื้อหาที่ฝังสามารถเข้าถึง DOM บริบทที่ฝังได้ ใช่ ไม่ได้
บริบทการฝังสามารถเข้าถึง DOM ของเนื้อหาที่ฝังได้ ใช่ ไม่ได้
แอตทริบิวต์ที่สังเกตได้ เช่น name ใช่ ไม่ได้
URL (http://example.com) ใช่ ได้ (ขึ้นอยู่กับ Use Case)
แหล่งที่มาแบบทึบแสงที่จัดการโดยเบราว์เซอร์ (urn:uuid) ไม่ได้ ใช่
การเข้าถึงข้อมูลข้ามเว็บไซต์ ไม่ได้ มี (ขึ้นอยู่กับ Use Case)

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

เฟรมที่ล้อมรั้วจะแทนที่ iframe หรือไม่

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

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

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

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

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

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

ตัวอย่าง

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

รับการกำหนดค่าเฟรมที่มีการปิดกั้นจากการประมูล Protected Audience API
const frameConfig = await navigator.runAdAuction({
  // ...auction configuration
  resolveToConfig: true
});
รับการกำหนดค่าเฟรมที่มีการปิดกั้นจากการเลือก URL ของพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน
const frameConfig = await sharedStorage.selectURL('operation-name', {
  resolveToConfig: true
});

เมื่อได้รับการกำหนดค่าแล้ว คุณจะกำหนดการกำหนดค่าให้กับแอตทริบิวต์ config ของเฟรมที่มีการปิดกั้นเพื่อไปยังส่วนต่างๆ ของเฟรมไปยังทรัพยากรที่การกำหนดค่าดังกล่าวแสดงได้ Chrome เวอร์ชันเก่าไม่รองรับพร็อพเพอร์ตี้ resolveToConfig คุณจึงต้องยืนยันว่าคําสัญญาปิดไปยัง 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

บริบทพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน

คุณอาจต้องใช้การรวมส่วนตัวเพื่อรายงานข้อมูลระดับเหตุการณ์ในเฟรมที่มีการปิดกั้นซึ่งเชื่อมโยงกับข้อมูลบริบทจากตัวฝัง เมื่อใช้เมธอด fencedFrameConfig.setSharedStorageContext() คุณจะสามารถส่งข้อมูลบริบทบางอย่าง เช่น รหัสเหตุการณ์ จากผู้ฝังไปยัง Worklet พื้นที่เก็บข้อมูลที่แชร์ซึ่งเริ่มต้นโดย Protected Audience 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;

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

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.sendHistogramReport({
      bucket: convertEventIdToBucket(eventId),
      value: convertEventPayloadToValue(eventPayload)
    });
  }
}

register('send-report', ReportingOperation);

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

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

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

ในการทดลองของ Chrome ให้ตั้งค่าเป็น &quot;เปิดใช้&quot; สำหรับแฟล็กชื่อ &quot;เปิดใช้องค์ประกอบเฟรมที่มีการปิดกั้น&quot;

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

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

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

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

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

วิธีตรวจสอบว่ามีการกำหนดค่าเฟรมที่มีการปิดกั้นพร้อมใช้งานหรือไม่ js if (window.FencedFrameConfig && frameConfig instanceof FencedFrameConfig) { // The fenced frame config is available }

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

องค์ประกอบ <fencedframe> ยังคงอยู่ในโหมดทดลอง จึงมีการรองรับตั้งแต่ Chrome 97 เป็นต้นไป แต่ปัจจุบันเบราว์เซอร์อื่นยังไม่รองรับ

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

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

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