מבוא למדיניות בנושא תכונות

סיכום

המדיניות בנושא תכונות מאפשרת למפתחי אתרים להפעיל, להשבית ולהפעיל באופן סלקטיבי לשנות את ההתנהגות של תכונות אינטרנט וממשקי API מסוימים בדפדפן. זה כמו CSP אבל במקום לשלוט באבטחה, שולטת בתכונות!

כללי המדיניות בנושא תכונות הם למעשה הסכמי הסכמה קטנים בין המפתחים ודפדפן שיכולים לעזור לטפח את היעדים שלנו של בנייה (ותחזוקה) של אפליקציות אינטרנט איכותיות.

מבוא

בניית האינטרנט היא הרפתקה סלעית. קשה מספיק ליצור איכות מעולה Web app שמודדת ביצועים ומשתמשת בכל השיטות המומלצות העדכניות ביותר. זה אפילו כדי לשמור על החוויה הנהדרת לאורך זמן. ככל שהפרויקט שלכם מתפתח, מפתחים מצטרפים, מצטרפים פיצ'רים חדשים ובסיס הקוד גדל. ש לאחר שתשיגו, תיתכן ירידה בחוויית השימוש ב-TMC, שחוויית המשתמש שלכם תשתפר. מתחיל לסבול! המדיניות בנושא תכונות נועדה לעזור לך לעמוד ביעדים.

באמצעות מדיניות התכונות, עליך להביע הסכמה לקבוצה של 'מדיניות' שבה הדפדפן לאכוף תכונות מסוימות שנמצאות בשימוש באתר שלך. כללי המדיניות האלה מגבילים לאילו ממשקי API האתר יכול לגשת או לשנות את התנהגות ברירת המחדל של הדפדפן תכונות מסוימות.

דוגמאות לפעולות שאפשר לבצע בעזרת המדיניות בנושא תכונות:

  • שינוי התנהגות ברירת המחדל של autoplay בסרטונים לנייד ובסרטונים של צד שלישי.
  • צריך להגביל את השימוש של האתר בממשקי API רגישים כמו camera או microphone.
  • מתן הרשאה למסגרות iframe להשתמש ב-API fullscreen.
  • חסימת השימוש בממשקי API מיושנים כמו XHR סינכרוניים ו-document.write().
  • חשוב לוודא שהתמונות בגודל הנכון (למשל כדי למנוע התנגשות של פריסה) ושהן לא גדול מדי עבור אזור התצוגה (למשל, בזבוז רוחב הפס של המשתמש).

כללי המדיניות הם חוזה בין המפתח לדפדפן. הן מיידעות את לגבי הכוונה של המפתח, וכך תעזור לנו לשמור על כנות כאשר האפליקציה שלנו מנסה לעקוף את הרשת ולעשות משהו רע. אם האתר מוטמע תוכן של צד שלישי מנסה להפר אחד או יותר מהמאפיינים שנבחרו מראש של המפתח כללי, הדפדפן מבטל את ההתנהגות תוך שיפור חוויית המשתמש או חוסם את ה-API בסך הכול.

שימוש במדיניות התכונות

במדיניות התכונות יש שתי דרכים לשלוט בתכונות:

  1. באמצעות כותרת ה-HTTP Feature-Policy.
  2. עם המאפיין allow ב-iframes.

הדרך הקלה ביותר להשתמש במדיניות התכונות היא לשלוח את קוד ה-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, הדפדפן לחסום אותו. הדבר נכון גם אם המשתמש נתן בעבר הרשאה לשתף את המיקום שלהם.

הפרת המדיניות המוגדרת לגבי מיקום גיאוגרפי
הפרה של המדיניות שהוגדרה למיקום גיאוגרפי.

במקרים אחרים, אולי כדאי לפשט קצת את המדיניות הזו. יכולים לאפשר במקור שלנו להשתמש ב-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 מובאת הסכמה או ניתנת לזיהוי על ידי תכונות, מדיניות התכונות איזה יופי של שיפור הדרגתי.

סיכום

המדיניות בנושא תכונות יכולה לעזור לספק תמונה מוארת היטב להשגת חוויית משתמש טובה יותר או ביצועים טובים. הוא שימושי במיוחד בפיתוח או בתחזוקה של אפליקציה כי זה יכול לעזור להימנע מפערים פוטנציאליים לפני שהם יתנגשו לבסיס הקוד שלכם.

מקורות מידע נוספים: