ฝังเนื้อหาลงในหน้าเว็บได้อย่างปลอดภัยโดยไม่ต้องแชร์ข้อมูลข้ามเว็บไซต์
สถานะการใช้งาน
เอกสารนี้ระบุองค์ประกอบ 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
ระบบจะแชร์พื้นที่เก็บข้อมูลของเบราว์เซอร์เนื่องจากถือว่า iframe เหล่านี้เป็นเว็บไซต์เดียวกัน
ระบบจะใช้การแบ่งพาร์ติชันพื้นที่เก็บข้อมูลกับ API พื้นที่เก็บข้อมูลมาตรฐาน ซึ่งรวมถึง LocalStorage, IndexedDB และคุกกี้ ในโลกที่มีการแบ่งพาร์ติชัน การรั่วไหลของข้อมูลในพื้นที่เก็บข้อมูลจากบุคคลที่หนึ่งจะลดลงอย่างมาก
ทำงานกับข้อมูลข้ามเว็บไซต์
เฟรมที่มีการปิดกั้นเป็นฟีเจอร์ Privacy Sandbox ที่แนะนำเว็บไซต์ระดับบนสุดควรแบ่งพาร์ติชันข้อมูล ข้อเสนอและ API ของ Privacy Sandbox จำนวนมากมีจุดประสงค์เพื่อตอบสนอง Use Case ข้ามเว็บไซต์โดยไม่ต้องใช้คุกกี้ของบุคคลที่สามหรือกลไกการติดตามอื่นๆ เช่น
- Protected Audience API ช่วยให้แสดงโฆษณาตามความสนใจในลักษณะที่รักษาความเป็นส่วนตัว
- พื้นที่เก็บข้อมูลที่ใช้ร่วมกันช่วยให้เข้าถึงข้อมูลข้ามเว็บไซต์ที่ไม่ได้แบ่งพาร์ติชันในสภาพแวดล้อมที่ปลอดภัยได้
ลองพิจารณาวิธีที่เฟรมที่มีการปิดกั้นสามารถทำงานร่วมกับ 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 ที่เป็นไปได้อยู่ระหว่างการหารือ
ผู้สมัครปัจจุบันสำหรับชุดค่าผสมนี้ ได้แก่
- จากกลุ่ม TURTLEDOVE API (ซึ่งเป็นพื้นฐานของ Protected Audience API) เฟรมที่มีการปิดกั้นสามารถใช้ร่วมกับการวัด Conversion Lift โดยใช้พื้นที่เก็บข้อมูลที่ใช้ร่วมกันได้
- อีกตัวเลือกหนึ่งคือการอนุญาตให้เฟรมที่มีการปิดกั้นเป็นอ่านอย่างเดียวหรือเข้าถึงพื้นที่เก็บข้อมูลที่ไม่ได้แบ่งพาร์ติชัน
ดูรายละเอียดเพิ่มเติมได้ที่คำอธิบายกรณีการใช้งานของ Fenced Frame
ตัวอย่าง
หากต้องการรับออบเจ็กต์ 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
คุณจึงต้องยืนยันว่าคําสัญญาปิดไปยัง 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.contributeToHistogram({
bucket: convertEventIdToBucket(eventId),
value: convertEventPayloadToValue(eventPayload)
});
}
}
register('send-report', ReportingOperation);
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับบริบทของผู้ฝังในออบเจ็กต์การกำหนดค่าเฟรมที่มีการปิดกั้น โปรดดูโปรแกรมอธิบาย
ลองใช้เฟรมที่มีการปิดกั้น
ใช้ Chrome Flag เพื่อเปิดใช้ 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