Wie kombinieren Sie die Vorteile von localStorage und sessionStorage?

8

Ich möchte mein Authentifizierungstoken zwischen Browser-Tabs teilen, die die Verwendung von HTML5 localStorage empfehlen. . Aber ich möchte nicht, dass irgendetwas im Zusammenhang mit der Authentifizierung in meinem Speicher verbleibt, wenn der Browser geschlossen wird, was die Verwendung von HTML5 sessionStorage .

Referenz 1 zu diesem Thema (klicken Sie hier) :

  

Das bedeutet, dass Sie nicht zwischen Tabs teilen können, hierfür sollten Sie localStorage

verwenden

Referenz 2 zu diesem Thema (Klick) :

  

Daher wird empfohlen, keine vertraulichen Informationen im lokalen Speicher zu speichern

Wie kann ich das Teilen meines Authentifizierungstokens zwischen Tabs kombinieren und trotzdem sicherstellen, dass beim Schließen des Browsers nichts im Speicher zurückbleibt?

Wie lösen andere Websites dieses scheinbar einfache Problem?

    
Wilt 03.08.2015, 16:30
quelle

2 Antworten

4

Wir verwenden Cookies.

Speicher haben ihre Verwendung. Aber Cookies erfüllen alle Ihre Anforderungen.

  • Cookies werden auf derselben Registerkarte mit demselben Ursprung geteilt. Sie können sogar ihre Pfade angeben, diese werden jedoch standardmäßig freigegeben.

  • Cookies werden automatisch vom Browser gelöscht, wenn sie geschlossen sind, Sie müssen nichts tun; Dies ist wiederum das Standardverhalten.

  • Cookies können einfach so sicher oder sicherer als Speicher erstellt werden.

Manchmal ist die beste Lösung die einfachste Lösung. Keine Notwendigkeit, das Rad neu zu erfinden.

Cookie-Sicherheit

Session-Cookie wird wie sessionStorage auf der Festplatte gespeichert (falls der Browser abstürzt und wiederhergestellt werden muss). So sind sie in Bezug auf das Lesen / Schreiben von lokalen Festplatten ungefähr gleich sicher.

Sowohl das Cookie als auch das Speicherverarbeitungsskript können während der HTTP-Übertragung erworben oder sogar gestohlen werden. Daher müssen Sie in beiden Fällen HTTPS verwenden. (Dies ist mindestens sollten Sie tun.)

Cookie kann so konfiguriert werden, dass es HTTP only ist. verhindern, dass JavaScript darauf zugreift, also immun machen von XSS-Skript und greasemonkey Entführung .

Wenn ein Authentifizierungs-Token gestohlen wird, verknüpfen wir auch jedes Token mit dem Benutzer-Agent und der IP-Adresse des Rechners. Dies verhindert, dass das Token von jemandem aus dem externen Netzwerk verwendet wird. Wenn Sie möchten, können Sie weitere Content Negotiation Header zum Mix hinzufügen - nicht alle Robots kopiere alle Header.

Für eine weitere Sicherheitsstufe können Sie den Client Seite Fingerabdruck . Diese Fingerabdrücke müssen auf der Clientseite erfasst und über das Netzwerk übertragen werden, damit sie nicht kugelsicher sind. aber sie werden interne Angreifer (Angreifer im selben Netzwerk mit dem Benutzer) zwingen, durch einen anderen Rahmen zu springen.

An dieser Stelle wechseln sie normalerweise zu einfacher Angriffe außerhalb Ihrer Kontrolle.

    
Sheepy 20.10.2015, 15:07
quelle
5

Eine Möglichkeit, dies zu erreichen, könnte sein, das localStorage zu bereinigen, wenn die Seite geschlossen / entladen wird, damit nichts im Speicher zurückbleibt. Auf diese Weise verhält sich die localStorage wie die sessionStorage in dem Sinne, dass sie nach dem Schließen der Seite entfernt würde, aber sie hätte immer noch den Vorteil, dass localStorage sich über Tabs verteilt.

Dafür könnten Sie das Ereignis onbeforeunload verwenden:

  

Das beforeunload-Ereignis wird ausgelöst, wenn das Fenster, das Dokument und seine Ressourcen entladen werden sollen.

In etwa so:

%Vor%

Aber diese Lösung ist viel zu einfach und es gibt einen Haken: Wenn Sie einen Tab schließen, werden die localStorage -Daten gelöscht, auch wenn Sie andere Tabs geöffnet haben! (Verlassen sie ohne Daten). Um zu verhindern, dass die Daten gelöscht werden, wenn eine der Registerkarten geschlossen wird, können Sie die Anzahl der Registerkarten verfolgen und nur localStorage bereinigen, wenn die Anzahl null ist.

Der Pseudo-Code dafür wäre:

  1. Beim Laden der Seite:
    1. Wenn localStorage eine Anzahl von Tabs hat
      1. Erhöhen Sie die Anzahl der Tabs um 1
    2. Oder sonst (keine Anzahl von Tabs)
      1. Erstellen Sie eine Variable in localStorage , die die Anzahl der Register enthält.
      2. Setzen Sie diese Variable auf 1 (die aktuelle Registerkarte).
  2. Auf Seite entladen:
    1. Verringern Sie die Anzahl der Registerkarten um 1.
    2. Wenn die Anzahl der Tabs gleich Null ist (dies war das letzte offene Tab)
      1. Löschen Sie den Inhalt von localStorage

Und hier ist eine wirklich einfache Demo. Ich habe einige console.log -Nachrichten hinzugefügt, damit Sie die Konsole öffnen können und sehen, was mit jedem Laden / Entladen geschieht:

%Vor%

Kopieren Sie diesen Code in eine Seite und öffnen Sie ihn in mehreren Registerkarten. Sie sehen, wie die Anzahl der Registerkarten zunimmt (und aktualisiert, wenn Sie eine der geöffneten Registerkarten neu laden). Dann schließe sie und mit dem letzten wird der "Daten" -Eintrag in localStorage gelöscht.

    
Alvaro Montoro 17.10.2015 23:06
quelle