ฝังเนื้อหาลงในหน้าเว็บอย่างปลอดภัยโดยไม่ต้องแชร์ข้อมูลข้ามเว็บไซต์
สถานะการใช้งาน
เอกสารนี้แสดงองค์ประกอบ HTML ใหม่: <fencedframe>
- ตอนนี้ข้อเสนอเฟรมที่มีการปิดกั้นมีเวอร์ชันสำหรับผู้ใช้ทั่วไปแล้ว
- สถานะ Chrome Platform
Proposal | Status |
---|---|
Web API changes for urn to config Explainer |
Available in Chrome in Q1 2023. |
Creative Macros in Fenced Frames for Ads Reporting (FFAR) GitHub Issue |
Available in Chrome in Q3 2023. |
Send Automatic Beacons Once GitHub Issue |
Available in Chrome in Q3 2023. |
Serializable Fenced Frames Configs GitHub Issue |
Available in Chrome in Q3 2023. |
Additional Format Option for Protected Audience Ad Size Macros GitHub Issue |
Available in Chrome in Q4 2023. |
Automatic beacons sending to all registered URLs GitHub Issue | GitHub Issue |
Available in Chrome in Q4 2023. |
Enable Leaving Ad Interest Groups from Urn iFrames and Ad Component Frames
GitHub issue |
Available in Chrome in Q1 2024 |
Introduce reserved.top_navigation_start/commit
GitHub issue, GitHub issue |
Available in Chrome in Q1 2024 |
Do Not Disable Cookie Setting in ReportEvent until 3PCD
GitHub issue |
Available in Chrome in Q1 2024 |
Add support for automatic beacons in cross-origin subframes
GitHub issue |
Available in Chrome in Q1 2024 |
Allow Cross-Origin Subframes to Send reportEvent() Beacons
GitHub issue |
Available in Chrome in Q2 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 เท่านั้น
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; }
ดูข้อมูลเพิ่มเติมได้ในคำอธิบาย 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 ที่เก็บ