0

I recently learned about passing data between router components like this:

this._router.navigate(['page2'], {state : {myObject : this.secretInfo }});

And reading the data like this:

window.history.state

Is it safe to pass sensitive data this way?

Is there any way that someone could read the data just by looking through the JS source?

Rachid O
  • 13,013
  • 15
  • 66
  • 92
insano
  • 21
  • 5

1 Answers1

1

No, I don't believe this is a safe practice at all. It looks like window.history.state is something that's natively built into the browser, not specific to Angular (see the Mozilla docs for this) and you can access all of it's properties by just calling it in a console.log. Any user could easily pull up the inspector and see the data - and not only see it, but mutate that data as well!

Additionally, in any front-end application, you're never going to have "secret data" - even in Angular. Here's a good Stack Exchange question on why that is. If you have data that you want to keep secret, or lock down, you'll need to lock it down in the back-end on the server. For example, only showing a user's data, to that specific user, who is "logged in" on your server.

To add to this, that's not the only way to pass data in between routes in Angular components. If you're interested, here's a good SO question on that, and an article that was mentioned in the comments for different ways to do this: http://www.angulartutorial.net/2017/12/3-simple-ways-to-share-data-through.html

Otter
  • 240
  • 2
  • 11
  • 1
    Thanks man, you are right. This quote from StackExchange resumes it well "Server side guards are about data protection. Client-side guards are about providing a smoother user experience." – insano May 06 '21 at 14:24