แล้ว
สรุป
นโยบายฟีเจอร์ช่วยให้นักพัฒนาเว็บเลือกเปิดใช้ ปิดใช้ และแก้ไขลักษณะการทำงานของ API และฟีเจอร์เว็บบางรายการในเบราว์เซอร์ได้ ซึ่งเหมือนกับ CSP แต่แทนที่จะควบคุมความปลอดภัย สิ่งนี้จะควบคุมฟีเจอร์ต่างๆ ด้วย
ตัวนโยบายฟีเจอร์เองเป็นข้อตกลงเล็กๆ น้อยๆ ที่ต้องเลือกใช้ระหว่างนักพัฒนาซอฟต์แวร์และเบราว์เซอร์ ซึ่งช่วยส่งเสริมเป้าหมายในการสร้าง (และดูแลรักษา) เว็บแอปคุณภาพสูงได้
เกริ่นนำ
การสร้างเว็บนั้นเป็นการผจญภัยสุดหิน การสร้างเว็บแอปชั้นนำซึ่งเพิ่มประสิทธิภาพ และใช้แนวทางปฏิบัติแนะนำล่าสุดทั้งหมดนั้นยากพอ ยิ่งไปกว่านั้น การรักษาประสบการณ์นั้นให้ยอดเยี่ยมเมื่อเวลาผ่านไป เมื่อโครงการของคุณพัฒนาขึ้นเรื่อยๆ นักพัฒนาซอฟต์แวร์ก็พร้อมรับงาน ฟีเจอร์ใหม่ๆ และฐานของโค้ดก็เพิ่มมากขึ้น ประสบการณ์ที่ยิ่งใหญ่นั้น TM ที่คุณเคยได้รับอาจเสื่อมถอยลง และ UX เริ่มเสื่อมเสีย นโยบายฟีเจอร์ออกแบบมาเพื่อช่วยให้คุณติดตามการดำเนินการได้
เมื่อใช้นโยบายฟีเจอร์ คุณจะเลือกใช้ชุด "นโยบาย" ให้เบราว์เซอร์บังคับใช้ฟีเจอร์ที่เจาะจงซึ่งใช้กันทั่วทั้งเว็บไซต์ นโยบายเหล่านี้จะจำกัด API ที่เว็บไซต์สามารถเข้าถึงหรือแก้ไขการทำงานเริ่มต้นของเบราว์เซอร์สำหรับฟีเจอร์บางอย่าง
ตัวอย่างของสิ่งที่คุณทำได้เมื่อใช้นโยบายฟีเจอร์ มีดังนี้
- เปลี่ยนลักษณะการทำงานเริ่มต้นของ
autoplay
ในวิดีโอบนอุปกรณ์เคลื่อนที่และวิดีโอของบุคคลที่สาม - จำกัดเว็บไซต์ไม่ให้ใช้ API ที่มีความละเอียดอ่อน เช่น
camera
หรือmicrophone
- อนุญาตให้ iframe ใช้ API
fullscreen
- บล็อกการใช้ API ที่ล้าสมัย เช่น XHR ที่มาพร้อมกันและ
document.write()
- ตรวจสอบว่ารูปภาพมีขนาดที่เหมาะสม (เช่น ป้องกันการจัดวางเลย์เอาต์) และไม่ใหญ่เกินไปสำหรับวิวพอร์ต (เช่น เปลืองแบนด์วิดท์ของผู้ใช้)
นโยบายเป็นสัญญาระหว่างนักพัฒนาซอฟต์แวร์และเบราว์เซอร์ พวกเขาแจ้งให้เบราว์เซอร์ทราบถึงเจตนาของนักพัฒนาซอฟต์แวร์ ดังนั้นโปรดช่วยเราอย่างซื่อสัตย์เมื่อแอปของเราพยายามหลอกลวงและทำสิ่งไม่ดี หากเว็บไซต์หรือเนื้อหาของบุคคลที่สามที่ฝังไว้พยายามละเมิดกฎที่นักพัฒนาซอฟต์แวร์เลือกไว้ล่วงหน้า เบราว์เซอร์จะลบล้างลักษณะการทำงานที่มี UX ที่ดีกว่าหรือบล็อก API ทั้งหมด
การใช้นโยบายฟีเจอร์
นโยบายฟีเจอร์มี 2 วิธีในการควบคุมฟีเจอร์ ดังนี้
- ผ่านส่วนหัว HTTP ของ
Feature-Policy
- ที่มีแอตทริบิวต์
allow
ใน iframe
ส่วนหัว HTTP ของ Feature-Policy
วิธีที่ง่ายที่สุดในการใช้นโยบายฟีเจอร์คือการส่งส่วนหัว 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 เบราว์เซอร์จะบล็อกโค้ดหรือ iframe นั้น ถึงแม้จะได้ให้สิทธิ์ในการแชร์ตำแหน่งมาก่อนหน้านี้แล้วก็ตาม
ในกรณีอื่น คุณอาจต้องผ่อนปรนนโยบายนี้เล็กน้อย เราสามารถอนุญาตให้ต้นทางของเราใช้ 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">
)
โปรดทราบว่านโยบายที่เข้มงวดกว่าจะชนะ ตัวอย่างเช่น 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 วิธีดังนี้
- ดูอ่างล้างห้องครัวที่มีนโยบายฟีเจอร์ของการสาธิต พร้อมตัวอย่างนโยบายแต่ละข้อที่ใช้ใน Blink
- ตรวจสอบแหล่งที่มาของ Chrome เพื่อดูรายการชื่อฟีเจอร์
- คำค้นหา
document.featurePolicy.allowedFeatures()
ในabout:blank
เพื่อหารายการ
["geolocation",
"midi",
"camera",
"usb",
"magnetometer",
"fullscreen",
"animations",
"payment",
"picture-in-picture",
"accelerometer",
"vr",
...
- ตรวจสอบ chromestatus.com เพื่อดูนโยบายที่ใช้อยู่หรือได้รับการพิจารณาใน Blink
ดูวิธีนำนโยบายเหล่านี้บางส่วนไปใช้ได้ที่ที่เก็บ GitHub ของข้อกำหนด ซึ่งประกอบด้วยคำอธิบาย 2-3 ข้อเกี่ยวกับนโยบายบางส่วน
คำถามที่พบบ่อย
ฉันจะใช้นโยบายเกี่ยวกับฟีเจอร์เมื่อใด
นโยบายทั้งหมดเป็นแบบเลือกใช้ได้ ดังนั้นโปรดใช้นโยบายฟีเจอร์ในทุกที่ที่เหมาะสม ตัวอย่างเช่น หากแอปเป็นแกลเลอรีรูปภาพ นโยบาย maximum-downscaling-image
จะช่วยให้คุณหลีกเลี่ยงการส่งรูปภาพขนาดใหญ่ไปยังวิวพอร์ตของอุปกรณ์เคลื่อนที่
คุณควรใช้นโยบายอื่นๆ เช่น document-write
และ sync-xhr
ด้วยความระมัดระวังมากขึ้น การเปิดใช้ไว้อาจทำให้เนื้อหาของบุคคลที่สาม เช่น โฆษณา เสียหาย ในทางกลับกัน นโยบายฟีเจอร์อาจเป็นการตรวจสอบความถูกต้องได้ เพื่อให้มั่นใจว่าหน้าเว็บของคุณจะไม่ใช้ API ที่โหดร้ายเหล่านี้
ฉันใช้นโยบายฟีเจอร์ในการพัฒนาหรือที่ใช้งานจริงไหม
ทั้งคู่ เราขอแนะนำให้เปิดนโยบายในระหว่างการพัฒนา และทำให้นโยบายยังคงใช้งานได้จริง การเปิดนโยบายในระหว่างการพัฒนาจะช่วยให้คุณเริ่มต้นได้อย่างถูกต้อง แต่จะช่วยให้คุณตรวจพบการถดถอย ที่ไม่คาดคิดก่อนที่จะเกิดขึ้นจริง เปิดใช้นโยบายในเวอร์ชันที่ใช้งานจริงอยู่เสมอเพื่อ รับประกัน UX บางอย่างสำหรับผู้ใช้
มีวิธีรายงานการละเมิดนโยบายไปยังเซิร์ฟเวอร์ของฉันหรือไม่
Reporting API กำลังทำงาน โดยจะรับรายงานเกี่ยวกับการละเมิดนโยบายฟีเจอร์ในพื้นที่ต่างๆ ได้เช่นเดียวกับที่เว็บไซต์เลือกรับรายงานเกี่ยวกับการละเมิด CSE หรือการเลิกใช้งาน
กฎการสืบทอดเนื้อหา iframe คืออะไร
สคริปต์ (ทั้งบุคคลที่หนึ่งหรือบุคคลที่สาม) จะรับนโยบายจากบริบทการท่องเว็บ ซึ่งหมายความว่าสคริปต์ระดับบนสุดจะสืบทอดนโยบายของเอกสารหลัก
iframe
จะรับนโยบายมาจากหน้าหลัก หาก iframe
มีแอตทริบิวต์ allow
นโยบายที่เข้มงวดกว่าระหว่างหน้าหลักและรายการ allow
จะชนะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน iframe
ได้ที่แอตทริบิวต์ allow
ใน iframe
หากฉันใช้นโยบาย นโยบายจะใช้ได้ตลอดการนำทางหน้าเว็บไหม
ไม่ได้ อายุการใช้งานของนโยบายมีไว้สำหรับการตอบกลับเมื่อไปยังส่วนต่างๆ ในหน้าเดียว หากผู้ใช้ไปที่หน้าใหม่ จะต้องมีการส่งส่วนหัว Feature-Policy
อย่างชัดเจนในการตอบกลับใหม่เพื่อให้นโยบายมีผลบังคับใช้
เบราว์เซอร์ใดบ้างที่รองรับนโยบายฟีเจอร์
ไปที่ caniuse.com สำหรับรายละเอียดล่าสุด เกี่ยวกับการสนับสนุนเบราว์เซอร์
ปัจจุบัน Chrome เป็นเบราว์เซอร์เดียวที่รองรับนโยบายฟีเจอร์ อย่างไรก็ตาม เนื่องจากแพลตฟอร์ม API ทั้งหมดเป็นแบบเลือกใช้หรือตรวจพบฟีเจอร์ได้ นโยบายฟีเจอร์จึงเหมาะสําหรับการเพิ่มประสิทธิภาพแบบต่อเนื่อง
บทสรุป
นโยบายฟีเจอร์ช่วยให้มอบ UX และประสิทธิภาพที่ดีได้ดีขึ้น ความสามารถนี้มีประโยชน์อย่างยิ่งในการพัฒนาหรือดูแลรักษาแอป เนื่องจากแอปสามารถช่วยป้องกันปืนที่อาจพบก่อนที่แอปเหล่านั้นจะแอบเข้าไปในฐานของโค้ดได้
แหล่งข้อมูลเพิ่มเติม
- คำอธิบายนโยบายฟีเจอร์
- ข้อกำหนดของนโยบายฟีเจอร์
- การสาธิตอ่างล้างจาน
- Feature Policy DevTools Extension - ผู้ทดสอบสำหรับลองใช้นโยบายฟีเจอร์ในหน้าเว็บ
- รายการ chromestatus.com