אנחנו מתחילים להשיק את Chrome 83 בגרסה היציבה.
דברים שעליך לדעת:
- סוגים מהימנים עוזרים למנוע נקודות חולשה של פרצות אבטחה מסוג XSS.
- רכיבי הטפסים עברו שינוי חשוב.
- יש דרך חדשה לזהות דליפות זיכרון.
- גרסת המקור לניסיון של מערכת הקבצים המקורית מתחילה עם פונקציונליות נוספת.
- יש כללי מדיניות חדשים לגבי מקורות שונים
- השקנו את התוכנית מדדי הליבה לבדיקת חוויית המשתמש באתר כדי לספק הנחיות אחידות לגבי אותות איכות, שלדעתנו חיוניים כדי לספק חוויית משתמש מעולה באינטרנט.
- ועוד.
קוראים לי 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 איך מבודדים את האתר מ-origin שונים באמצעות 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.
ועוד
- Chrome תומך עכשיו ב-Barcode Detection API, שמאפשר לזהות ברקודים ולפענח אותם.
- הפונקציה החדשה
@supports
ב-CSS מספקת זיהוי תכונות לסלקטורים ב-CSS. - הערות ARIA חדשות תומכות בנגישות של קוראי מסך לתגובות, להצעות ולקטעי טקסט מודגשים עם משמעויות סמנטיות (בדומה ל-
<mark>
). - שאילתת המדיה
prefers-color-scheme
מאפשרת לכותבים לתמוך בעיצוב כהה משלהם, כדי שתהיה להם שליטה מלאה בחוויית השימוש שהם יוצרים. - JavaScript תומך עכשיו במודולים בעובדים משותפים.
רוצים לדעת מה צפוי בעתיד? אתם יכולים לבדוק את Fugu API Tracker כדי לראות.
קריאה נוספת
כאן מפורטות רק חלק מהנקודות העיקריות. בקישורים שבהמשך מפורטים שינויים נוספים בגרסה 83 של Chrome.
- מה חדש בכלי הפיתוח ל-Chrome (גרסה 83)
- תכונות שהווצאו משימוש והוסרו מ-Chrome 83
- עדכונים ב-ChromeStatus.com לגבי Chrome 83
- מה חדש ב-JavaScript בגרסה 83 של Chrome
- רשימת השינויים במאגר המקור של Chromium
להרשמה
רוצים להתעדכן בסרטונים שלנו? הירשמו לערוץ YouTube של מפתחי Chrome ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.
קוראים לי פיט לייפיי (Pete LePage) ואני צריך להסתפר, אבל ברגע שגרסת Chrome 84 תושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!