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

Skrypty między witrynami oparte na modelu DOM to jedna z najczęstszych luk w zabezpieczeniach internetowych. Ł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 włączyć je prawidłowo. 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

Na co dzień używamy elementów sterujących formularzy HTML i są one kluczem do zwiększania interaktywności internetu. 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.
Zaktualizowaliśmy też styl elementów sterujących formularza.

Jestem pod wrażeniem pracy, jaką Microsoft wykonał, aby unowocześnić wygląd 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 ulepszone wsparcie dla 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 83 Chrome performance.measureMemory() 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
  • Zbieranie obiektów w tablicach
  • i tak dalej.

Wycieki pamięci powodują, że strony wydają się wolne i 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 w artykule Monitorowanie całkowitego wykorzystania pamięci przez stronę za pomocą measureMemory() na web.dev.

Aktualizacje interfejsu Native File System API

W ramach wersji próbnej interfejsu Native File System API w Chrome 83 rozpoczęliśmy testowanie nowej wersji 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.

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

Aby korzystać z tych funkcji, potrzebujesz nowego tokena testowego origin, aby korzystać z tych funkcji, dlatego zapoznaj się ze zaktualizowanym artykułem o interfejsie Native File System API: prostszym dostępie do plików lokalnych na web.dev. Znajdziesz w nim informacje o tym, jak uzyskać nowy token wersji próbnej origin.

Inne wersje próbne

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

Nowe zasady dotyczące 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 izolacji zasobów z innych domen zapobiega też modyfikacjom obiektu document.domain. Możliwość modyfikowania elementu document.domain umożliwia komunikację między dokumentami w tej samej witrynie i jest uznawana za lukę w zasadach dotyczących tego samego źródła.

Więcej informacji znajdziesz w poście Eiji na temat tworzenia izolowanej witryny między domenami przy użyciu 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 konkretnej strony internetowej i kontekstu, istnieje wspólny zestaw sygnałów (tzw. podstawowe wskaźniki internetowe), który ma kluczowe znaczenie dla wszystkich wrażeń związanych z internetem. Te podstawowe potrzeby związane z wrażeniami użytkownikaobejmują łatwość wczytywania, interaktywność i stabilność wizualną zawartości strony. Te podstawowe wskaźniki internetowe na rok 2020 stanowią podstawę Twoich podstawowych wskaźników internetowych.

Wszystkie te wskaźniki rejestrują ważne wyniki ukierunkowane na użytkowników, są wymierne w terenie oraz mają odpowiedniki w ramach laboratoriów i narzędzia. Na przykład, chociaż głównym wskaźnikiem wczytywania treści jest największe wyrenderowanie treści, to w dużym stopniu zależy on od pierwszego wyrenderowania treści (FCP) i czasu do pierwszego bajtu (TTFB), które są kluczowe w monitorowaniu i ulepszaniu.

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

Ciekawi Cię, co wydarzy się w przyszłości? 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 nasz kanał w YouTube dla deweloperów Chrome. Otrzymasz wtedy e-maila z powiadomieniem, gdy tylko 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.