Welche Einschränkungen gelten für undurchsichtige Antworten?

86

Undurchsichtige Antworten werden als Teil der Abruf-API definiert und stellen das Ergebnis einer Anforderung an einen Remote-Ursprung dar, wenn CORS nicht aktiviert ist.

Welche praktischen Einschränkungen und "Fallstricke" bestehen darin, wie undurchsichtige Antworten sowohl aus JavaScript als auch als Ressourcen auf einer Seite verwendet werden können?

Jeff Posnick
quelle

Antworten:

125

Zugriff auf die Überschriften / Textkörper undurchsichtiger Antworten

Die einfachste Einschränkung bei undurchsichtigen Antworten besteht darin, dass Sie von den meisten Eigenschaften der ResponseKlasse keine aussagekräftigen Informationen zurückerhalten headersoder die verschiedenen Methoden , aus denen die BodySchnittstelle besteht, wie json()oder aufrufen können text(). Dies steht im Einklang mit der Black-Box-Natur einer undurchsichtigen Reaktion.

Verwenden undurchsichtiger Antworten als Ressourcen auf einer Seite

Undurchsichtige Antworten können als Ressource auf einer Webseite verwendet werden, wenn der Browser die Verwendung einer nicht CORS-übergreifenden Ressource zulässt. Hier ist eine Teilmenge von Elementen, für die nicht CORS-übergreifende Ressourcen und daher undurchsichtige Antworten gültig sind, angepasst aus der Dokumentation des Mozilla Developer Network :

  • <script>
  • <link rel="stylesheet">
  • <img>, <video>Und<audio>
  • <object> und <embed>
  • <iframe>

Ein bemerkenswerter Anwendungsfall, für den undurchsichtige Antworten nicht gültig sind, sind Schriftartenressourcen .

Überprüfen Sie im Allgemeinen die entsprechende Spezifikation, um festzustellen, ob Sie eine undurchsichtige Antwort als bestimmten Ressourcentyp auf einer Seite verwenden können. In der HTML-Spezifikation wird beispielsweise erläutert, dass nicht-CORS-Kreuzursprungsantworten (dh undurchsichtige Antworten) für <script>Elemente verwendet werden können, allerdings mit einigen Einschränkungen, um das Auslaufen von Fehlerinformationen zu verhindern.

Undurchsichtige Antworten und die Cache-Speicher-API

Ein "Gotcha", auf das Entwickler mit undurchsichtigen Antworten stoßen könnten, besteht darin, sie mit der Cache-Speicher-API zu verwenden . Zwei Hintergrundinformationen sind relevant:

  • Die statusEigenschaft einer undurchsichtigen Antwort wird immer auf gesetzt0 , unabhängig davon, ob die ursprüngliche Anforderung erfolgreich war oder fehlgeschlagen ist.
  • Die add()/ addAll()Methoden der Cache-Speicher-API lehnen beide ab, wenn die Antworten, die aus einer der Anforderungen resultieren, einen Statuscode haben, der nicht im 2XX-Bereich liegt .

Aus diesen beiden Punkten folgt, dass die Anforderung, die als Teil des add()/ addAll()-Aufrufs ausgeführt wird, zu einer undurchsichtigen Antwort führt, nicht zum Cache hinzugefügt werden kann.

Sie können dies umgehen, indem Sie explizit a ausführen fetch()und dann die put()Methode mit der undurchsichtigen Antwort aufrufen . Auf diese Weise entscheiden Sie sich effektiv für das Risiko, dass die Antwort, die Sie zwischenspeichern, ein von Ihrem Server zurückgegebener Fehler war.

const request = new Request('https://third-party-no-cors.com/', {mode: 'no-cors'});
// Assume `cache` is an open instance of the Cache class.
fetch(request).then(response => cache.put(request, response));

Undurchsichtige Antworten und die navigator.storage-API

Um zu vermeiden, dass domänenübergreifende Informationen verloren gehen, wird die Größe einer undurchsichtigen Antwort, die zur Berechnung der Speicherkontingentgrenzen verwendet wird (dh ob eine QuotaExceededAusnahme ausgelöst wird) und von der navigator.storageAPI gemeldet wird , erheblich aufgefüllt .

Die Details dieses Auffüllens variieren von Browser zu Browser. Für Google Chrome bedeutet dies jedoch, dass die Mindestgröße , die eine einzelne zwischengespeicherte undurchsichtige Antwort zur gesamten Speichernutzung beiträgt, ungefähr 7 Megabyte beträgt . Sie sollten dies berücksichtigen, wenn Sie festlegen, wie viele undurchsichtige Antworten zwischengespeichert werden sollen, da Sie die Speicherkontingentbeschränkungen aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen viel früher überschreiten können, als Sie es sonst erwarten würden.

Jeff Posnick
quelle
1
Es nimmt nicht wirklich so viel Speicherplatz auf dem physischen Speicher eines Geräts ein. Es ist nur der Wert, der zu den Kontingentberechnungen beiträgt.
Jeff Posnick
1
Ihre Antwort wird sogar im Workbox-Handbuch hier erwähnt: developer.google.com/web/tools/workbox/guides/…
Dima Slivin
14
Stimmt, aber ich habe diesen Workbox-Leitfaden geschrieben :-)
Jeff Posnick
1
Ist die Verwendung eines Image-CDN in Verbindung mit dieser Art von Cache ein schlechtes Design? (Verschwendung von zugewiesenem Speicherplatz) Ist es möglich, eine aus unserer Hauptdomäne abgerufene Datei zwischenzuspeichern und mit dem CDN-Link (Schlüssel) verfügbar zu machen? Zum Beispiel kann ich eine Netzwerkanforderung an cdn.x.com/test.jpgund Cache-Anforderungen an die Hauptdomäne senden lassen www.x.com/test.jpg.
Cglacet
1
Ich habe einen Trick um dieses Problem herum gefunden. Ich habe keine Ahnung, ob dies eine anständige Lösung ist, aber ich lasse meinen Servicemitarbeiter im Grunde so tun, als wäre es das CDN. Ich füge domänenbezogene URLs im Cache hinzu (z. B. verwende ich /test.jpgfür jede Abrufanforderung, cdn.x.com/test.jpgum die URL mit der Ursprungsdomäne zu ändern (die URL wird www.x.com/test.jpg)), Folgendes: const cacheUrl = (url.hostname == 'cdn.x.com')? new URL(event.target.location.origin + url.pathname): url;Ich fordere dann den Cache mit dieser neuen URL an caches.match(cacheUrl), wie es scheint um gut zu arbeiten. Irgendwelche obwohl auf diesem Ansatz?
cglacet