Imaginemos que un cliente abre su sitio web nuxt.js en la página de índice. A partir de ahí, se autentican (usó @nuxtjs/auth-next para ese propósito). Luego pasan a una página segura que solo pueden ver los usuarios autenticados. Esta página segura es un archivo .vue en su carpeta "pages" con middleware: ["auth"] .
Ahora bien, ¿cómo es realmente segura esta página? Quiero decir, ¿no podría un usuario malicioso alterar la página y acceder a ella sin estar autenticado de todos modos? Porque la "seguridad" en este escenario solo se implementa en el lado del cliente, ¿verdad? [Editar]
Al ser su aplicación un SPA al final, si desea omitir un middleware con su verificación de seguridad, puede deshabilitar el JS en la página. Pero luego, dado que no se genera contenido directamente, no verá nada porque no está aquí (como un archivo estático).
Si su aplicación es isomorfa (básicamente tiene un ssr: true ), el módulo de autenticación aún deshabilitará el acceso a esas páginas (puede verificar dos veces).
Al final, la información crítica se recibe cuando:
Al final, su código del lado del cliente no necesita ser seguro. Si alguien de alguna manera piratea el estado del lado de su cliente y llega a la página confidencial, aún no tendrá un token JWT válido ya que la verificación aún ocurre en el backend.
El que se puede generar solo al enviar las credenciales adecuadas al backend y hacer que el backend las valide.
Ahora bien, ¿cómo es realmente segura esta página?
El contenido protegido se sirve a partir de una solicitud si el cliente ha proporcionado un token de acceso válido. El contenido protegido se proporciona en tiempo de ejecución.
Porque la "seguridad" en este escenario solo se implementa en el lado del cliente, ¿verdad?
La seguridad no solo se implementa en el lado del cliente. La premisa es: el token de acceso se ha obtenido de forma segura a través de un flujo de autenticación con un servidor de autenticación. Recomiendo leer más sobre los flujos de autenticación si esto no suena claro. Auth0 tiene buena documentación sobre diferentes flujos. https://auth0.com/docs/authorization/flows
Entonces, ¿cuál es la mejor manera de mostrar una página compleja solo a usuarios autenticados?
El contenido se proporciona en tiempo de ejecución. Del lado del servidor o del lado del cliente. Hay algunas guías de configuración aquí para Nuxt. Aquí está el primero (Auth0) que encontré de la lista. https://auth.nuxtjs.org/providers/auth0
No sé qué tan actualizadas están esas guías, pero los proveedores de servicios de autenticación tienden a tener guías actualizadas.