Playing
07. History encryption API

Transcript

00:00
A common problem you might have come across with inertia being a single page application is when you log out of a session, but then you hit back in your browser, you can still potentially see sensitive data. Now this can be a security issue. So let's take a look at how the history encryption API solves this problem. Okay, so to demonstrate this, let's first of all just go over to our web routes. And for the dashboard, let's just send down any prop, it doesn't really matter, the example is still going to work in exactly the same way. So let's go ahead and say secret ABC, we'll head over to the dashboard component, define this prop out. And we'll go ahead and dump it on the page. So this is just going to be a string.
00:43
Okay, so down here, let's go ahead and dump out this secret value or really anything that you wouldn't want a user to see after they have signed out. Okay, so I'm going to go ahead and log out of my account. Now I'm going to hit back in the browser, and you can see that I can still see this data. Now that doesn't necessarily mean that I can still access any HTTP requests or any other requests that require me to be authenticated. As soon as I refresh the page here, you can see that this forwards us over to login. And the reason that this happens is just the way that Inertia pushes history to the browser, we can still go back to the previous page and see a sort of cached version of that.
01:22
Okay, so let's solve the problem. Now I'm going to go ahead and sign back in again. And let's go and enable the history encryption API functionality within the config. Now this might not be published, this is v2 that I'm working on here. So we might need to say php artisan vendor and publish and we're going to go ahead and choose the Inertia service provider that's going to publish our Inertia config. If you haven't already done that, you can go ahead and do that. So let's go into config and Inertia.php. Let's go all the way down to the bottom here, and you'll find this history encrypt option. So by default, you can see that this is false, we're going to go ahead and switch this over to true. Now this is going to globally enable this we can enable this on a sort of per request basis if we want to.
02:09
There's not really many scenarios where you'd want to do this, but I'll show you how to do that in a minute. Okay, so another really important part about this feature that's going to prevent this going back is that you need to be running using SSL. So it needs to be HTTPS otherwise it's not going to work. The API that this uses within the browser requires HTTPS to be enabled. So you'll need to do that either locally or in production. Okay, so just by enabling this, this wouldn't have had any effect. So once again, I'm going to go ahead and sign out and I'm going to go and hit back and you can see that it's still showing me the previous data that I shouldn't be able to see. Now what we're going to need to do to pretty much enable this is go over to wherever we sign out. So in a Breeze application, we have our controllers directly within our project here so we can come over to the authenticated session controller and we can come down to destroyed. This is where we sign out.
03:07
So essentially now what we want to do is after we've signed out, invalidated our session, regenerated our token or wherever you're doing this manually in your app, you're either going to use the inertia facade or the inertia helper to clear our history. So that's going to go ahead and clear all of the history that you have within the browser within this inertia session. Now that we've done that, let's go ahead and see what happens. I'm currently signed in over on my dashboard and I'm viewing this secret data. I'm going to go ahead and log out. That would have cleared the history out. If we head back now, you can see this no longer works. So it has now forwarded us back over to the login page and we can't or someone else can't go ahead and navigate back to see this information. OK, so most of the time you want to globally enable this, but what happens if you just want to do this per request or you want to disable this per request? Let's take a look. So we're still going to use inertia clear history, but let's go over to our dashboard. So let's go over to our web route since this is just a root closure. In here specifically, we're going to go ahead and again using either the inertia helper or the inertia facade. We're going to say encrypt history and we're going to explicitly set this to false. So just if you wanted to disable this for your dashboard, just before you return your inertia response is where you're going to want to call encrypt history false to disable this. Let's go ahead and have a look. So let's go and log ourselves out. In fact, we'll browse around just for a second. So let's re hit this page. Let's go ahead and log out and let's go back again and you can see that that's been disabled for that page specifically.
04:48
Now what you can also do if you don't want to globally enable this and this is false, you can enable it specifically for routes by either just using encrypt history or passing encrypt history true. So even though we've disabled this now config now we've enabled it here specifically for this route. Let's go back over and try this out. So let's go and sign ourselves back in. Give that a refresh, sign out, go back again and you can see sure enough we get exactly the same function as we saw before, but it's only been enabled for this route that we created. Now it's a little bit cumbersome having to manually call encrypt history for every single route that you want this enabled for if you don't want this enabled globally. So luckily you can actually use some middleware for this. For the middleware, you can either directly use the encrypt history middleware from Inertia to do this. So again, we've got this disabled globally, but we just want to do it for this dashboard route. If we head over and sign ourselves out and go back again, you can see that that has worked. So however you decide to set this up, it's a good idea to do this for any sensitive data. Personally, I'd go ahead and just enable this globally and disable it on any routes that I didn't want this enabled for if that was the case. But now we've got the history encryption API enabled globally. We've gone ahead and adjusted our authenticated controller to clear the history once we sign out. Now we can't navigate back in our browser to see any potentially sensitive information.
9 episodes1 hr 27 mins

Overview

With the release of Inertia v2, let’s cover everything new — now and into the future.

Each episode of this course will cover a new feature or significant change, so you’re ready to adapt and introduce new functionality into your Inertia-powered applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!