חדש ב-Chrome 83

Pete LePage

אנחנו מתחילים להשיק את Chrome 83 בגרסה היציבה.

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

קוראים לי Pete LePage, ואני עובד ומצלם מהבית. עכשיו נצלול פנימה ונראה מה חדש למפתחים בגרסה 83 של Chrome.

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

פרצת אבטחה XSS‏ (cross-site scripting) שמבוססת על DOM היא אחת מנקודות החולשה הנפוצות ביותר באבטחה באינטרנט. קל להוסיף בטעות קוד כזה לדף. סוגים מהימנים יכולים לעזור למנוע נקודות חולשה מהסוג הזה, כי הם מחייבים לעבד את הנתונים לפני שמעבירים אותם לפונקציה שעלולה להיות מסוכנת.

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

// 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

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

עדכונים באמצעי הבקרה בטופס

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

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

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

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

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

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

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

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

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

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

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

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

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

Native File System API התחיל תקופת ניסיון חדשה לגרסאות המקור ב-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: Simplifying access to local files ב-web.dev.

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

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

מדיניות חדשה לגבי מקורות שונים

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

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

מדדים חיוניים לאינטרנט

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

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

כל המדדים האלה מתעדים תוצאות חשובות שמתמקדות במשתמשים, ניתנים למדידה בשטח ויש להם כלים ותמיכה מקבילים למדדי אבחון ב-Lab. לדוגמה, מדד ה-LCP הוא מדד הטעינה הראשי, אבל הוא תלוי מאוד גם במדדים 'הצגת תוכן ראשוני (FCP)' ו'זמן עד בייט ראשון (TTFB)', שעדיין חשובים מאוד למעקב ולשיפור.

מידע נוסף זמין בפוסט Introducing Web Vitals: essential metrics for a healthy site בבלוג של Chromium.

ועוד

רוצים לדעת מה צפוי בעתיד? כדאי לעיין במעקב אחר API של Fugu כדי לראות.

קריאה נוספת

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

להרשמה

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

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