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

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

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

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

• ตอนนี้ข้อเสนอเฟรมที่มีการปิดกั้นมีเวอร์ชันสำหรับผู้ใช้ทั่วไปแล้ว
• สถานะ Chrome Platform

ข้อเสนอ	สถานะ
การเปลี่ยนแปลง 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 พื้นที่เก็บข้อมูลของเบราว์เซอร์จะถูกแชร์เนื่องจากถือเป็นเว็บไซต์เดียวกัน

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

ใช้งานข้อมูลข้ามเว็บไซต์

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

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

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

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

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

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

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

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

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

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

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

เฟรมที่มีการควบคุมต่างจาก iframe อย่างไร

เมื่อคุณรู้แล้วว่าเฟรมแบบ Fenced นั้นทำอะไรได้บ้างและไม่ควรทำแล้ว ข้อดีคือลองเปรียบเทียบ ฟีเจอร์ iframe ที่มีอยู่

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

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

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

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

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

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

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

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

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

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

ตัวอย่าง

หากต้องการรับออบเจ็กต์ 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 ก่อนที่จะไปยังส่วนต่างๆ

กำหนดค่าเป็นแอตทริบิวต์ Fenced Frame

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 เพื่อให้โหลดเอกสารในเฟรมที่มีการปิดกั้น ส่วนหัวจะต้องมีอยู่ใน iframe ภายในเฟรมที่มีการปิดกั้นด้วย

Supports-Loading-Mode: fenced-frame

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

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

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

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

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

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

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

• GitHub: อ่านวิดีโออธิบาย ระดมคำถามและติดตาม การสนทนา
• การสนับสนุนนักพัฒนาแอป: ถามคำถามและเข้าร่วมการสนทนาใน ทีมสนับสนุนนักพัฒนาแอป Privacy Sandbox ที่เก็บ

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

• สถานะแพลตฟอร์ม Chrome
• กะพริบตาเป็น ต้นแบบ