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

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

Kevin K. Lee
Kevin K. Lee
X GitHub

นโยบายสิทธิ์หรือที่ก่อนหน้านี้เรียกว่านโยบายฟีเจอร์ ช่วยให้นักพัฒนาซอฟต์แวร์สามารถ ควบคุมฟีเจอร์ของเบราว์เซอร์ที่หน้าเว็บ มี 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) ที่ไม่ได้เพิ่มลงในรายการต้นทางและมีการตั้งค่าแอตทริบิวต์อนุญาตในแท็ก iframe จะถูกบล็อกไม่ให้ใช้ฟีเจอร์นี้ โดเมนย่อยต่างๆ จะถือว่าเป็นเว็บไซต์เดียวกันแต่เป็นแบบข้ามต้นทาง
  4. iframe แบบข้ามต้นทาง (trusted-site.example) ที่เพิ่มลงในรายการต้นทางและมีการตั้งค่าแอตทริบิวต์ allow ในแท็ก iframe จะใช้ฟีเจอร์นี้ได้
  5. iframe แบบข้ามต้นทาง (trusted-site.example) ที่เพิ่มลงในรายการต้นทางโดยไม่มีแอตทริบิวต์ allow จะถูกบล็อกไม่ให้ใช้ฟีเจอร์นี้
  6. iframe แบบข้ามต้นทาง (ad.example) ซึ่งไม่ได้เพิ่มในรายการต้นทางจะถูกบล็อกไม่ให้ใช้ฟีเจอร์นี้ แม้ว่าแอตทริบิวต์ allow จะรวมอยู่ในแท็ก iframe ก็ตาม

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

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

Permissions-Policy: &lt;feature&gt;=(&lt;token&gt;|&lt;origin(s)&gt;)

ใช้ส่วนหัว 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 มีสิทธิ์เข้าถึงฟีเจอร์ตำแหน่งทางภูมิศาสตร์ในเบราว์เซอร์ของผู้ใช้ โปรดทราบว่าต้องตั้งค่าแอตทริบิวต์อนุญาตใน 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 อย่าลืมเพิ่มแอตทริบิวต์อนุญาตลงในแท็ก 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 สำหรับนโยบายสิทธิ์

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

featurePolicy.allowsFeature(feature)

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

featurePolicy.allowsFeature(ฟีเจอร์, ต้นทาง)

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

ตรวจสอบฟีเจอร์ใน iframe ที่มีออบเจ็กต์ element

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

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

featurePolicy.allowedFeatures()

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

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) จะพิจารณาแอตทริบิวต์อนุญาต แต่ 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 มีกลไกการรายงานสำหรับเว็บแอปพลิเคชันที่สอดคล้องกัน และ 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;

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

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

โปรดศึกษาแหล่งข้อมูลต่อไปนี้เพื่อทำความเข้าใจเกี่ยวกับนโยบายสิทธิ์ให้ลึกซึ้งยิ่งขึ้น