สรุป
นโยบายฟีเจอร์ช่วยให้นักพัฒนาเว็บเลือกเปิดใช้ ปิดใช้ และแก้ไขลักษณะการทำงานของ API และฟีเจอร์ของเว็บบางรายการในเบราว์เซอร์ได้ วิธีนี้เหมือนกับ CSP แต่แทนที่จะควบคุมความปลอดภัย กลับควบคุมฟีเจอร์ต่างๆ
ตัวนโยบายฟีเจอร์เองเป็นเพียงข้อตกลงที่เลือกใช้กันระหว่างนักพัฒนาซอฟต์แวร์กับเบราว์เซอร์ ซึ่งจะช่วยส่งเสริมเป้าหมายในการสร้าง (และดูแลรักษา) เว็บแอปที่มีคุณภาพสูง
เกริ่นนำ
การสร้างเว็บเป็นการผจญภัยที่เต็มไปด้วยหิน การสร้างเว็บแอปชั้นยอด ที่มีประสิทธิภาพและใช้แนวทางปฏิบัติแนะนำล่าสุดทั้งหมดนั้นเป็นเรื่องยาก ยากที่จะรักษาประสบการณ์ให้ดีขึ้นเรื่อยๆ เมื่อโปรเจ็กต์พัฒนาขึ้นเรื่อยๆ นักพัฒนาซอฟต์แวร์จะพร้อมทำงาน เพิ่มฟีเจอร์ใหม่ๆ และฐานของโค้ดก็เพิ่มขึ้น นั่นคือประสบการณ์ที่ยอดเยี่ยม TM ที่คุณเคยได้รับอาจเริ่มแย่ลงและ UX เริ่มแย่ นโยบายฟีเจอร์ออกแบบมาเพื่อให้คุณติดตามการใช้งานได้
เมื่อใช้นโยบายฟีเจอร์ คุณจะเลือกใช้ชุด "นโยบาย" ของเบราว์เซอร์เพื่อบังคับใช้กับฟีเจอร์บางอย่างที่ใช้ในเว็บไซต์ นโยบายเหล่านี้จะจำกัดว่า API ใดที่เว็บไซต์เข้าถึงหรือแก้ไขลักษณะการทำงานเริ่มต้นของเบราว์เซอร์สำหรับฟีเจอร์บางอย่าง
ตัวอย่างของสิ่งที่คุณสามารถทำได้ด้วยนโยบายฟีเจอร์มีดังนี้
- เปลี่ยนลักษณะการทำงานเริ่มต้นของ
autoplay
ในวิดีโอบนอุปกรณ์เคลื่อนที่และวิดีโอของบุคคลที่สาม - จำกัดเว็บไซต์ไม่ให้ใช้ API ที่มีความละเอียดอ่อน เช่น
camera
หรือmicrophone
- อนุญาตให้ iframe ใช้
fullscreen
API - บล็อกการใช้ 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 เบราว์เซอร์จะบล็อกไม่ให้ กรณีนี้จะเกิดขึ้นแม้ว่าผู้ใช้ได้ให้สิทธิ์ ในการแชร์ตำแหน่งไปแล้วก่อนหน้านี้
ในกรณีอื่นๆ เราขอแนะนำให้ผ่อนปรนนโยบายนี้เล็กน้อย เราอนุญาตให้ต้นทางของเราเองใช้ 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 ใช้ HTMLElement.requestFullscreen()
API นอกจากนี้ยังมีแอตทริบิวต์ 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-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 บางอย่างสำหรับผู้ใช้
มีวิธีรายงานการละเมิดนโยบายไปยังเซิร์ฟเวอร์ของฉันหรือไม่
Reporting API กำลังอยู่ในระหว่างดำเนินการ โดยคุณจะรับรายงานเกี่ยวกับการละเมิดนโยบายฟีเจอร์ได้ในวงกว้างเช่นเดียวกับที่เว็บไซต์สามารถเลือกรับรายงานเกี่ยวกับการละเมิด CSP หรือการเลิกใช้งาน
กฎการรับช่วงสำหรับเนื้อหา iframe คืออะไร
สคริปต์ (บุคคลที่หนึ่งหรือบุคคลที่สาม) จะรับค่านโยบายของบริบทการท่องเว็บ ซึ่งหมายความว่าสคริปต์ระดับบนสุดจะรับค่านโยบายของเอกสารหลัก
iframe
จะรับนโยบายมาจากหน้าระดับบนสุด หาก iframe
มีแอตทริบิวต์ allow
นโยบายที่เข้มงวดกว่าระหว่างหน้าหลักกับรายการ allow
จะเป็นผู้ชนะ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้งาน iframe
ได้ที่
แอตทริบิวต์ allow
ใน iframe
หากฉันใช้นโยบาย นโยบายจะมีผลในการนำทางหน้าเว็บทั้งหมดหรือไม่
ไม่ได้ อายุการใช้งานของนโยบายมีไว้สําหรับการตอบกลับการนำทางหน้าเว็บเดียว หากผู้ใช้ไปยังหน้าใหม่ คุณต้องส่งส่วนหัว Feature-Policy
อย่างชัดแจ้งในการตอบกลับใหม่เพื่อให้นโยบายมีผล
เบราว์เซอร์ใดรองรับนโยบายฟีเจอร์
ดู caniuse.com เพื่อดูรายละเอียด ล่าสุดเกี่ยวกับการสนับสนุนเบราว์เซอร์
ปัจจุบัน Chrome เป็นเบราว์เซอร์เดียวที่รองรับนโยบายฟีเจอร์ อย่างไรก็ตาม เนื่องจากแพลตฟอร์ม API ทั้งหมดเป็นแบบเลือกใช้หรือตรวจหาฟีเจอร์ได้ นโยบายฟีเจอร์จึงเหมาะกับการเพิ่มประสิทธิภาพแบบต่อเนื่อง
บทสรุป
นโยบายฟีเจอร์จะช่วยมอบแนวทางที่สว่างขึ้นเพื่อ UX ที่ดียิ่งขึ้นและประสิทธิภาพที่ดี ซึ่งมีประโยชน์มากโดยเฉพาะเมื่อพัฒนาหรือบำรุงรักษาแอปเพราะจะช่วยหลีกเลี่ยงการโจมตีที่อาจเกิดขึ้นได้ก่อนที่จะแอบเข้าสู่ฐานของโค้ด
แหล่งข้อมูลเพิ่มเติม
- คำอธิบายนโยบายฟีเจอร์
- ข้อกำหนดของนโยบายฟีเจอร์
- การสาธิตอ่างล้างจานในห้องครัว
- ส่วนขยายนโยบายฟีเจอร์สำหรับนักพัฒนาเว็บ - ผู้ทดสอบเพื่อลองใช้นโยบายฟีเจอร์ในหน้าเว็บ
- รายการ chromestatus.com