javascript fetch - Welche Einschränkungen gelten für opake Antworten?




api example (2)

Zugang zu den Kopfzeilen / Körper der opaken Antworten

Die einfachste Einschränkung bei undurchsichtigen Antworten besteht darin, dass Sie von den meisten properties der Antwortklasse keine sinnvollen Informationen wie headers abrufen können oder die verschiedenen methods , die das Body Interface bilden, wie json() oder text() aufrufen. Dies entspricht der Black-Box-Natur einer opaken Antwort.

Verwenden opaker Antworten als Ressourcen auf einer Seite

Undurchsichtige Antworten können als Ressource auf einer Webseite verwendet werden, wenn der Browser die Verwendung einer Cross-Origin-Ressource ermöglicht, die nicht von CORS stammt. Hier ist eine Teilmenge von Elementen, für die nicht-CORS-Ursprungsressourcen und damit undurchsichtige Antworten gültig sind und die aus der Mozilla Developer Network-Dokumentation übernommen wurden :

  • <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 Font-Ressourcen .

Um zu ermitteln, ob Sie eine undurchsichtige Antwort als bestimmten Ressourcentyp auf einer Seite verwenden können, überprüfen Sie im Allgemeinen die relevante Spezifikation. Zum Beispiel erklärt die HTML-Spezifikation, dass nicht-CORS-Ursprungs-Antworten (dh undurchsichtige Antworten) für <script> -Elemente verwendet werden können, allerdings mit einigen Einschränkungen, um auslaufende Fehlerinformationen zu verhindern.

Undurchsichtige Antworten und die Cache-Speicher-API

Ein "GOTCHA", mit dem der Entwickler möglicherweise undurchsichtige Antworten erhält, schließt deren Verwendung mit der Cache-Speicher-API ein . Zwei Hintergrundinformationen sind relevant:

  • Die Eigenschaft status einer opaken Antwort wird immer auf 0 , 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 aus einer der Anforderungen resultierenden Antworten einen Statuscode haben, der nicht im 2XX-Bereich liegt .

Aus diesen beiden Punkten ergibt sich, dass, wenn die als Teil des Aufrufs add() / addAll() zu einer opaken Antwort führt, sie nicht zum Cache hinzugefügt werden kann.

Sie können dies umgehen, indem Sie explizit fetch() ausführen und dann die Methode put() mit der opaken Antwort aufrufen. Wenn Sie dies tun, entscheiden Sie sich effektiv für das Risiko, dass die Antwort, die Sie zwischenspeichern, ein Fehler war, der von Ihrem Server zurückgegeben wurde.

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 das Lecken von domänenübergreifenden Informationen zu vermeiden, wird der Größe einer opaken Antwort, die zur Berechnung von Speicherkontingentlimits verwendet wird (z. B. ob eine QuotaExceeded Ausnahme ausgelöst wird), signifikante Auffüllung hinzugefügt und von der navigator.storage API gemeldet.

Die Details dieser Auffüllung variieren von Browser zu Browser, aber für Google Chrome bedeutet dies, dass die minimale Größe, die jede einzelne gecachte undurchsichtige Antwort zur Gesamtspeicherauslastung beiträgt, ungefähr 7 Megabyte beträgt. Sie sollten dies im Hinterkopf behalten, wenn Sie ermitteln, wie viele undurchsichtige Antworten Sie zwischenspeichern möchten, da Sie die Speicherkontingentbeschränkungen aufgrund der tatsächlichen Größe der undurchsichtigen Ressourcen möglicherweise viel früher überschreiten würden, als Sie normalerweise erwarten würden.

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

Welche praktischen Einschränkungen und "Gotchas" gibt es in Bezug darauf, wie undurchsichtige Antworten sowohl von JavaScript als auch von Ressourcen auf einer Seite verwendet werden können?


Es verhindert JSON-Hijacking , ein wichtiges JSON-Sicherheitsproblem, das in allen großen Browsern seit 2011 mit ECMAScript 5 formal fixed .

Behauptetes Beispiel: Angenommen, Google hat eine URL wie mail.google.com/json?action=inbox die die ersten 50 Nachrichten Ihres Posteingangs im JSON-Format zurückgibt. Böse Websites in anderen Domänen können aufgrund der Richtlinie mit demselben Ursprung keine AJAX-Anfragen zum Abrufen dieser Daten stellen. Sie können jedoch die URL über ein <script> -Tag angeben. Die URL wird mit Ihren Cookies besucht. Durch das Überschreiben der globalen Array-Konstruktor- oder Zugriffsmethoden kann eine Methode aufgerufen werden, wenn ein Objektattribut (Array oder Hash-Attribut) gesetzt wird, wodurch der JSON-Inhalt gelesen werden kann.

Die while(1); oder &&&BLAH&&& verhindert dies: Eine AJAX-Anfrage bei mail.google.com hat vollen Zugriff auf den Textinhalt und kann ihn entfernen. Durch das Einfügen eines <script> -Tags wird das JavaScript jedoch blind ohne Verarbeitung ausgeführt, was entweder zu einer Endlosschleife oder zu einem Syntaxfehler führt.

Das Problem der standortübergreifenden Anforderungsfälschung wird nicht angesprochen .





javascript cors service-worker fetch-api