Frage zu VUE.JS 3 in Verbindung mit NODE.JS

    Moin zusammen,


    ich habe damals hier und da mit Vue und bis heute viel mit Node gearbeitet. Immer wieder kommen mir Fragen auf, dessen Antwort ich so nicht im Internet auf Anhieb finde.


    Ich führe die Fragen mal als Stichpunkte auf

    1. Habe ich das richtig verstanden: Vue ist eine reines Frontend-Framework?
      Man benötigt also, nicht wie in PHP bspw., immer eine Backend-Schnittstelle, meistens eine (selbst geschriebene) REST-Full API Schnittstelle o.ä.?
    2. Ist der ganze Script-Code für den Nutzer einsehbar? Ich konnte auch im Build-Status meinen Code einsehen. Bedeutet also, ich kann keine lokale Sicherheitsabfrage stellen. Diese sind ja dann einfach im Quellcode einsehbar?
      Als Beispiel: Ich möchte für ein sehr kleines Projekt einen Login anbieten, aber dafür keine Nutzerdatenbank anlegen. Die Anmeldung läuft über statisch angelegte Werte - die dann im Quellcode lesbar sind. Gibt es hierfür eine andere Methode?
    3. (Als Hinweis: Ich nutze auch Vue-Router und Vuex) Eine Variable im Storagemanager von Vuex handelt den Status der Anmeldung. Kann der Nutzer diese nicht einfach manipulieren und ist somit dann auch angemeldet?

    Ich weiß aktuell nicht ob und wie meine Application eine sichere Anmeldung hat/erstellt. Ich gehe grundsätzlich davon aus, dass der Nutzer immer den Quellcode einsehen und bearbeiten kann, somit auch den Status seiner Anmeldung oder auch das aufrufen von Routen, wofür er keine Berechtigung hat.


    Ich wäre für sehr viele Informationen dankbar.


    LG

  • Edgar

    Hat den Titel des Themas von „Frage zu VUE.JS 3 in Verbindung mit NOODE.JS“ zu „Frage zu VUE.JS 3 in Verbindung mit NODE.JS“ geändert.

    Ich versuche mich mal an den Fragen:


    Zitat von Edgar

    Habe ich das richtig verstanden: Vue ist eine reines Frontend-Framework?
    Man benötigt also, nicht wie in PHP bspw., immer eine Backend-Schnittstelle, meistens eine (selbst geschriebene) REST-Full API Schnittstelle o.ä.?

    Ja, Vue JS ist ein Frontend-Framework. Sprich es vereinfacht dir das Seitenerstellen mit Hilfe von JS. Dadurch kannst du Module und Templates erstellen und diese immer wieder verwenden und kompliziertere Logiken einfacher gestalten. (Wobei VUE inzwischen auch SSR (Server Side Rendering) kann, aber trotzdem bleibt es natürlich ein Frontend-Framework hier ein Artikel mal dazu: https://vuejs.org/guide/scaling-up/ssr.html)


    Die zweite Frage verstehe ich nicht ganz. VUE basiert auf Javascript und das kann direkt beim Client ausgeführt werden, also ja, du brauchst kein Backend, das würde alles in einer .html Datei so ausgeführt werden können.


    Zitat von Edgar

    Ist der ganze Script-Code für den Nutzer einsehbar? Ich konnte auch im Build-Status meinen Code einsehen. Bedeutet also, ich kann keine lokale Sicherheitsabfrage stellen. Diese sind ja dann einfach im Quellcode einsehbar?
    Als Beispiel: Ich möchte für ein sehr kleines Projekt einen Login anbieten, aber dafür keine Nutzerdatenbank anlegen. Die Anmeldung läuft über statisch angelegte Werte - die dann im Quellcode lesbar sind. Gibt es hierfür eine andere Methode?

    Ja, alle JS Logiken sind immer einsehbar, da sie am Client ausgeführt werden und nicht am Server.

    Ja, dafür brauchst du ein Backend-System wie z.B. NodeJS, das läuft ja dann am Server und nicht am Client.

    Zitat von Edgar

    (Als Hinweis: Ich nutze auch Vue-Router und Vuex) Eine Variable im Storagemanager von Vuex handelt den Status der Anmeldung. Kann der Nutzer diese nicht einfach manipulieren und ist somit dann auch angemeldet?

    Theoretisch ja, aus diesem Grund sollte natürlich auch immer ein Token/Hash generiert werden, womit abgeglichen werden kann, dass man wirklich angemeldet ist. :)

    ast2ufdyxkb1.png


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. :S

    Zitat von Kaliber

    Ja, alle JS Logiken sind immer einsehbar, da sie am Client ausgeführt werden und nicht am Server.

    Da wäre es aber auch noch Wert zu erwähnen, dass im Falle von Vue (oder auch anderen Frontend Frameworks) meist ein Bundler wie z.B. Vite verwendet wird, wodurch der Code den der Client am Ende erhält bundled und minified ist, wodurch es gar nicht mehr der "originale" Source Code ist und dadurch auch schwerer zu lesen ist.

    Vom bundled Code wird also keiner einfach so copy & paste deine Seite nachbauen können.

    Zitat von LeonMrBonnie

    wodurch der Code den der Client am Ende erhält bundled und minified ist, wodurch es gar nicht mehr der "originale" Source Code ist und dadurch auch schwerer zu lesen ist.

    Das mag durchaus sein, allerdings gibt es Seiten, wodurch das minified rückgängig gemacht werden kann. Zudem bleiben Strings erhalten und so ist es schon möglich einige Eindrücke zu erhalten...

    Primär ging es ja auch nur um die Möglichkeit, ob es möglich wäre, nicht, ob es trivial ist ^^

    ast2ufdyxkb1.png


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. :S

    Danke für die Informationen. Eine Frage bleibt doch noch offen:


    Zitat von Kaliber

    Theoretisch ja, aus diesem Grund sollte natürlich auch immer ein Token/Hash generiert werden, womit abgeglichen werden kann, dass man wirklich angemeldet ist. :)

    Wie genau mach ich das, bzw. wie verläuft die Prüfung? Alles ist ja beim Client einsehbar und veränderbar. Dann kann ich doch auch die Prüfung des Token/Hashes einfach umgehen.

    Zitat von Edgar

    Wie genau mach ich das, bzw. wie verläuft die Prüfung? Alles ist ja beim Client einsehbar und veränderbar. Dann kann ich doch auch die Prüfung des Token/Hashes einfach umgehen.

    Der Token/Hash liegt beim Client, aber die Prüfung findet natürlich Serverseitig statt, mittels z.B. NodeJS :)


    Bei Verifizierungsverfahren kommt man nicht drum herum eine Serverseite zu haben ^^

    ast2ufdyxkb1.png


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. :S

    Das ist mir soweit klar. Aber gehe ich mal davon aus, dass ich eine Route habe, die man nur aufrufen darf, wenn man angemeldet ist, findet diese Prüfung ja auf Clientseite statt. Ich habe eine Middleware (falls man das auch so bei Vue nennt), welche prüft, ob man angemeldet ist. Diese Prüfung ist aktuell nur eine Variable die ich auf true setze. Diese ist ja einfach veränderbar. Muss ich bei jedem Aufrufen einer Seite auch prüfen, ob dieser einen gültigen Hash hat? Also immer wieder das Backend ansprechen?

    Zitat von Edgar

    Ich habe eine Middleware (falls man das auch so bei Vue nennt), welche prüft, ob man angemeldet ist

    Ich weiß nicht, wie hier der Code dafür aussieht. Aber vermutlich prüfst du gegen den LocalStorage, ob da eine Variable gesetzt ist. Und da der LocalStoarge beim Client liegt, kann dieser natürlich sehr einfach manipuliert werden.



    Zitat von Edgar

    Muss ich bei jedem Aufrufen einer Seite auch prüfen, ob dieser einen gültigen Hash hat? Also immer wieder das Backend ansprechen?

    Genau, da das ja einfach manipulierbar ist und somit "theoretisch" jeder auf die Seite kommen kann, bedarf es einer Backend Prüfung, ob diese Person wirklich darauf Zugriff hat.

    ast2ufdyxkb1.png


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. :S

    Gefällt mir 1
    Zitat von Edgar

    Das ist mir soweit klar. Aber gehe ich mal davon aus, dass ich eine Route habe, die man nur aufrufen darf, wenn man angemeldet ist, findet diese Prüfung ja auf Clientseite statt. Ich habe eine Middleware (falls man das auch so bei Vue nennt), welche prüft, ob man angemeldet ist. Diese Prüfung ist aktuell nur eine Variable die ich auf true setze. Diese ist ja einfach veränderbar. Muss ich bei jedem Aufrufen einer Seite auch prüfen, ob dieser einen gültigen Hash hat? Also immer wieder das Backend ansprechen?

    Wie Kaliber schon erwähnte kann man diesen hash theoretisch ändern. Aber wenn auf dieser Seite Daten geladen werden die von einem Server kommen wo eine Authentifizierung benötigt ist, brauchst du dir keine Gedanken dazu machen da der Inhalt sowieso "leer" wäre.



    -----


    Allgemeines Kommentar dazu, es scheint so als würdest du gerne Server Funktionalitäten bzuw. Backends vermeiden wollen, mit z.B Nuxt 3 (Ist Vue nur noch mal etwas "besser") hast du die Möglichkeit Inhalte Server-Side zu rendern. Dort existieren auch Server-Side Middlewares etc. worin du deine statische Authentifizierung verstecken kannst ohne das der Client da etwas manipulieren kann.