Nowości w Chrome 83

Pete LePage

Chrome 83 jest już wdrażany w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

Nazywam się Pete LePage i pracuję oraz nagrywam filmy z domu. Zobaczmy, co nowego w Chrome 83 dla programistów.

Zaufane typy

Wykorzystywanie DOM do ataków cross-site scripting jest jedną z najczęstszych luk w zabezpieczeniach w internecie. Łatwo można go przypadkowo wprowadzić na stronę. Zaufane typy mogą zapobiegać tego typu podatnościom, ponieważ wymagają przetworzenia danych przed przekazaniem ich do potencjalnie niebezpiecznej funkcji.

Weźmy na przykład innerHTML. Jeśli włączysz zaufane typy, a próbujesz przekazać ciąg znaków, pojawi się błąd TypeError, ponieważ przeglądarka nie wie, czy może zaufać temu ciągowi znaków.

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

Zamiast tego musisz użyć bezpiecznej funkcji, takiej jak textContent, przekazać zaufany typ lub utworzyć element i użyć 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);

Zanim włączysz zaufane typy, musisz zidentyfikować i usunąć wszelkie naruszenia za pomocą nagłówka report-onlyCSP.

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

Gdy wszystko będzie gotowe, możesz go włączyć. Pełne informacje znajdziesz w artykule Zapobieganie lukom w skryptach XSS w DOM za pomocą zaufanych typów na stronie web.dev.

Aktualizacje elementów sterujących formularza

Elementy sterujące formularzami HTML są używane przez nas na co dzień i stanowią kluczowy element interakcji w internecie. Są łatwe w użyciu, mają wbudowane ułatwienia dostępu i są znane użytkownikom. Styl elementów sterujących formularza może być niespójny w różnych przeglądarkach i systemach operacyjnych. Często musimy wysyłać wiele reguł CSS, aby uzyskać spójny wygląd na różnych urządzeniach.

Przed: domyślny styl elementów sterujących formularza.
Po zmianach styl elementów sterujących formularza.

Jestem pod wrażeniem pracy, jaką Microsoft wkłada w modernizację wyglądu elementów sterujących formularzem. Oprócz ładniejszego stylu wizualnego oferują one lepszą obsługę ekranów dotykowych i ułatwienia dostępu, w tym ulepszoną obsługę klawiatury.

Nowe elementy sterowania formularzem są już dostępne w Microsoft Edge, a teraz są też dostępne w Chrome 83. Więcej informacji znajdziesz w artykule Updates to Form Controls and Focus na blogu Chromium.

Wersje próbne origin

Pomiar pamięci za pomocą measureMemory()

Od wersji Chrome 83, w której rozpoczyna się testowanie origin interfejsu performance.measureMemory(), jest to nowy interfejs API, który umożliwia pomiar wykorzystania pamięci przez stronę i wykrywanie wycieków pamięci.

Wycieki pamięci są łatwe do wprowadzenia:

  • zapomnisz zarejestrować detektora zdarzeń.
  • Przechwytywanie obiektów z elementu iframe
  • Nie zamykanie instancji roboczej
  • Gromadzenie obiektów w tablicach
  • i tak dalej.

Wycieki pamięci powodują, że strony są wolne i wyglądają na przeładowane.

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

Więcej informacji o nowym interfejsie API znajdziesz na stronie Monitorowanie całkowitego wykorzystania pamięci przez stronę internetową za pomocą funkcji measureMemory() na stronie web.dev.

Aktualizacje interfejsu Native File System API

W wersji 83 Chrome rozpoczęliśmy testowanie interfejsu Native File System API w ramach wersji próbnej origin z obsługą strumieni do zapisu i możliwością zapisywania uchwytów plików.

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.
}

Zapisywalne strumienie znacznie ułatwiają zapisywanie danych w pliku. Ponieważ jest to strumień, możesz łatwo przesyłać odpowiedzi z jednego strumienia do drugiego.

Zapisywanie uchwytów plików w IndexedDB umożliwia przechowywanie stanu lub zapamiętywanie plików, nad którymi pracował użytkownik. Możesz na przykład zachować listę ostatnio edytowanych plików, otworzyć ostatni plik, nad którym pracował użytkownik, itp.

Aby korzystać z tych funkcji, musisz mieć nowy token próbny pochodzenia. Więcej informacji na ten temat oraz sposób uzyskania nowego tokenu próbnego pochodzenia znajdziesz w zaktualizowanym artykule Interfejs API natywnego systemu plików: uproszczenie dostępu do plików lokalnych na stronie web.dev.

Inne wersje próbne

Pełną listę funkcji dostępnych w wersji próbnej origin znajdziesz

Nowe zasady dotyczące dostępu do zasobów z innych domen

Niektóre interfejsy API zwiększają ryzyko ataków typu side-channel, takich jak Spectre. Aby ograniczyć to ryzyko, przeglądarki oferują odizolowane środowisko oparte na opcjonalnym zgłaszaniu, zwane izolowanym od zasobów z innych domen. Stan izolowania od zasobów z innych domen uniemożliwia też modyfikowanie wartości document.domain. Możliwość zmiany atrybutu document.domain umożliwia komunikację między dokumentami w tej samej witrynie i jest uważana za lukę w zasadach dotyczących tej samej domeny.

Aby uzyskać więcej informacji, przeczytaj wpis Eiji Uzyskiwanie przez witrynę „ochrony przed powiązaniami między domenami” za pomocą mechanizmów COOP i COEP.

Parametry życiowe w internecie

Pomiar jakości wrażeń użytkownika ma wiele aspektów. Chociaż niektóre aspekty wrażeń użytkownika zależą od strony i kontekstu, istnieje wspólny zestaw sygnałów (nazywany podstawowymi wskaźnikami internetowymi), który ma kluczowe znaczenie dla wszystkich wrażeń związanych z przeglądaniem stron internetowych. Te podstawowe potrzeby związane z wygodą użytkowników obejmują wczytywanie, interaktywność i stabilność wizualna zawartości strony. Wszystkie te elementy stanowią podstawę Podstawowych wskaźników internetowych z 2020 r.

Wszystkie te dane obejmują ważne wyniki związane z użytkownikiem, są możliwe do zmierzenia w warunkach rzeczywistych i mają odpowiedniki oraz narzędzia diagnostyczne do badań laboratoryjnych. Na przykład największy wskaźnik wyrenderowania treści jest najważniejszym wskaźnikiem wczytywania, ale jest też silnie zależny od pierwszego wyrenderowania treści (FCP) i czasu do pierwszego bajta (TTFB), które nadal należy monitorować i ulepszać.

Więcej informacji znajdziesz w artykule Wskaźniki internetowe: ważne dane, które pomogą Ci utrzymać stronę w dobrej kondycji na blogu Chromium.

I nie tylko

  • Chrome obsługuje teraz interfejs Barcode Detection API, który umożliwia wykrywanie i dekodowanie kodów kreskowych.
  • Nowa funkcja CSS @supports umożliwia wykrywanie funkcji w selektorach CSS.
  • Nowe adnotacje ARIA ułatwiają korzystanie z czytnika ekranu w przypadku komentarzy, sugestii i wyróżnień tekstu o znaczeniu semantycznym (podobnie jak <mark>).
  • Zapytanie o multimedia prefers-color-scheme pozwala autorom obsługiwać własny ciemny motyw, dzięki czemu mają pełną kontrolę nad tworzonymi przez siebie treściami.
  • Język JavaScript obsługuje teraz moduły w ramach współdzielonych instancji roboczych.

Chcesz wiedzieć, co będzie dalej? Sprawdź Fugu API Tracker.

Więcej informacji

Obejmuje to tylko niektóre najważniejsze informacje. Aby dowiedzieć się więcej o dodatkowych zmianach w Chrome 83, kliknij linki poniżej.

Subskrybuj

Jeśli chcesz być na bieżąco z naszych filmów, zasubskrybuj kanał YouTube dla programistów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy opublikujemy nowy film.

Nazywam się Pete LePage i potrzebuję fryzjera, ale gdy tylko Chrome 84 zostanie wydany, opowiem Ci, co nowego w tej przeglądarce.