Nowości w Chrome 83

Pete LePage

Zaczynamy wdrażać Chrome 83 w wersji stabilnej.

Oto, co musisz wiedzieć na ten temat:

Jestem Pete LePage. Pracuję i nagrywam z domu. Sprawdźmy, co nowego dla deweloperów w Chrome 83.

Zaufane typy

Skrypty krzyżowe oparte na modelu DOM to jedna z najpowszechniejszych luk w zabezpieczeniach w internecie. Łatwo jest przypadkowo wprowadzić nazwę użytkownika na stronie. Typy zaufane pomagają zapobiegać tego typu lukom w zabezpieczeniach, ponieważ wymagają one przetworzenia danych przed przekazaniem ich do potencjalnie niebezpiecznej funkcji.

Weźmy na przykład innerHTML z włączonymi zaufanymi typami. Jeśli spróbuję przekazać ciąg znaków, spowoduje to błąd typu TypeError, ponieważ przeglądarka nie wie, czy może go zaufać.

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

Zamiast tego muszę 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 wykryć i naprawić wszelkie naruszenia przy użyciu nagłówka CSP report-only.

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

Gdy już wszystko będzie gotowe, możesz włączyć go prawidłowo. Szczegółowe informacje znajdziesz w artykule o zapobieganiu lukom w zabezpieczeniach opartych na DOM przy użyciu zaufanych typów na web.dev.

Aktualizacje elementów sterujących formularza

Codziennie wykorzystujemy elementy sterujące formularza HTML i są one kluczem do interakcji w internecie. Są łatwe w użyciu, mają wbudowane ułatwienia dostępu i są dobrze znane naszym 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ć pewne reguły CSS, by zachować spójny wygląd na różnych urządzeniach.

Wcześniej domyślny styl elementów sterujących formularza.
Zaktualizowaliśmy styl elementów sterujących formularza.

Byłem pod ogromnym wrażeniem pracy Microsoftu, która ma na celu modernizację elementów sterujących formularza. Oprócz ładniejszego wyglądu zapewniają lepszą obsługę dotykową i lepsze ułatwienia dostępu, w tym udoskonaloną obsługę klawiatury.

Nowe elementy sterujące formularza są już dostępne w Microsoft Edge, a teraz są dostępne w Chrome 83. Więcej informacji znajdziesz w artykule na temat aktualizacji elementów sterujących i zaznaczenia formularza na blogu Chromium.

Testowanie origin

Zmierz pamięć za pomocą funkcji measureMemory()

Rozpoczynamy testowanie origin w Chrome 83 performance.measureMemory() to nowy interfejs API, który umożliwia mierzenie wykorzystania pamięci strony i wykrywanie wycieków pamięci.

Wyciek pamięci można łatwo wprowadzić:

  • zapominanie wyrejestrować detektora zdarzeń,
  • Przechwytywanie obiektów z elementu iframe
  • Nie zamykam instancji roboczej
  • Zbieram obiekty w tablicach
  • i tak dalej.

Wyciek pamięci powoduje, że strony, które wyglądają wolno, są rozładowane i przeznaczone dla użytkowników.

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

Informacje o nowym interfejsie API znajdziesz w artykule Monitorowanie całkowitego wykorzystania pamięci przez Twoją stronę internetową za pomocą narzędzia measureMemory() na web.dev.

Aktualizacje interfejsu Native File System API

W przypadku interfejsu Native File System API rozpoczęto w Chrome 83 nowy test źródła, który umożliwił dostęp do strumieni z możliwością zapisu i umożliwił zapisywanie 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.
}

Strumienie z możliwością zapisu znacznie ułatwiają zapisywanie w pliku, a ponieważ jest to strumień, można łatwo przesyłać odpowiedzi potokami z jednego strumienia do drugiego.

Zapisanie uchwytów plików w IndexedDB umożliwia przechowywanie ich stanu lub zapamiętywanie, nad którymi plikami pracował użytkownik. Na przykład może to być lista ostatnio edytowanych plików, otwieranie ostatniego pliku, nad którym pracował użytkownik itd.

Aby korzystać z tych funkcji, musisz mieć nowy token próbny origin. Zapoznaj się więc ze zaktualizowanym artykułem The Native File System API: Uproszczony dostęp do plików lokalnych na web.dev. Znajdziesz w nim wszystkie szczegóły i dowiedzieć się, jak uzyskać nowy token próbny origin.

Testowanie innych origin

Sprawdź pełną listę funkcji dostępnych w wersji próbnej origin.

Nowe zasady dotyczące innych domen

Niektóre internetowe interfejsy API zwiększają ryzyko ataków typu side-channel, np. Spectre. Aby ograniczyć to ryzyko, przeglądarki oferują izolowane środowisko (akceptowalne) nazywane izolowanym od zasobów z innych domen. Stan izolowany od zasobów z innych domen uniemożliwia też modyfikowanie parametru document.domain. Możliwość zmodyfikowania pliku document.domain umożliwia komunikację między dokumentami znajdującymi się w tej samej witrynie i jest uznawana za lukę w zasadach dotyczących tej samej domeny.

Szczegółowe informacje znajdziesz w poście Eiji na temat koncentrowania się na odizolowaniu witryny od zasobów z innych domen za pomocą COOP i COEP.

Wskaźniki internetowe

Pomiar jakości wrażeń użytkownika ma wiele aspektów. Niektóre aspekty wrażeń użytkownika są zależne od witryny i kontekstu, ale istnieje wspólny zestaw sygnałów – „podstawowe wskaźniki internetowe” – kluczowe dla wszystkich działań w internecie. Te podstawowe potrzeby związane z wrażeniami użytkownika obejmują wygodę wczytywania, interaktywność i stabilność wizualną zawartości strony. Podstawą tych wskaźników są Podstawowe wskaźniki internetowe z 2020 roku.

Wszystkie te wskaźniki rejestrują ważne wyniki dotyczące użytkownika, są wymierne w polu i mają odpowiadające im dane diagnostyczne oraz narzędzia. Na przykład, największe wyrenderowanie treści to wskaźnik wczytywania najwyższego poziomu, ale jest on również w dużym stopniu zależny od pierwszego wyrenderowania treści (FCP) i czasu do pierwszego bajtu (TTFB), które mają kluczowe znaczenie w monitorowaniu i ulepszaniu.

Więcej informacji znajdziesz na blogu Chromium w artykule o wskaźnikach internetowych: kluczowych danych, które pozwalają tworzyć dobrą witrynę.

I nie tylko

Chcesz wiedzieć więcej o przyszłości? Sprawdź to w narzędziu do śledzenia interfejsu Fugu API.

Więcej informacji

Obejmuje to tylko niektóre z najważniejszych momentów. Aby dowiedzieć się więcej o nowych zmianach w Chrome 83, kliknij poniższe linki.

Zasubskrybuj

Jeśli chcesz być na bieżąco z naszymi filmami, zasubskrybuj kanał dla deweloperów Chrome w YouTube, a za każdym razem, gdy opublikujemy nowy film, otrzymasz e-maila z powiadomieniem.

Nazywam się Pete LePage i chcę obciąć włosy, ale zaraz gdy tylko wprowadzimy Chrome 84, chętnie opowiem Ci, co nowego w Chrome.