סיכום
המדיניות בנושא תכונות מאפשרת למפתחי אתרים להפעיל, להשבית ולהפעיל באופן סלקטיבי לשנות את ההתנהגות של תכונות אינטרנט וממשקי API מסוימים בדפדפן. זה כמו CSP אבל במקום לשלוט באבטחה, שולטת בתכונות!
כללי המדיניות בנושא תכונות הם למעשה הסכמי הסכמה קטנים בין המפתחים ודפדפן שיכולים לעזור לטפח את היעדים שלנו של בנייה (ותחזוקה) של אפליקציות אינטרנט איכותיות.
מבוא
בניית האינטרנט היא הרפתקה סלעית. קשה מספיק ליצור איכות מעולה Web app שמודדת ביצועים ומשתמשת בכל השיטות המומלצות העדכניות ביותר. זה אפילו כדי לשמור על החוויה הנהדרת לאורך זמן. ככל שהפרויקט שלכם מתפתח, מפתחים מצטרפים, מצטרפים פיצ'רים חדשים ובסיס הקוד גדל. ש לאחר שתשיגו, תיתכן ירידה בחוויית השימוש ב-TMC, שחוויית המשתמש שלכם תשתפר. מתחיל לסבול! המדיניות בנושא תכונות נועדה לעזור לך לעמוד ביעדים.
באמצעות מדיניות התכונות, עליך להביע הסכמה לקבוצה של 'מדיניות' שבה הדפדפן לאכוף תכונות מסוימות שנמצאות בשימוש באתר שלך. כללי המדיניות האלה מגבילים לאילו ממשקי API האתר יכול לגשת או לשנות את התנהגות ברירת המחדל של הדפדפן תכונות מסוימות.
דוגמאות לפעולות שאפשר לבצע בעזרת המדיניות בנושא תכונות:
- שינוי התנהגות ברירת המחדל
של
autoplay
בסרטונים לנייד ובסרטונים של צד שלישי. - צריך להגביל את השימוש של האתר בממשקי API רגישים כמו
camera
אוmicrophone
. - מתן הרשאה למסגרות iframe להשתמש ב-API
fullscreen
. - חסימת השימוש בממשקי API מיושנים כמו XHR סינכרוניים ו-
document.write()
. - חשוב לוודא שהתמונות בגודל הנכון (למשל כדי למנוע התנגשות של פריסה) ושהן לא גדול מדי עבור אזור התצוגה (למשל, בזבוז רוחב הפס של המשתמש).
כללי המדיניות הם חוזה בין המפתח לדפדפן. הן מיידעות את לגבי הכוונה של המפתח, וכך תעזור לנו לשמור על כנות כאשר האפליקציה שלנו מנסה לעקוף את הרשת ולעשות משהו רע. אם האתר מוטמע תוכן של צד שלישי מנסה להפר אחד או יותר מהמאפיינים שנבחרו מראש של המפתח כללי, הדפדפן מבטל את ההתנהגות תוך שיפור חוויית המשתמש או חוסם את ה-API בסך הכול.
שימוש במדיניות התכונות
במדיניות התכונות יש שתי דרכים לשלוט בתכונות:
- באמצעות כותרת ה-HTTP
Feature-Policy
. - עם המאפיין
allow
ב-iframes.
כותרת ה-HTTP Feature-Policy
הדרך הקלה ביותר להשתמש במדיניות התכונות היא לשלוח את קוד ה-HTTP Feature-Policy
עם התשובה של דף. ערך הכותרת הזו הוא מדיניות או קבוצה
של כללי מדיניות שרוצים שהדפדפן יציית למקור נתון:
Feature-Policy: <feature> <allow list origin(s)>
רשימת המקורות המורשים יכולה לקבל כמה ערכים שונים:
*
: התכונה מותרת בהקשרים של גלישה ברמה העליונה הקשרי גלישה (iframes).'self'
: התכונה מותרת בהקשרים של גלישה ברמה העליונה הקשרי גלישה בתצוגת מקור זהה. הוא אסור במקורות שונים מסמכים בהקשרים של גלישה בתצוגת עץ.'none'
: התכונה אסורה בהקשרים של גלישה ברמה העליונה אסורה בהקשרים של גלישה בתצוגת עץ.<origin(s)>
: מקורות ספציפיים שעבורם המדיניות מופעלת (למשל,https://example.com
).
דוגמה
נניח שרצית לחסום את השימוש של כל התוכן
את Geolocation API בכל האתר. אפשר לעשות זאת על ידי שליחה של
רשימת ההיתרים של 'none'
לתכונה geolocation
:
Feature-Policy: geolocation 'none'
אם קטע קוד או iframe מנסה להשתמש ב-Geolocation API, הדפדפן לחסום אותו. הדבר נכון גם אם המשתמש נתן בעבר הרשאה לשתף את המיקום שלהם.
![הפרת המדיניות המוגדרת לגבי מיקום גיאוגרפי](https://developer.chrome.com/static/blog/feature-policy/image/violating-set-geolocatio-2e1e841fd18d8.png?authuser=9&hl=he)
במקרים אחרים, אולי כדאי לפשט קצת את המדיניות הזו. יכולים לאפשר
במקור שלנו להשתמש ב-Geolocation API אבל למנוע מתוכן של צד שלישי
כדי לגשת אליה, צריך להגדיר את 'self'
ברשימת ההרשאות:
Feature-Policy: geolocation 'self'
מאפיין iframe allow
הדרך השנייה להשתמש במדיניות התכונות היא לשלוט בתוכן בתוך
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>
ממשק API של JavaScript
אמנם Chrome 60 הוסיף תמיכה בכותרת ה-HTTP Feature-Policy
המאפיין allow
במסגרות iframe, JavaScript API נוסף ב-Chrome 74.
ה-API הזה מאפשר לקוד בצד הלקוח לקבוע אילו תכונות מותרות על ידי
בדף, במסגרת או בדפדפן. תוכלו ליהנות מההטבות שלו דרך
document.featurePolicy
עבור המסמך הראשי או frame.featurePolicy
עבור
iframes.
דוגמה
הדוגמה הבאה ממחישה את התוצאות של שליחת מדיניות
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"]
רשימת כללי מדיניות
אז באילו תכונות אפשר לשלוט באמצעות מדיניות התכונות?
כרגע אין תיעוד לגבי כללי המדיניות שיושמו ואיך להשתמש בהם. הרשימה גם תגדל עם הזמן ככל שדפדפנים שונים לאמץ את המפרט וליישם כללי מדיניות שונים. מדיניות התכונות תועבר ללא ספק ומסמכי עזר טובים יהיה צורך במיוחד.
בשלב הזה, יש כמה דרכים לבדוק באילו תכונות אפשר לשלוט.
- אתם מוזמנים לעיין בהדגמות של Feature Policy 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 הנוראים האלה!
האם משתמשים במדיניות פיצ'רים בפיתוח או בייצור?
שניהם. מומלץ להפעיל מדיניות במהלך הפיתוח ולהשאיר את כללי המדיניות הפעילים בזמן הייצור. הפעלת מדיניות במהלך הפיתוח יעזרו לכם להתחיל ברגל ימין. הוא יעזור לך לזהות תרחישים לא צפויים רגרסיות לפני שהן קורות. השארת כללי המדיניות מופעלים בסביבת הייצור כדי להבטיח חוויית משתמש מסוימת למשתמשים.
האם יש דרך לדווח לשרת שלי על הפרות מדיניות?
Reporting API עובד! בדומה לאופן שבו אתרים יכולים להביע הסכמה לקבלת דוחות על הפרות של מדיניות CSP או להוצאה משימוש, אפשרות לקבל דיווחים על הפרות של המדיניות בנושא תכונות.
מהם כללי הירושה של תוכן iframe?
סקריפטים (של צד ראשון או של צד שלישי) יורשים את מדיניות הגלישה שלהם הקשר מסוים. כלומר, סקריפטים ברמה העליונה יורשים את מדיניות המסמך הראשי.
iframe
יורשים את המדיניות של דף ההורה שלהם. אם בiframe
יש
allow
, המדיניות המחמירה יותר בין דף ההורה לבין allow
ניצחונות. מידע נוסף על השימוש ב-iframe
זמין
המאפיין allow
ב-iframes.
אם מפעילים מדיניות, האם היא תקפה גם בניווטים בדפים שונים?
לא. כל משך החיים של המדיניות מתייחס לתגובת ניווט יחידה. אם המיקום
המשתמש מנווט לדף חדש, הכותרת Feature-Policy
חייבת להיות ספציפית
נשלחה בתשובה החדשה כדי שהמדיניות תחול.
אילו דפדפנים תומכים ב-Feature Policy?
כדי לראות את העדכונים האחרונים, אפשר לבקר ב-caniuse.com. פרטים על תמיכה בדפדפן.
נכון לעכשיו, Chrome הוא הדפדפן היחיד שתומך במדיניות תכונות. אבל, לפעמים מאחר שכל פלטפורמת ה-API מובאת הסכמה או ניתנת לזיהוי על ידי תכונות, מדיניות התכונות איזה יופי של שיפור הדרגתי.
סיכום
המדיניות בנושא תכונות יכולה לעזור לספק תמונה מוארת היטב להשגת חוויית משתמש טובה יותר או ביצועים טובים. הוא שימושי במיוחד בפיתוח או בתחזוקה של אפליקציה כי זה יכול לעזור להימנע מפערים פוטנציאליים לפני שהם יתנגשו לבסיס הקוד שלכם.
מקורות מידע נוספים:
- הסבר על מדיניות התכונות
- המפרט של מדיניות התכונות
- הדגמות של כיור מטבח
- תוסף כלי פיתוח למדיניות תכונות – בודק להפעלת כללי מדיניות של תכונות בדף.
- רשומות chromestatus.com