חדש ב-Chrome 83

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

אנחנו מתחילים להשיק את Chrome 83 כדי לשמור על היציבות.

דברים שעליך לדעת:

אני Pete LePage, ואני עובד ומצלם מהבית. בואו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 83!

סוגים מהימנים

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

לדוגמה, innerHTML. אם מפעילים את ההגדרה'סוגים מהימנים' בניסיון להעביר מחרוזת, שגיאת TypeError תיכשל כי הדפדפן לא יודע אם הוא יכול לתת אמון במחרוזת.

// Trusted types turned on
const elem = document.getElementById('myDiv');
elem.innerHTML = `Hello, world!`;
// Will throw a TypeError

במקום זאת, צריך להשתמש בפונקציה בטוחה, כמו textContent, להעביר סוג מהימן או ליצור את הרכיב ולהשתמש ב-appendChild().

// Use a safe function
elem.textContent = ''; // OK

// Pass in a trusted type
import DOMPurify from 'dompurify';
const str = `Hello, world!`;
elem.innerHTML = DOMPurify.sanitize(str, {RETURN_TRUSTED_TYPE: true});

// Create an element
const img = document.createElement('img');
img.src = 'xyz.jpg';
elem.appendChild(img);

לפני שמפעילים את האפשרות 'סוגים מהימנים', חשוב לזהות ולתקן את כל ההפרות באמצעות כותרת CSP של report-only.

Content-Security-Policy-Report-Only: require-trusted-types-for 'script'; report-uri //example.com

לאחר שכל הפרטים יהיו מכווצים, תוכל להפעיל אותו כראוי. פרטים מלאים מופיעים במאמר איך למנוע נקודות חולשה של יצירת סקריפטים חוצי-אתרים ב-DOM באמצעות סוגים מהימנים ב-web.dev.

עדכונים בכלי הבקרה על טפסים

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

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

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

פקדי הטפסים החדשים כבר הגיעו ל-Microsoft Edge וזמינים עכשיו ב-Chrome 83. מידע נוסף זמין במאמר עדכונים לפקדי טפסים ולמיקוד בבלוג Chromium.

גרסאות מקור לניסיון

מדידת הזיכרון באמצעות measureMemory()

החל מגרסה מקור ב-Chrome 83, performance.measureMemory() הוא API חדש שמאפשר למדוד את השימוש בזיכרון של הדף ולזהות דליפות זיכרון.

קל להציג דליפות זיכרון:

  • איך שוכחים לבטל את הרישום של event listener
  • צילום אובייקטים מ-iframe
  • לא סוגר עובד
  • חישוב אובייקטים במערכים
  • וכן הלאה.

דליפות זיכרון מובילות לדפים איטיים שנראים מנופחים אצל משתמשים.

if (performance.measureMemory) {
  try {
    const result = await performance.measureMemory();
    console.log(result);
  } catch (err) {
    console.error(err);
  }
}

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

עדכונים ל-Native File System API

ממשק ה-API של מערכת הקבצים Native התחיל גרסת מקור חדשה ב-Chrome 83 עם תמיכה בשידורים שניתנים לכתיבה ואפשרות לשמור נקודות אחיזה לקבצים.

async function writeURLToFile(fileHandle, url) {
  // Create a FileSystemWritableFileStream to write to.
  const writable = await fileHandle.createWritable();
  // Make an HTTP request for the contents.
  const response = await fetch(url);
  // Stream the response into the file.
  await response.body.pipeTo(writable);
  // pipeTo() closes the destination pipe automatically.
}

קל יותר לכתוב על הקבצים באמצעות זרמים הניתנים לכתיבה. מכיוון שמדובר בזרם, ניתן לשלב את התגובות בקלות בין השידורים השונים.

כששומרים קבצים ב-IndexedDB, אפשר לשמור את המצב ולזכור על אילו קבצים המשתמש עבד. לדוגמה, שומרים רשימה של קבצים שנערכו לאחרונה, פותחים את הקובץ האחרון שהמשתמש עבד עליו וכו'.

כדי להשתמש בתכונות האלה נדרש אסימון מקור חדש לניסיון, אז כדאי לקרוא את המאמר המעודכן שלי בנושא Native File System API: פישוט הגישה לקבצים מקומיים ב-web.dev עם כל הפרטים ואופן קבלת אסימון המקור לניסיון של אסימון המקור החדש.

גרסאות מקור לניסיון אחרות

רשימה מלאה של התכונות בגרסת המקור לניסיון.

כללי מדיניות חדשים ממקורות שונים

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

קראו את הפוסט של Eiji, שבו מוסבר איך להגדיר את האתר שלכם כ"מבודד ממקורות שונים" באמצעות COOP ו-COEP לקבלת פרטים מלאים.

תפקוד האפליקציה

למדידה של איכות חוויית המשתמש יש היבטים רבים. היבטים מסוימים בחוויית המשתמש הם ספציפיים לאתר ולהקשר, אבל יש קבוצה משותפת של אותות – "מדדי ליבה לבדיקת חוויית המשתמש באתר" – שהם חיוניים לכל חוויית משתמש באינטרנט. הצרכים הבסיסיים של חוויית המשתמש כוללים חוויית טעינה, אינטראקטיביות ויציבות חזותית של תוכן הדף. שילוב כזה הוא הבסיס של מדדי הליבה לבדיקת חוויית המשתמש באתר לשנת 2020.

  • הכלי Largest Contentful Paint מודד את מהירות הטעינה הנתפסת, ומסמן את הנקודה בציר הזמן של טעינת הדף שבה כנראה נטען התוכן הראשי של הדף.
  • השהיה לאחר קלט ראשוני (FID) מודדת את רמת התגובתיות ומכמתת את חוויית המשתמשים שמרגישים כשהם מנסים ליצור אינטראקציה ראשונה עם הדף.
  • המדד Cumulative Layout Shift (CLS) מודד את היציבות החזותית ומכמת את כמות השינויים הבלתי צפויים בפריסה של תוכן גלוי בדף.

כל המדדים האלה מתעדים תוצאות חשובות שממוקדות במשתמשים, אפשר למדוד את התוצאות בשטח ולהשתמש בכלים מקבילים למדדי אבחון של שיעור ה-Lab. לדוגמה, אומנם המדד Largest Contentful Paint (LCP) הוא המדד של טעינת התוכן, אבל הוא תלוי גם בנתונים הבאים: הצגת התוכן הראשוני (FCP) ו-Time to First Byte (TTFB), שהם חיוניים לצורך מעקב ושיפור.

מידע נוסף מופיע במאמר חדש: Web Vitals: מדדים חיוניים ליצירת אתר תקין בבלוג Chromium לקבלת פרטים מלאים.

ועוד

סקרנים לדעת מה מתוכנן לעתיד? רוצים לדעת איך? Fugu API tracker יכול לעזור לכם

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשים העיקריים. בדקו בקישורים שבהמשך שינויים נוספים ב-Chrome 83.

הרשמה

רוצים להתעדכן בסרטונים שלנו? נרשמים לערוץ YouTube של מפתחי Chrome ומקבלים התראה באימייל בכל פעם שנשיק סרטון חדש.

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