Ich möchte die Ladezeiten meiner Websites reduzieren, indem ich alle Cookies in den lokalen Speicher verschiebe, da sie anscheinend dieselbe Funktionalität haben. Gibt es Vor- / Nachteile (insbesondere in Bezug auf die Leistung) bei der Verwendung des lokalen Speichers als Ersatz für die Cookie-Funktionalität, mit Ausnahme der offensichtlichen Kompatibilitätsprobleme?

Cookies und lokale Speicherung dienen unterschiedlichen Zwecken. Cookies dienen hauptsächlich zum Lesen auf der Serverseite . Der lokale Speicher kann nur vom Client gelesen werden . Die Frage ist also in Ihrer App, wer diese Daten benötigt - der Client oder der Server?

Wenn es Ihr Client (Ihr JavaScript) ist, dann wechseln Sie auf jeden Fall. Sie verschwenden Bandbreite, indem Sie alle Daten in jedem HTTP-Header senden.

Wenn es sich um Ihren Server handelt, ist der lokale Speicher nicht so nützlich, da Sie die Daten irgendwie weiterleiten müssten (mit Ajax oder ausgeblendeten Formularfeldern oder Ähnlichem). Dies ist möglicherweise in Ordnung, wenn der Server für jede Anforderung nur eine kleine Teilmenge der Gesamtdaten benötigt.

In jedem Fall sollten Sie Ihr Sitzungscookie als Cookie belassen.

Nach dem technischen Unterschied und auch nach meinem Verständnis:

1. Cookies sind nicht nur eine alte Methode zum Speichern von Daten, sondern geben Ihnen auch ein Limit von 4096 Bytes (eigentlich 4095) - pro Cookie. Lokaler Speicher ist so groß wie 5 MB pro Domain - SO Question erwähnt dies auch.

2. localStorageist eine Implementierung der StorageSchnittstelle. Es speichert Daten ohne Ablaufdatum und wird nur über JavaScript oder den Browser-Cache / lokal gespeicherte Daten gelöscht - im Gegensatz zum Ablauf von Cookies.

Im Zusammenhang mit JWTs hat Stormpath einen ziemlich hilfreichen Artikel verfasst, in dem mögliche Speichermöglichkeiten und die (Nachteile) der einzelnen Methoden beschrieben werden.

Es gibt auch einen kurzen Überblick über XSS- und CSRF-Angriffe und wie Sie sie bekämpfen können.

Ich habe einige kurze Ausschnitte des folgenden Artikels angehängt, falls der Artikel offline geschaltet wird oder die Website ausfällt.

Lokaler Speicher

Probleme:

Auf den Webspeicher (localStorage / sessionStorage) kann über JavaScript in derselben Domäne zugegriffen werden. Dies bedeutet, dass jedes auf Ihrer Site ausgeführte JavaScript Zugriff auf den Webspeicher hat und daher anfällig für Cross-Site-Scripting-Angriffe (XSS) sein kann. Kurz gesagt, XSS ist eine Art von Sicherheitsanfälligkeit, bei der ein Angreifer JavaScript einfügen kann, das auf Ihrer Seite ausgeführt wird. Grundlegende XSS-Angriffe versuchen, JavaScript über Formulareingaben einzufügen, wobei der Angreifer eine Warnung ausgibt ("Sie werden gehackt"). in ein Formular, um zu sehen, ob es vom Browser ausgeführt wird und von anderen Benutzern angezeigt werden kann.

Verhütung:

Um XSS zu verhindern, besteht die allgemeine Antwort darin, alle nicht vertrauenswürdigen Daten zu maskieren und zu codieren. Dies ist jedoch weit von der ganzen Geschichte entfernt. Im Jahr 2015 verwenden moderne Web-Apps JavaScript, das auf CDNs oder außerhalb der Infrastruktur gehostet wird. Moderne Web-Apps enthalten JavaScript-Bibliotheken von Drittanbietern für A / B-Tests, Trichter- / Marktanalysen und Anzeigen. Wir verwenden Paketmanager wie Bower, um den Code anderer Leute in unsere Apps zu importieren.

Was ist, wenn nur eines der von Ihnen verwendeten Skripte kompromittiert wird? Schädliches JavaScript kann in die Seite eingebettet werden, und der Webspeicher ist gefährdet. Durch diese Art von XSS-Angriffen kann der Webspeicher aller Benutzer, die Ihre Website besuchen, ohne deren Wissen abgerufen werden. Dies ist wahrscheinlich der Grund, warum eine Reihe von Organisationen raten, nichts Wertvolles zu speichern oder Informationen im Webspeicher zu vertrauen. Dies umfasst Sitzungskennungen und Token.

Als Speichermechanismus erzwingt Web Storage während der Übertragung keine sicheren Standards. Wer Web Storage liest und verwendet, muss seine Sorgfalt walten lassen, um sicherzustellen, dass die JWT immer über HTTPS und niemals über HTTP gesendet wird.

Kekse

Probleme:

Cookies sind bei Verwendung mit dem HttpOnly-Cookie-Flag nicht über JavaScript zugänglich und gegen XSS immun. Sie können auch das Secure Cookie-Flag setzen, um sicherzustellen, dass das Cookie nur über HTTPS gesendet wird. Dies ist einer der Hauptgründe dafür, dass Cookies in der Vergangenheit zum Speichern von Token oder Sitzungsdaten verwendet wurden. Moderne Entwickler zögern, Cookies zu verwenden, da sie traditionell verlangen, dass der Status auf dem Server gespeichert wird, wodurch RESTful Best Practices verletzt werden. Cookies als Speichermechanismus erfordern nicht, dass der Status auf dem Server gespeichert wird, wenn Sie eine JWT im Cookie speichern. Dies liegt daran, dass der JWT alles kapselt, was der Server benötigt, um die Anforderung zu bedienen.

Cookies sind jedoch anfällig für eine andere Art von Angriff: Cross-Site Request Forgery (CSRF). Ein CSRF-Angriff ist eine Art von Angriff, der auftritt, wenn eine böswillige Website, E-Mail oder ein Blog dazu führt, dass der Webbrowser eines Benutzers eine unerwünschte Aktion auf einer vertrauenswürdigen Website ausführt, auf der der Benutzer derzeit authentifiziert ist. Dies ist ein Exploit, wie der Browser mit Cookies umgeht. Ein Cookie kann nur an die Domänen gesendet werden, in denen es zulässig ist. Standardmäßig ist dies die Domäne, die das Cookie ursprünglich gesetzt hat. Der Cookie wird für eine Anfrage gesendet, unabhängig davon, ob Sie sich auf galaxies.com oder hahagonnahackyou.com befinden.

Verhütung:

Moderne Browser unterstützen die SameSiteFlagge zusätzlich zu HttpOnlyund Secure. Der Zweck dieses Flags besteht darin, zu verhindern, dass das Cookie in standortübergreifenden Anforderungen übertragen wird, und so viele Arten von CSRF-Angriffen zu verhindern.

Für Browser, die dies nicht unterstützen SameSite, kann CSRF durch Verwendung synchronisierter Token-Muster verhindert werden. Das klingt kompliziert, aber alle modernen Web-Frameworks unterstützen dies.

AngularJS bietet beispielsweise eine Lösung, mit der überprüft werden kann, ob nur Ihre Domain auf das Cookie zugreifen kann. Direkt aus AngularJS-Dokumenten:

Bei der Ausführung von XHR-Anforderungen liest der $ http-Dienst ein Token aus einem Cookie (standardmäßig XSRF-TOKEN) und legt es als HTTP-Header (X-XSRF-TOKEN) fest. Da nur JavaScript, das auf Ihrer Domain ausgeführt wird, das Cookie lesen kann, kann Ihr Server sicher sein, dass das XHR von JavaScript stammt, das auf Ihrer Domain ausgeführt wird. Sie können diesen CSRF-Schutz zustandslos machen, indem Sie einen xsrfTokenJWT-Anspruch hinzufügen:

{
  "iss": "http://galaxies.com",
  "exp": 1300819380,
  "scopes": ["explorer", "solar-harvester", "seller"],
  "sub": "tom@andromeda.com",
  "xsrfToken": "d9b9714c-7ac0-42e0-8696-2dae95dbc33e"
}

Durch die Nutzung des CSRF-Schutzes Ihres Web-App-Frameworks sind Cookies für die Speicherung eines JWT absolut stabil. CSRF kann auch teilweise verhindert werden, indem Sie den HTTP-Referer und den Origin-Header in Ihrer API überprüfen. CSRF-Angriffe enthalten Referer- und Origin-Header, die nicht mit Ihrer Anwendung zusammenhängen.

Den vollständigen Artikel finden Sie hier: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage/

Sie haben auch einen hilfreichen Artikel darüber, wie JWTs im Hinblick auf die Struktur des Tokens selbst am besten entworfen und implementiert werden können: https://stormpath.com/blog/jwt-the-right-way/

Mit localStoragekönnen Webanwendungen Daten lokal im Browser des Benutzers speichern. Vor HTML5 mussten Anwendungsdaten in Cookies gespeichert werden, die in jeder Serveranforderung enthalten waren. Große Datenmengen können lokal gespeichert werden, ohne die Leistung der Website zu beeinträchtigen. Obwohl localStoragees moderner ist, haben beide Techniken einige Vor- und Nachteile.

Kekse

Vorteile

• Legacy-Unterstützung (es gibt sie schon immer)
• Persistente Daten
• Ablaufdaten

Nachteile

• Jede Domain speichert alle Cookies in einer einzigen Zeichenfolge, was das Parsen von Daten erschweren kann
• Die Daten sind unverschlüsselt, was zu einem Problem wird, da ... ... obwohl sie klein sind, Cookies mit jeder HTTP-Anfrage gesendet werden. Begrenzte Größe (4 KB)
• Die SQL-Injection kann über ein Cookie ausgeführt werden

Lokaler Speicher

Vorteile

• Unterstützung durch die meisten modernen Browser
• Persistente Daten, die direkt im Browser gespeichert werden
• Für lokale Speicherdaten gelten Regeln gleichen Ursprungs
• Wird nicht bei jeder HTTP-Anfrage gesendet
• ~ 5 MB Speicher pro Domain (das sind 5120 KB)

Nachteile

• Bisher von nichts unterstützt: IE 8, Firefox 3.5, Safari 4, Chrome 4, Opera 10.5, iOS 2.0, Android 2.0
• Wenn der Server gespeicherte Clientinformationen benötigt, müssen Sie diese absichtlich senden.

localStorageDie Verwendung ist fast identisch mit der ersten Sitzung. Sie haben ziemlich genaue Methoden, so dass der Wechsel von Sitzung zu Sitzung localStoragewirklich ein Kinderspiel ist. Wenn gespeicherte Daten für Ihre Anwendung wirklich wichtig sind, werden Sie wahrscheinlich Cookies als Backup verwenden, falls diese localStoragenicht verfügbar sind. Wenn Sie die Browserunterstützung überprüfen möchten localStorage, müssen Sie nur dieses einfache Skript ausführen:

/* 
* function body that test if storage is available
* returns true if localStorage is available and false if it's not
*/
function lsTest(){
    var test = 'test';
    try {
        localStorage.setItem(test, test);
        localStorage.removeItem(test);
        return true;
    } catch(e) {
        return false;
    }
}

/* 
* execute Test and run our custom script 
*/
if(lsTest()) {
    // window.sessionStorage.setItem(name, 1); // session and storage methods are very similar
    window.localStorage.setItem(name, 1);
    console.log('localStorage where used'); // log
} else {
    document.cookie="name=1; expires=Mon, 28 Mar 2016 12:00:00 UTC";
    console.log('Cookie where used'); // log
}

"localStorage-Werte auf sicheren (SSL) Seiten sind isoliert", wie jemand bemerkt hat. Beachten Sie, dass localStorage nicht verfügbar ist, wenn Sie vom gesicherten Protokoll "http" zum gesicherten Protokoll "https" wechseln, auf das das Cookie weiterhin zugreifen kann. Dies ist wichtig, wenn Sie mit sicheren Protokollen arbeiten.

Die Geschwindigkeit des lokalen Speichers hängt stark vom Browser ab, den der Client verwendet, sowie vom Betriebssystem. Chrome oder Safari auf einem Mac können viel schneller sein als Firefox auf einem PC, insbesondere mit neueren APIs. Wie immer ist das Testen dein Freund (ich konnte keine Benchmarks finden).

Ich sehe wirklich keinen großen Unterschied zwischen Cookies und lokalem Speicher. Außerdem sollten Sie sich mehr Sorgen über Kompatibilitätsprobleme machen: Nicht alle Browser unterstützen bereits die neuen HTML5-APIs. Daher sind Cookies die beste Wahl für Geschwindigkeit und Kompatibilität.

Es ist auch erwähnenswert, dass localStoragedies nicht verwendet werden kann, wenn Benutzer in einigen Versionen von Mobile Safari im "privaten" Modus surfen.

Zitiert aus MDN ( https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage ):

Hinweis: Ab iOS 5.1 speichert Safari Mobile localStorage-Daten im Cache-Ordner, der auf Geheiß des Betriebssystems gelegentlich bereinigt wird, normalerweise wenn der Speicherplatz knapp ist. Der private Browsermodus von Safari Mobile verhindert auch das Schreiben in localStorage vollständig.

Der lokale Speicher kann bis zu 5 MB Offline-Daten speichern, während die Sitzung auch bis zu 5 MB Daten speichern kann. Cookies können jedoch nur 4-KB-Daten im Textformat speichern.

LOCAl- und Sitzungsspeicherdaten im JSON-Format, daher einfach zu analysieren. Die Cookie-Daten liegen jedoch im Zeichenfolgenformat vor.

Cookies :

1. Vor HTML5 eingeführt.
2. Hat Ablaufdatum.
3. Von JS oder durch Clear Browsing Daten des Browsers oder nach Ablaufdatum gelöscht.
4. Wird bei jeder Anfrage an den Server gesendet.
5. Die Kapazität beträgt 4 KB.
6. Nur Zeichenfolgen können in Cookies gespeichert werden.
7. Es gibt zwei Arten von Cookies: Persistent und Sitzung.

Lokaler Speicher:

1. Eingeführt mit HTML5.
2. Hat kein Ablaufdatum.
3. Löschen durch JS oder durch Löschen der Browserdaten des Browsers.
4. Sie können auswählen, wann die Daten an den Server gesendet werden müssen.
5. Die Kapazität beträgt 5 MB.
6. Daten werden unbegrenzt gespeichert und müssen eine Zeichenfolge sein.
7. Nur einen Typ haben.