Browser Storage Blazor 5

Eine der Neuerungen in .NET 5 sind Apis für ProtectedLocalStorage und Session Storage. Damit wird der Status der Web App Client seitig aufrecht erhalten. Im Fall von Local Storage dank der HTML 5 API in der Regel mindesten 5MB auch über das Ende der Browser Sitzung hinaus.

Nun lässt sich die einfach JS API (localStorage.setItem und.getItem) auch per JSInterop Bridge mit einem Einzeiler lösen

var res = await JSRuntime.InvokeAsync<string>
("localStorage.getItem", "Passwort");

Also warum eine C# Methode? Die Frage lässt sich für die Blazor WASM Variante recht einfach beantworten. Braucht es nicht. Anders ist die Sache gelagert wenn es eine Blazor Server App ist. Dann wird jeder C# Code am Server ausgeführt. D.h. der Inhalt des Localstorage wird vor dem speichern erst zum Server geschickt und dort das HTML JavaScript Schnippsel generiert, wieder zum Client geschickt um dann letztendlich im Browser etwas abzulegen. In diesem Fall für ein Passwort nicht akzeptabel. Der Server liest das Passwort im Klartext mit.

Lösung: symmetrische Verschlüsselung und damit das nicht vergessen wird, eine neue API. Das scheint Microsoft so wichtig, das im Hauseigenen DI Container die Objekte bereits angelegt sind. Einfach per Inject reinholen was man benötigt.

   1:  @inject ProtectedLocalStorage ProtectedLocalStorage
   2:  @inject ProtectedSessionStorage ProtectedSessionStorage

Als VB Entwickler ist mir die idente Benamung unsympathisch. Ich nehme nach wie vor gerne den _ Präfix. Hinweis 2: aktuell stimmt die Doku nicht und in den Blogeinträgen taucht immer wieder auf, man müsse in startup.cs services.AddProtectedBrowserStorage() einfügen. Das ist falsch, weil schon im DI vorhanden.

Dank Peter Schneider habe ich eine halbwegs verbindliche Aussage dazu in einem Github Issue gefunden.

Wenn man einmal weis wie es funktioniert (man beachte den gewählten Variablennamen), dann ist das schreiben und sichere lesen in den Browser Storage ganz easy.

   1:  void speichern()
   2:  {
   3:    ProtectedLocalStorage.SetAsync("wert1", Wert);
   4:  }
   5:   protected override async Task 
OnAfterRenderAsync(bool firstRender)
   6:  {
   7:    if (firstRender)
   8:    {
   9:     var aha = await ProtectedLocalStorage.
GetAsync<string>("wert1");
  10:     if (aha.Success)
  11:      {
  12:       Wert = aha.Value;
  13:       StateHasChanged();
  14:      }
  15:   }
  16:  }

Noch der Kontrollblick in den Browser per F12 Tools. Die Daten werden auch verschlüsselt abgelegt.

image

 

 

Kommentare sind geschlossen