Sichern einer einseitigen Anwendung, die auf react/react-router aufgebaut ist

Question

Ich habe eine einseitige Anwendung mit React und React-Router erstellt und ich kann nicht verstehen, wie diese Anwendungen gesichert werden können.

Ich fand eine schöne klare blog post, die einen Ansatz zeigt, aber es sieht nicht sehr sicher für mich. Der Ansatz, der in diesem Beitrag vorgestellt wird, besteht darin, das Rendering von Komponenten zu beschränken, auf die der Benutzer nicht zugreifen darf. Der Autor schrieb ein paar weitere Posts, die Variationen der Idee sind und sie auf React-Router-Routen und andere Komponenten erweitern, aber im Grunde scheinen sich alle diese Ansätze auf die gleiche fehlerhafte Idee zu verlassen: Der clientseitige Code entscheidet, was zu tun ist basierend auf Daten in dem Geschäft zu dem Zeitpunkt, zu dem die Komponenten zusammengesetzt sind. Und das scheint mir ein Problem zu sein - was soll einen unternehmungslustigen Hacker daran hindern, mit dem Code herumzuhauen, um Zugang zu Sachen zu bekommen?

Ich habe gedacht drei verschiedene Ansätze, von denen keiner bin ich sehr zufrieden mit:

1. ich sicherlich meinen Autorisierungscode so schreiben könnte, dass der Client-Seite Code ständig überprüft mit dem Server zur Autorisierung, aber das scheint verschwenderisch.

2. Ich konnte die Anwendung so einrichten, dass Module vom Server auf den Client übertragen werden, nachdem der Server überprüft hat, dass der Client berechtigt ist, auf diesen Code zuzugreifen. Aber das scheint meinen Code in eine Million kleiner Module zu zerlegen anstatt in ein schönes, monolithisches Paket (ich benutze browserify).

3. Einige Systeme des serverseitigen Renderings funktionieren möglicherweise, wodurch sichergestellt wird, dass der Benutzer nur Seiten sehen kann, für die der Server die Berechtigung zum Anzeigen festgelegt hat. Aber das scheint kompliziert und scheint auch ein Schritt zurück zu sein (ich könnte einfach eine traditionelle Web-App schreiben, wenn ich wollte, dass der Server alles macht).

Also, was ist der beste Ansatz? Wie haben andere Leute dieses Problem gelöst?

Answer 1

Wenn Sie versuchen, den Code selbst zu schützen, scheint es, dass jeder Ansatz, dass entweder diesen Code an den Client sendet, oder sendet den Code Lage diesen Code zu laden, wäre ein Problem. Daher können auch traditionelle einfache Ansätze mit Code-Splitting hier problematisch sein, da sie den Dateinamen für das Bundle offenbaren. Sie könnten es schützen, indem Sie einen Cookie auf dem Server benötigen, aber das scheint eine Menge Aufhebens zu sein.

Wenn das Ausblenden des internen Codes von nicht autorisierten Benutzern eine Voraussetzung für Ihre Anwendung ist, würde ich empfehlen, sie in zwei separate Apps mit separaten Bundles aufzuteilen. Von einem zum anderen zu gehen, würde eine separate Anfrage erfordern, aber dies scheint mit dem übereinzustimmen, was Sie erreichen wollen.

Answer 2

Solange der Speicher keine Daten enthält, die der Benutzer nicht besitzen darf, sollte es kein allzu großes Problem geben, selbst wenn ein Hacker die Quelle überprüft und Module/Verbindungen sieht, die er nicht haben sollte Zugriff auf.

Der Zustand innerhalb des Geschäfts sowie kritische Logik würde von Dienstleistungen kommen und diese müssen gesichert werden, ob es ein SPA ist oder nicht; aber besonders auf einem SPA.

Auch: serverseitige Rendering mit Redux ist nicht zu komplex.Sie können hier darüber lesen:

http://redux.js.org/docs/recipes/ServerRendering.html

Es ist im Grunde nur eine Wurzel html mit einem vordefinierten Zustand dienen verwendet. Dies erhöht die Sicherheit und Ladegeschwindigkeit weiter, widerspricht jedoch nicht der Idee hinter SPAs.

Answer 3

Große Frage. Ich bin nicht bekannt, dass absolut Best Practices im Umlauf gibt, die andere überflügeln scheinen, so dass ich nur ein paar Tipps/Gedanken hier bieten:

• ein Remote-API die tatsächliche Auth behandeln sollte, Na sicher.
• Sitzungen müssen geteilt werden, so ein Geschäft wie redis ist in der Regel eine gute Idee, vor allem. für schnelles Lesen.
• Wenn Sie ein serverseitiges Rendering mit Hydration durchführen, benötigen Sie eine Möglichkeit, den Sitzungsstatus zwischen Server und Client freizugeben. Siehe den unten stehenden Link für eine Möglichkeit universal zu reagieren
• auf dem Client, könnten Sie einen Session-Cookie oder JWT-Token senden, lesen Sie es in den Speicher (vielleicht redux verwenden und in Ihrem Statusbaum?) Und vielleicht Middleware (a la redux?) um es als Header auf Anfragen zu setzen.
• auf dem Client, können Sie sich auch auf localStorage verlassen, um den Cookie/JWT
• vielleicht den Code in zwei Bundles, eins für Auth, eins für die tatsächliche App-Logik zu teilen?

Siehe auch:

• https://github.com/erikras/react-redux-universal-hot-example für Trink Beispiel
• https://github.com/erikras/react-redux-universal-hot-example/issues/608