vue-router route encryption (without webpack) for security

Question

In vue or vue-router ; Is it possible to minimize encrypt the route html/js and decrypt and use by vue-router at other end

export default{
  template:'',
  data:...
  methods:..
}

just to make sure code is minimized and not exposing all the client code for attacks/security

Note: not using webpack.

Another Note: to clarify: export default{... } was clearly visible in the network panel. Causing the source of hacks and security breaches.

So here is what i am looking for : Encryption will be done on server side in node.js

Decryption will be done on client side after the network panel loads the route.

So now instead of export default .. it will now be some encrypted text in network panel. After decryption and decompression it gets loaded into vue-router.

Answer 1

First - there is no point to encrypt routes. Any kind of encryption you will make on backend - should be decrypted on the frontend. And you will make a method that would decrypt it. For anyone who can use chrome devtools it would be a matter of minutes to bypass your encryption.

Second - you may obfuscate your code. But again - it just a matter of minutes, literally, to deobfuscate it.

And any of the above methods would just increase bundle size and degrade performance.

At first, you must implement security on your backend.

If you are so worried that somebody will see your very private routes - build two or three bundles. With the same components/almost same look. But with limited routing. It's quite easy to implement due to Vue component nature. And depending on user type inject the corresponding bundle into the page.