ข้อมูลเบื้องต้นเกี่ยวกับนโยบายคุณลักษณะ

สรุป

นโยบายฟีเจอร์ช่วยให้นักพัฒนาเว็บเลือกเปิดใช้ ปิดใช้ และ แก้ไขลักษณะการทำงานของ API และฟีเจอร์เว็บบางอย่างในเบราว์เซอร์ เหมือนกับว่า CSP แต่แทนที่จะควบคุมความปลอดภัย ควบคุมฟีเจอร์

ตัวนโยบายฟีเจอร์เป็นเพียงข้อตกลงการเลือกใช้ระหว่างนักพัฒนาแอปเพียงเล็กน้อย และเบราว์เซอร์ที่ช่วยส่งเสริมเป้าหมายในการสร้าง (และดูแลรักษา) ระดับสูงของเรา เว็บแอปที่มีคุณภาพ

บทนำ

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

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

ตัวอย่างของสิ่งที่คุณสามารถทำได้ด้วยนโยบายฟีเจอร์มีดังนี้

  • เปลี่ยนลักษณะการทำงานเริ่มต้น autoplay ในวิดีโอบนอุปกรณ์เคลื่อนที่และวิดีโอของบุคคลที่สาม
  • จำกัดเว็บไซต์ไม่ให้ใช้ API ที่มีความละเอียดอ่อน เช่น camera หรือ microphone
  • อนุญาตให้ iframe ใช้ fullscreen API
  • บล็อกการใช้ API ที่ล้าสมัย เช่น XHR พร้อมกันและ document.write()
  • ตรวจสอบว่ารูปภาพมีขนาดที่เหมาะสม (เช่น ป้องกันการข้ามเลย์เอาต์) และไม่ ใหญ่เกินไปสำหรับวิวพอร์ต (เช่น ทำให้แบนด์วิดท์ของผู้ใช้เสียเปล่า)

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

การใช้นโยบายฟีเจอร์

นโยบายฟีเจอร์ให้คุณควบคุมฟีเจอร์ได้ 2 วิธี ดังนี้

  1. ผ่านส่วนหัว HTTP ของ Feature-Policy
  2. มีแอตทริบิวต์ allow ใน iframe

วิธีที่ง่ายที่สุดในการใช้นโยบายฟีเจอร์คือการส่ง HTTP ของ Feature-Policy ส่วนหัวที่มีการตอบสนองของหน้าเว็บ ค่าของส่วนหัวนี้เป็นนโยบายหรือชุด ที่คุณต้องการให้เบราว์เซอร์ปฏิบัติตามสำหรับต้นทางที่ระบุ

Feature-Policy: <feature> <allow list origin(s)>

รายการที่อนุญาตสำหรับต้นทางอาจมีค่าที่แตกต่างกันดังนี้

  • *: อนุญาตให้ใช้ฟีเจอร์นี้ในบริบทการท่องเว็บระดับบนสุดและใน บริบทการเรียกดู (iframe)
  • 'self': อนุญาตให้ใช้ฟีเจอร์นี้ในบริบทการท่องเว็บระดับบนสุดและ บริบทการท่องเว็บที่ฝังในต้นทางเดียวกัน ไม่อนุญาตในข้ามต้นทาง เอกสารในบริบทการเรียกดูแบบซ้อน
  • 'none': ไม่อนุญาตให้ใช้ฟีเจอร์นี้ในบริบทของการท่องเว็บระดับบนสุดและ ไม่อนุญาตในบริบทการท่องเว็บที่ฝัง
  • <origin(s)>: ต้นทางที่เจาะจงเพื่อเปิดใช้นโยบาย (เช่น https://example.com)

ตัวอย่าง

สมมติว่าคุณต้องการบล็อกไม่ให้เนื้อหาทั้งหมดใช้ Geolocation API ทั่วทั้งเว็บไซต์ ซึ่งคุณสามารถทำได้โดยส่ง รายการที่อนุญาตของ 'none' สำหรับฟีเจอร์ geolocation:

Feature-Policy: geolocation 'none'

หากโค้ดหรือ iframe พยายามใช้ Geolocation API เบราว์เซอร์ บล็อก กรณีนี้จะยังคงเป็นจริงแม้ว่าผู้ใช้จะเคยให้ การอนุญาตให้แชร์ตำแหน่งของตน

วันที่ ละเมิดนโยบายตำแหน่งทางภูมิศาสตร์ที่ตั้งไว้
การละเมิดนโยบายตำแหน่งทางภูมิศาสตร์ที่ตั้งไว้

ในกรณีอื่นๆ เราขอแนะนำให้ผ่อนปรนนโยบายนี้เล็กน้อย เราสามารถทำให้ ต้นทางของเราเองที่ใช้ Geolocation API แต่ป้องกันไม่ให้ เนื้อหาของบุคคลที่สาม เข้าถึงได้จากการตั้งค่า 'self' ในรายการที่อนุญาต

Feature-Policy: geolocation 'self'

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

วิธีที่ 2 ในการใช้นโยบายฟีเจอร์คือการควบคุมเนื้อหาภายใน iframe ใช้แอตทริบิวต์ allow เพื่อระบุรายการนโยบายสำหรับ เนื้อหาที่ฝัง:

<!-- Allow all browsing contexts within this iframe to use fullscreen. -->
<iframe src="https://example.com..." allow="fullscreen"></iframe>

<!-- Equivalent to: -->
<iframe src="https://example.com..." allow="fullscreen *"></iframe>

<!-- Allow only iframe content on a particular origin to access the user's location. -->
<iframe
  src="https://another-example.com/demos/..."
  allow="geolocation https://another-example.com"
></iframe>

แล้วแอตทริบิวต์ iframe ที่มีอยู่จะเป็นอย่างไร

ฟีเจอร์ที่ควบคุมโดยนโยบายฟีเจอร์บางส่วน ในการควบคุมพฤติกรรมของตนได้ เช่น <iframe allowfullscreen> เป็นแอตทริบิวต์ที่อนุญาตให้เนื้อหา iframe ใช้องค์ประกอบ API HTMLElement.requestFullscreen() นอกจากนี้ยังมีallowpaymentrequest และ allowusermedia สำหรับการอนุญาต Payment Request API และ getUserMedia() ตามลำดับ

ลองใช้แอตทริบิวต์ allow แทนแอตทริบิวต์เก่าเหล่านี้ หากทำได้ สำหรับกรณีที่คุณต้องการการสนับสนุนแบบย้อนหลัง ความเข้ากันได้โดยใช้แอตทริบิวต์ allow ที่มีแอตทริบิวต์เดิมที่เทียบเท่า เหมาะที่สุด (เช่น <iframe allowfullscreen allow="fullscreen">) โปรดทราบว่านโยบายที่เข้มงวดกว่าจะชนะ ตัวอย่างเช่น URL ต่อไปนี้ iframe จะไม่ได้รับอนุญาตให้เข้าสู่โหมดเต็มหน้าจอเนื่องจาก allow="fullscreen 'none'" มีข้อจำกัดมากกว่า allowfullscreen:

<!-- Blocks fullscreen access if the browser supports feature policy. -->
<iframe allowfullscreen allow="fullscreen 'none'" src="..."></iframe>

การควบคุมหลายนโยบายพร้อมกัน

คุณสามารถควบคุมหลายฟีเจอร์พร้อมกันได้โดยการส่งส่วนหัว HTTP ที่มีรายการคำสั่งนโยบายแยกต่างหาก ; ดังนี้

Feature-Policy: unsized-media 'none'; geolocation 'self' https://example.com; camera *;

หรือโดยการส่งส่วนหัวแยกสำหรับแต่ละนโยบาย

Feature-Policy: unsized-media 'none'
Feature-Policy: geolocation 'self' https://example.com
Feature-Policy: camera *;

ตัวอย่างนี้จะมีผลดังต่อไปนี้

  • ไม่อนุญาตให้ใช้ unsized-media กับบริบทการเรียกดูทั้งหมด
  • ไม่อนุญาตให้ใช้ geolocation สำหรับบริบทการท่องเว็บทั้งหมด ยกเว้น ต้นทางของหน้าเว็บเองและ https://example.com
  • อนุญาตให้ camera เข้าถึงบริบทการท่องเว็บทั้งหมด

ตัวอย่าง - การตั้งค่านโยบายหลายรายการใน iframe

<!-- Blocks the iframe from using the camera and microphone
     (if the browser supports feature policy). -->
<iframe allow="camera 'none'; microphone 'none'"></iframe>

JavaScript API

ในขณะที่ Chrome 60 เพิ่มการรองรับส่วนหัว HTTP ของ Feature-Policy และ แอตทริบิวต์ allow ใน iframe มีการเพิ่ม JavaScript API ใน Chrome 74

API นี้จะช่วยให้โค้ดฝั่งไคลเอ็นต์กำหนดฟีเจอร์ที่ได้รับอนุญาตโดย หน้าเว็บ เฟรม หรือเบราว์เซอร์ คุณสามารถเข้าถึงแอปพลิเคชันอื่นๆ ได้ใน document.featurePolicy สำหรับเอกสารหลัก หรือ frame.featurePolicy สำหรับ iframe

ตัวอย่าง

ตัวอย่างด้านล่างแสดงผลลัพธ์ของการส่งนโยบายของ Feature-Policy: geolocation 'self' ในเว็บไซต์ https://example.com:

/* @return {Array<string>} List of feature policies allowed by the page. */
document.featurePolicy.allowedFeatures();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {boolean} True if the page allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature('geolocation');
// → true

/* @return {boolean} True if the provided origin allows the 'geolocation' feature. */
document.featurePolicy.allowsFeature(
  'geolocation',
  'https://another-example.com/'
);
// → false

/* @return {Array<string>} List of feature policies allowed by the browser
regardless of whether they are in force. */
document.featurePolicy.features();
// → ["geolocation", "midi",  "camera", "usb", "autoplay",...]

/* @return {Array<string>} List of origins (used throughout the page) that are
   allowed to use the 'geolocation' feature. */
document.featurePolicy.getAllowlistForFeature('geolocation');
// → ["https://example.com"]

รายการนโยบาย

แล้วฟีเจอร์ใดบ้างที่ควบคุมได้ผ่านนโยบายฟีเจอร์

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

ปัจจุบันคุณมี 2-3 วิธีในการดูว่าฟีเจอร์ใดบ้างที่ควบคุมได้

  • ดู Feature Kitchen Sink ของการสาธิต เพราะมีตัวอย่าง ของแต่ละนโยบาย ที่นำมาใช้ใน Blink ได้
  • ตรวจสอบแหล่งที่มาของ Chrome สำหรับรายการชื่อสถานที่
  • การค้นหา document.featurePolicy.allowedFeatures() ใน about:blank เพื่อหารายการ
        ["geolocation",
         "midi",
         "camera",
         "usb",
         "magnetometer",
         "fullscreen",
         "animations",
         "payment",
         "picture-in-picture",
         "accelerometer",
         "vr",
        ...
  • ไปที่ chromestatus.com เพื่อดูนโยบายที่ ใช้งานหรืออยู่ในระหว่างการพิจารณาใน Blink

หากต้องการทราบวิธีใช้นโยบายบางส่วนเหล่านี้ โปรดดู ที่เก็บ GitHub ของข้อมูลจำเพาะ ซึ่งมีคำอธิบายไม่กี่ข้อเกี่ยวกับนโยบายบางข้อ

คำถามที่พบบ่อย

ฉันจะใช้นโยบายฟีเจอร์ได้เมื่อใด

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

คุณควรใช้นโยบายอื่นๆ เช่น document-write และ sync-xhr ร่วมกับนโยบายอื่น การดูแล การเปิดใช้ตัวเลือกนี้อาจทำให้เนื้อหาของบุคคลที่สาม เช่น โฆษณาเสียหาย ใน ในทางกลับกัน นโยบายฟีเจอร์อาจเป็นการตรวจสอบสัญชาตญาณ เพื่อให้มั่นใจว่าหน้าเว็บของคุณ ไม่เคยใช้ API ที่ไม่ดีเหล่านี้เลย!

ฉันใช้นโยบายฟีเจอร์ในระหว่างการพัฒนาหรือใช้งานจริงหรือไม่

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

มีวิธีรายงานการละเมิดนโยบายไปยังเซิร์ฟเวอร์ของฉันหรือไม่

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

กฎการรับช่วงสำหรับเนื้อหา iframe คืออะไร

สคริปต์ (บุคคลที่หนึ่งหรือบุคคลที่สาม) จะรับค่านโยบายการท่องเว็บ บริบท ซึ่งหมายความว่าสคริปต์ระดับบนสุดจะรับค่านโยบายของเอกสารหลัก

iframe จะรับนโยบายมาจากหน้าหลัก หาก iframe มี allow ซึ่งเป็นนโยบายที่เข้มงวดขึ้นระหว่างหน้าหลักกับ allow ชนะ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน iframe โปรดดูที่ allow ใน iframe

ไม่ได้ อายุการใช้งานของนโยบายมีไว้สําหรับการตอบกลับการนำทางหน้าเว็บเดียว ถ้า ผู้ใช้ไปยังหน้าใหม่ ส่วนหัว Feature-Policy จะต้องแสดงอย่างชัดเจน ที่ส่งไปในคำตอบใหม่ที่ต้องการให้นโยบายมีผลบังคับใช้

เบราว์เซอร์ใดรองรับนโยบายฟีเจอร์

ดูข้อมูลล่าสุดในcaniuse.com รายละเอียดเกี่ยวกับการรองรับเบราว์เซอร์

ปัจจุบัน Chrome เป็นเบราว์เซอร์เดียวที่รองรับนโยบายฟีเจอร์ อย่างไรก็ตาม เนื่องจากแพลตฟอร์ม API ทั้งหมดเป็นแบบเลือกรับหรือตรวจจับฟีเจอร์ได้ นโยบายฟีเจอร์ เหมาะสำหรับการเพิ่มประสิทธิภาพแบบต่อเนื่อง

บทสรุป

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

แหล่งข้อมูลเพิ่มเติม