Vue router security of routes

Question

I'm learning Vue for 2 weeks now and I cannot find an answer to this question about routing security.

When I'm securing routes in Vue with the meta fields and a routing guard like in the examle I wonder what a client could do to see the components still.

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      children: [
        {
          path: 'bar',
          component: Bar,
          // a meta field
          meta: { requiresAuth: true }
        }
      ]
    }
  ]
})



router.beforeEach((to, from, next) => {
  // check if authenticated by jwt from store or localstorage
})

The route /foo/bar is protected by the beforeEach hook and the requiresAuth metafield. But all this code is on clientside (as minified version, but still there). A user could alter the code and see the component.
I know that I have to protect all the api routes on the Backend again so that the user can't get any private information. But a user could possibly see the protected component.
As I see it there is no way to hide a component from a user 100% secure?

acdcjunior acdcjunior · Accepted Answer · 2018-03-11T18:24:06

If the user alters the frontend code, then the component would be viewable, yes.

But the data that would populate that component should not be viewable due to the backend restricting access to such data.

If the backend does not restrict it, it is a big security flaw, independently of Vue (the attacker could request from the API directly without a JS client).

As far as routes, the authentication you are doing is more of a workflow/usability concern. This is because, in general, there's no way to prevent altering of frontend code. You can do minification + uglification to make it more difficult, but that's about it. (Usually the minification is done to improve performance, not even for security reasons.)

Have a look at Vue-Router/Lazy Loading Routes if you want to break your app in chunks:

When building apps with a bundler, the JavaScript bundle can become quite large, and thus affect the page load time. It would be more efficient if we can split each route's components into a separate chunk, and only load them when the route is visited.

Technically, you could secure a chunk, having it available for download only to specific permissions. You should ask yourself if the work necessary to achieve this is really worth it, though .

Vue router security of routes

1 Answers