ควบคุมฟีเจอร์ของเบราว์เซอร์ด้วยนโยบายสิทธิ์

จัดการวิธีที่หน้าเว็บและ iframe ของบุคคลที่สามในหน้าเว็บของคุณเข้าถึงฟีเจอร์ของเบราว์เซอร์

Kevin K. Lee
Kevin K. Lee

นโยบายสิทธิ์หรือที่ก่อนหน้านี้เรียกว่านโยบายฟีเจอร์ช่วยให้นักพัฒนาซอฟต์แวร์สามารถควบคุมฟีเจอร์ของเบราว์เซอร์ที่มีในหน้า, iframe และทรัพยากรย่อยด้วยการประกาศชุดนโยบายสำหรับเบราว์เซอร์ที่จะบังคับใช้ ระบบจะใช้นโยบายเหล่านี้กับต้นทางที่ระบุไว้ในรายการต้นทางของส่วนหัวการตอบกลับ รายการต้นทางอาจมีต้นทางเดียวกันและ/หรือต้นทางที่ต่างกัน และช่วยให้นักพัฒนาซอฟต์แวร์ควบคุมการเข้าถึงฟีเจอร์เบราว์เซอร์ของบุคคลที่หนึ่งและบุคคลที่สามได้

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

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

การเปลี่ยนแปลงนโยบายสิทธิ์

นโยบายสิทธิ์เดิมเรียกว่านโยบายฟีเจอร์ แนวคิดหลักยังคงเหมือนเดิม แต่มีการเปลี่ยนแปลงที่สำคัญบางประการไปพร้อมกับชื่อ

การใช้งานช่องที่มีโครงสร้าง

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

เก่า
  geolocation 'self' https://example.com; camera 'none'

ก่อนหน้านี้คือนโยบายฟีเจอร์

ใหม่
  geolocation=(self "https://example.com"), camera=()

ตอนนี้มีนโยบายสิทธิ์แล้ว

รวมส่วนหัวเข้ากับแอตทริบิวต์ allow ของ iframe

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

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

คุณยังคงใช้นโยบายฟีเจอร์ได้หลังจาก Chrome 88 แต่นโยบายนี้จะทำหน้าที่เป็นชื่อแทนของนโยบายสิทธิ์ นอกเหนือจากไวยากรณ์แล้ว ก็ไม่ได้มีความแตกต่างด้านตรรกะเช่นกัน หากใช้ทั้งส่วนหัวนโยบายสิทธิ์และส่วนหัวนโยบายฟีเจอร์ร่วมกัน ส่วนหัว Permissions-Policy จะมีลำดับความสำคัญสูงกว่า และเขียนทับค่าที่ระบุโดยส่วนหัว Feature-Policy

ฉันจะใช้นโยบายสิทธิ์ได้อย่างไร

ภาพรวมคร่าวๆ

ก่อนที่จะลงลึกกัน เรามาลองดูสถานการณ์ทั่วไปที่คุณเป็นเจ้าของเว็บไซต์และต้องการควบคุมวิธีที่เว็บไซต์และโค้ดของบุคคลที่สามใช้ฟีเจอร์เบราว์เซอร์กัน

  • เว็บไซต์ของคุณคือ https://your-site.example
  • เว็บไซต์ของคุณฝัง iframe จากต้นทางเดียวกัน (https://your-site.example)
  • เว็บไซต์ฝัง iframe จาก https://trusted-site.example ที่คุณเชื่อถือ
  • เว็บไซต์ของคุณยังแสดงโฆษณาที่แสดงโดย https://ad.example ด้วย
  • คุณต้องการอนุญาตตำแหน่งทางภูมิศาสตร์เฉพาะสำหรับเว็บไซต์ของคุณและเว็บไซต์ที่เชื่อถือได้เท่านั้น ไม่ใช่สำหรับโฆษณา

ในกรณีนี้ ให้ใช้ส่วนหัวต่อไปนี้

Permissions-Policy: geolocation=(self "https://trusted-site.example")

และตั้งค่าแอตทริบิวต์ allow เป็นแท็ก iframe สำหรับเว็บไซต์ที่เชื่อถือได้อย่างชัดแจ้ง ดังนี้

<iframe src="https://trusted-site.example" allow="geolocation">

ภาพรวมคร่าวๆ ของการใช้นโยบายสิทธิ์

ในตัวอย่างนี้ รายการต้นทางของส่วนหัวอนุญาตให้เฉพาะเว็บไซต์ของคุณ (self) และ trusted-site.example เท่านั้นที่ใช้ฟีเจอร์ตำแหน่งทางภูมิศาสตร์ได้ ad.example ไม่ได้รับอนุญาตให้ใช้ตำแหน่งทางภูมิศาสตร์

  1. เว็บไซต์ your-site.example ของคุณได้รับอนุญาตให้ใช้ฟีเจอร์ตำแหน่งทางภูมิศาสตร์โดยต้องได้รับความยินยอมจากผู้ใช้
  2. iframe ต้นทางเดียวกัน (your-site.example) ได้รับอนุญาตให้ใช้ฟีเจอร์นี้โดยไม่ต้องใช้แอตทริบิวต์ allow
  3. ระบบจะบล็อกไม่ให้ iframe ที่แสดงจากโดเมนย่อยอื่น (subdomain.your-site-example) ซึ่งไม่ได้เพิ่มลงในรายการต้นทาง และมีการตั้งค่าแอตทริบิวต์ allow ในแท็ก iframe นั้นใช้ฟีเจอร์นี้ โดเมนย่อยที่แตกต่างกันจะถือว่าอยู่ในเว็บไซต์เดียวกันแต่มาจากแหล่งที่มาต่างกัน
  4. ระบบอนุญาตให้ iframe ข้ามแหล่งที่มา (trusted-site.example) ที่เพิ่มลงในรายการแหล่งที่มาและมีการตั้งค่าแอตทริบิวต์ allow ในแท็ก iframe ใช้ฟีเจอร์นี้ได้
  5. iframe แบบข้ามต้นทาง (trusted-site.example) ที่เพิ่มลงในรายการต้นทางโดยไม่มีแอตทริบิวต์ allow จะถูกบล็อกไม่ให้ใช้ฟีเจอร์นี้
  6. ระบบจะบล็อก iframe ข้ามแหล่งที่มา (ad.example) ที่ไม่ได้เพิ่มลงในรายการแหล่งที่มาไม่ให้ใช้ฟีเจอร์นี้ แม้ว่าจะมีแอตทริบิวต์ allow รวมอยู่ในแท็ก iframe ก็ตาม

Permissions-Policy ส่วนหัวการตอบกลับ HTTP

ผู้ใช้ส่งคําขอ เซิร์ฟเวอร์ตอบกลับด้วยส่วนหัวนโยบายสิทธิ์ จากนั้นเบราว์เซอร์จะให้สิทธิ์เข้าถึงตามส่วนหัวนั้น

Permissions-Policy: <feature>=(<token>|<origin(s)>)

ใช้ส่วนหัว Permissions-Policy ในการตอบกลับจากเซิร์ฟเวอร์เพื่อตั้งค่าต้นทางที่อนุญาตสําหรับฟีเจอร์ ค่าของส่วนหัวจะใช้โทเค็นและสตริงของต้นทางผสมกันได้ โทเค็นที่ใช้ได้คือ * สำหรับทุกต้นทางและ self สำหรับต้นทางเดียวกัน

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

ตัวอย่างคู่คีย์-ค่ามีดังนี้

  • ไวยากรณ์: [FEATURE]=*
    • นโยบายที่มีผลกับทุกต้นทาง
    • ตัวอย่าง: geolocation=*
  • ไวยากรณ์: [FEATURE]=(self)
    • นโยบายที่ใช้กับต้นทางเดียวกัน
    • ตัวอย่าง: geolocation=(self)
  • ไวยากรณ์: [FEATURE]=(self [ORIGIN(s)])
    • นโยบายที่ใช้กับต้นทางเดียวกันและต้นทางที่ระบุ
    • ตัวอย่าง: geolocation=(self "https://a.example" "https://b.example")
    • self เป็นชื่อย่อของ https://your-site.example
  • ไวยากรณ์: [FEATURE]=([ORIGIN(s)])
    • นโยบายที่ใช้กับต้นทางเดียวกันและต้นทางที่ระบุ
    • ตัวอย่าง: geolocation=("https://your-site.example" "https://a.example" "https://b.example")
    • เมื่อใช้ไวยากรณ์นี้ หนึ่งในต้นทางควรเป็นต้นทางของเครื่องมือฝัง หากหน้าเว็บที่ฝังไม่ได้รับสิทธิ์ ระบบจะบล็อก iframe ที่ฝังอยู่ในหน้านั้นด้วย แม้ว่าจะเพิ่มลงในรายการต้นทางแล้วก็ตาม เนื่องจากนโยบายสิทธิ์จะมอบสิทธิ์ หรือคุณจะใช้โทเค็น self ก็ได้
  • ไวยากรณ์: [FEATURE]=()
    • ฟีเจอร์ถูกบล็อกสำหรับทุกต้นทาง
    • ตัวอย่าง: geolocation=()

โดเมนย่อยและเส้นทางที่แตกต่างกัน

โดเมนย่อยที่แตกต่างกัน เช่น https://your-site.example และ https://subdomain.your-site.example จะถือว่าอยู่ในเว็บไซต์เดียวกันแต่ต่างแหล่งที่มา ดังนั้น การเพิ่มโดเมนย่อยในรายการต้นทางจะไม่อนุญาตให้เข้าถึงโดเมนย่อยอื่นของเว็บไซต์เดียวกัน โดเมนย่อยที่ฝังไว้ทุกรายการที่ต้องการใช้ฟีเจอร์นี้ต้องเพิ่มลงในรายการต้นทางแยกกัน ตัวอย่างเช่น หากมีการอนุญาตให้เข้าถึงหัวข้อการท่องเว็บของผู้ใช้จากต้นทางเดียวกันเท่านั้นที่มีส่วนหัว Permissions-Policy: browsing-topics=(self) นั้น iframe จากโดเมนย่อยอื่นของเว็บไซต์เดียวกัน https://subdomain.your-site.example จะไม่มีสิทธิ์เข้าถึงหัวข้อดังกล่าว

เส้นทางที่แตกต่างกัน เช่น https://your-site.example และ https://your-site.example/embed จะถือว่ามีต้นทางเดียวกัน และไม่จำเป็นต้องระบุเส้นทางที่แตกต่างกันในรายการต้นทาง

แอตทริบิวต์ของ iframe allow

การตั้งค่า iframe

สําหรับการใช้งานข้ามแหล่งที่มา iframe ต้องมีแอตทริบิวต์ allow ในแท็กจึงจะเข้าถึงฟีเจอร์นี้ได้

ไวยากรณ์: <iframe src="[ORIGIN]" allow="[FEATURE] <'src' | [ORIGIN(s)]"></iframe>

เช่น

<iframe src="https://trusted-site.example" allow="geolocation">

จัดการการนำทางของ iframe

การตั้งค่าการไปยังส่วนต่างๆ ใน iframe

โดยค่าเริ่มต้น หาก iframe ไปยังต้นทางอื่น ระบบจะไม่นำนโยบายไปใช้กับต้นทางที่ iframe ไปยัง เมื่อระบุต้นทางที่ iframe ไปยังแอตทริบิวต์ allow นโยบายสิทธิ์ที่ใช้กับ iframe ต้นฉบับจะมีผลกับต้นทางที่ iframe ไปยังปลายทาง

<iframe src="https://trusted-site.example" allow="geolocation https://trusted-site.example https://trusted-navigated-site.example">

คุณสามารถดูการทํางานได้โดยไปที่การสาธิตการไปยังส่วนต่างๆ ใน iframe

ตัวอย่างการตั้งค่านโยบายสิทธิ์

ดูตัวอย่างการตั้งค่าต่อไปนี้ได้ในเดโม

อนุญาตฟีเจอร์ในทุกต้นทางแล้ว

สถาปัตยกรรมของต้นทางทั้งหมดที่ได้รับอนุญาตให้เข้าถึงฟีเจอร์

Permissions-Policy: geolocation=*
<iframe src="https://trusted-site.example" allow="geolocation">
<iframe src="https://ad.example" allow="geolocation">

เมื่อตั้งค่ารายการต้นทางเป็นโทเค็น * ระบบจะอนุญาตให้ใช้ฟีเจอร์นี้กับต้นทางทั้งหมดในหน้าเว็บ ซึ่งรวมถึงต้นทางนั้นเองและ iframe ทั้งหมด ในตัวอย่างนี้ โค้ดทั้งหมดที่ให้บริการจาก https://your-site.example และรหัสที่แสดงจาก https://trusted-site.example iframe และ https://ad.example มีสิทธิ์เข้าถึงฟีเจอร์ตำแหน่งทางภูมิศาสตร์ในเบราว์เซอร์ของผู้ใช้ โปรดทราบว่าต้องตั้งค่าแอตทริบิวต์ allow ใน iframe เองด้วย พร้อมกับเพิ่มต้นทางลงในรายการต้นทางของส่วนหัว

การตั้งค่านี้จะแสดงในเดโม

ฟีเจอร์ที่อนุญาตในต้นทางเดียวกันเท่านั้น

สถาปัตยกรรมจากต้นทางเดียวกันเท่านั้นที่ได้รับอนุญาตให้เข้าถึงฟีเจอร์

Permissions-Policy: geolocation=(self)

การใช้โทเค็น self อนุญาตให้ใช้ตำแหน่งทางภูมิศาสตร์กับต้นทางเดียวกันเท่านั้น ข้ามต้นทางจะไม่มีสิทธิ์เข้าถึงฟีเจอร์นี้ ในตัวอย่างนี้ เฉพาะ https://trusted-site.example (self) เท่านั้นที่มีสิทธิ์เข้าถึงตำแหน่งทางภูมิศาสตร์ ใช้ไวยากรณ์นี้หากต้องการใช้ฟีเจอร์นี้กับหน้าเว็บของคุณเท่านั้น

ดูการตั้งค่านี้ได้ในการสาธิต

ฟีเจอร์ที่อนุญาตในต้นทางเดียวกันและต้นทางที่ต่างกัน

สถาปัตยกรรมของต้นทางที่ระบุซึ่งได้รับอนุญาตให้เข้าถึงฟีเจอร์

Permissions-Policy: geolocation=(self "https://trusted-site.example")

ไวยากรณ์นี้อนุญาตให้ใช้ตำแหน่งทางภูมิศาสตร์ได้ทั้งกับตัวเอง (https://your-site.example) และ https://trusted-site.example อย่าลืมเพิ่มแอตทริบิวต์ allow ลงในแท็ก iframe อย่างชัดแจ้ง หากมี iframe อื่นที่มี <iframe src="https://ad.example" allow="geolocation"> https://ad.example จะไม่มีสิทธิ์เข้าถึงฟีเจอร์ตำแหน่งทางภูมิศาสตร์ เฉพาะหน้าเว็บต้นฉบับและ https://trusted-site.example ที่แสดงในรายการต้นทางพร้อมกับมีแอตทริบิวต์ allow ในแท็ก iframe เท่านั้นที่จะมีสิทธิ์เข้าถึงฟีเจอร์ของผู้ใช้

ดูการตั้งค่านี้ได้ในการสาธิต

ฟีเจอร์ถูกบล็อกในต้นทางทั้งหมด

สถาปัตยกรรมของต้นทางทั้งหมดที่ถูกบล็อกไม่ให้เข้าถึงฟีเจอร์

Permissions-Policy: geolocation=()

หากรายการต้นทางว่างเปล่า ระบบจะบล็อกฟีเจอร์นี้สำหรับต้นทางทั้งหมด การตั้งค่านี้จะแสดงในเดโม

ใช้ JavaScript API

ระบบพบว่า JavaScript API ที่มีอยู่ของนโยบายฟีเจอร์เป็นออบเจ็กต์ในเอกสารหรือองค์ประกอบ (document.featurePolicy or element.featurePolicy) ยังไม่มีการใช้งาน JavaScript API สำหรับนโยบายสิทธิ์

Feature Policy API สามารถใช้กับนโยบายที่ตั้งค่าโดยนโยบายสิทธิ์ได้โดยมีข้อจํากัดบางอย่าง มีคําถามที่เหลือเกี่ยวกับการติดตั้งใช้งาน JavaScript API และเราได้จัดทำข้อเสนอเพื่อย้ายตรรกะไปยัง Permissions API แล้ว เข้าร่วมการสนทนาหากมีความคิดเห็น

featurePolicy.allowsFeature(feature)

  • แสดงผลเป็น true หากฟีเจอร์ได้รับอนุญาตให้ใช้กับต้นทางเริ่มต้น
  • ลักษณะการทำงานนี้จะเหมือนกันในทั้ง 2 นโยบายที่นโยบายสิทธิ์และนโยบายฟีเจอร์ก่อนหน้ากำหนดไว้
  • เมื่อเรียกใช้ allowsFeature() ในองค์ประกอบ iframe (iframeEl.featurePolicy.allowsFeature('geolocation')) ค่าที่แสดงผลจะแสดงถึงการตั้งค่าแอตทริบิวต์ allow ใน iframe

featurePolicy.allowsFeature(feature, origin)

  • แสดงผลเป็น true หากฟีเจอร์ได้รับอนุญาตสําหรับต้นทางที่ระบุ
  • หากเรียกใช้เมธอดใน document เมธอดนี้จะไม่ได้บอกคุณอีกต่อไปว่าฟีเจอร์ได้รับอนุญาตสําหรับต้นทางที่ระบุหรือไม่ ตามที่นโยบายฟีเจอร์เคยทํา แต่ตอนนี้วิธีนี้จะบอกคุณว่าฟีเจอร์นี้อาจได้รับอนุญาตสำหรับต้นทางดังกล่าว คุณต้องตรวจสอบเพิ่มเติมว่า iframe มีการตั้งค่าแอตทริบิวต์ allow หรือไม่ นักพัฒนาซอฟต์แวร์ต้องดำเนินการตรวจสอบแอตทริบิวต์ allow เพิ่มเติมในองค์ประกอบ iframe เพื่อระบุว่าฟีเจอร์นี้ได้รับอนุญาตสำหรับต้นทางของบุคคลที่สามหรือไม่

ตรวจสอบฟีเจอร์ใน iframe ด้วยออบเจ็กต์ element

คุณสามารถใช้ element.allowsFeature(feature) ที่พิจารณาแอตทริบิวต์ allow ต่างจาก document.allowsFeature(feature, origin) ที่ไม่พิจารณา

const someIframeEl = document.getElementById('some-iframe')
const isCameraFeatureAllowed = someIframeEl.featurePolicy.allowsFeature('camera')

featurePolicy.allowedFeatures()

  • แสดงรายการฟีเจอร์ที่อนุญาตสําหรับการใช้งานต้นทางเริ่มต้น
  • ลักษณะการทำงานนี้จะเหมือนกันในทั้ง 2 นโยบายที่นโยบายสิทธิ์และนโยบายฟีเจอร์กำหนดไว้
  • เมื่อโหนดที่เชื่อมโยงเป็น iframe ระบบจะพิจารณาแอตทริบิวต์ allow

featurePolicy.features()

  • แสดงรายการฟีเจอร์ที่มีในเบราว์เซอร์
  • ลักษณะการทำงานจะเหมือนกันสำหรับทั้ง 2 นโยบายที่กำหนดโดยนโยบายสิทธิ์และนโยบายฟีเจอร์

การผสานรวมกับเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

การผสานรวม Chrome DevTools กับนโยบายสิทธิ์

ดูวิธีการทำงานของนโยบายสิทธิ์ในเครื่องมือสำหรับนักพัฒนาเว็บ

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

การย้ายข้อมูลจาก Feature-Policy

หากใช้ส่วนหัว Feature-Policy อยู่ ให้ทำตามขั้นตอนต่อไปนี้เพื่อย้ายข้อมูลไปยังนโยบายสิทธิ์

แทนที่ส่วนหัวของนโยบายฟีเจอร์ด้วยส่วนหัวของนโยบายสิทธิ์

เนื่องจากส่วนหัวนโยบายฟีเจอร์จะใช้ได้ในเบราว์เซอร์แบบ Chromium เท่านั้น และรองรับส่วนหัวนโยบายสิทธิ์ตั้งแต่ Chrome 88 คุณจึงอัปเดตส่วนหัวที่มีอยู่ได้อย่างปลอดภัยด้วยนโยบายสิทธิ์

เก่า
Feature-Policy:
  autoplay *;
  geolocation 'self';
  camera 'self' 'https://trusted-site.example';
  fullscreen 'none';

ก่อนหน้านี้คือนโยบายฟีเจอร์

ใหม่
Permissions-Policy:
  autoplay=*,
  geolocation=(self),
  camera=(self "https://trusted-site.example"),
  fullscreen=()

มาพร้อมกับนโยบายสิทธิ์

อัปเดตการใช้งาน document.allowsFeature(feature, origin)

หากคุณใช้เมธอด document.allowsFeature(feature, origin) เพื่อตรวจสอบฟีเจอร์ที่อนุญาตสําหรับ iframe ให้ใช้เมธอด allowsFeature(feature) ที่แนบมากับองค์ประกอบ iframe ไม่ใช่ document ที่มี วิธีการ element.allowsFeature(feature) พิจารณาแอตทริบิวต์ allow แต่ document.allowsFeature(feature, origin) ไม่ได้พิจารณา

ตรวจสอบสิทธิ์เข้าถึงฟีเจอร์กับ document

หากต้องการใช้ document เป็นโหนดฐานต่อไป คุณต้องดำเนินการตรวจสอบแอตทริบิวต์ allow ในแท็ก iframe เพิ่มเติม

<iframe id="some-iframe" src="https://example.com" allow="camera"></iframe>
Permissions-Policy: camera=(self "https://example.com")
const isCameraPolicySet = document.featurePolicy.allowsFeature('camera', 'https://example.com')

const someIframeEl = document.getElementById('some-iframe')
const hasCameraAttributeValue = someIframeEl.hasAttribute('allow')
&& someIframeEl.getAttribute('allow').includes('camera')

const isCameraFeatureAllowed = isCameraPolicySet && hasCameraAttributeValue

เราขอแนะนำให้เรียกใช้ allowsFeature() บนออบเจ็กต์ element แทนการอัปเดตโค้ดที่มีอยู่โดยใช้ document ดังตัวอย่างก่อนหน้า

Reporting API

Reporting API มีกลไกการรายงานสําหรับเว็บแอปพลิเคชันอย่างสอดคล้องกัน และ Reporting API สําหรับการละเมิดนโยบายสิทธิ์มีให้บริการเป็นฟีเจอร์ทดลอง

หากคุณต้องการทดสอบฟีเจอร์ทดลอง ให้ทำตามคำแนะนำแบบทีละขั้นและเปิดใช้การตั้งค่าสถานะใน chrome://flags/#enable-experimental-web-platform-features เมื่อเปิดใช้ธง คุณจะเห็นการละเมิดนโยบายสิทธิ์ในเครื่องมือสำหรับนักพัฒนาเว็บในแท็บแอปพลิเคชัน ดังนี้

ตัวอย่างต่อไปนี้แสดงวิธีสร้างส่วนหัวของ Reporting API

Reporting-Endpoints: main-endpoint="https://reports.example/main", default="https://reports.example/default"

Content-Security-Policy: script-src 'self'; object-src 'none'; report-to main-endpoint;
Document-Policy: document-write=?0; report-to=main-endpoint;

ในการใช้งานปัจจุบัน คุณจะได้รับรายงานการละเมิดนโยบายจากการละเมิดใดๆ ที่เกิดขึ้นภายในเฟรมนั้นด้วยการกำหนดค่าปลายทางชื่อ "default" ดังตัวอย่างก่อนหน้านี้ เฟรมย่อยจะต้องมีการกําหนดค่าการรายงานของตนเอง

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

หากต้องการทําความเข้าใจนโยบายสิทธิ์อย่างละเอียด โปรดดูแหล่งข้อมูลต่อไปนี้