Chunking Large Uploads in Livewire
This episode is for members only

Sign up to access "Chunking Large Uploads in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
12. Changing over the file path for security

Episodes

0%
Your progress
  • Total: 53m
  • Played: 0m
  • Remaining: 53m
Join or sign in to track your progress

Transcript

00:00
OK, so I said we'd come back to this potential security issue with the file path that we're effectively broadcasting to the client side.
00:07
Let's just remind ourselves of what that looks like. So if we come over to our uploader component and we find the event here where we get the response back, let's just take a look at what this is.
00:18
So we'll grab this. We'll go ahead and console log this out. Remember, this is all public coming through to the client. So we need to be really, really careful.
00:27
And let's choose one of these files and head over to the console. So let's cancel this off and choose another file here. We've got an error here, which we can fix up
00:36
as well in the next episode. Let's hit Upload here and just wait for this. And there we go. So this is revealing a lot about our directory structure, which
00:45
is not what we want to do. So let's go and figure out how we can kind of make this a little bit more secure. So instead of get real path, what we're going to do
00:55
is switch this over to get file name. We know that all of our chunks are always uploaded to this directory as they are being pieced together.
01:04
So the file name is really all we need. Now, if we do this now and if we change this over, of course, what is going to happen is when we upload this, it's not going to be able to find that file when
01:15
we try and reconstruct a file after this has been pieced together. So if we go over to our upload component here and we go up to where we are piecing this back together,
01:26
instead of the path, which is now just the file name of this, we now need to go into the storage directory and pick up that. So what we can do is we can use the storage path helper here
01:37
and wrap that in path. And then just before that, we can choose where this is. Now, that's under app and chunks and then the file name. So path technically is now the file name.
01:48
Let's keep it at path. So now, all we're broadcasting to the client is the name of the temporary file, which isn't a massive deal.
01:56
And then we're looking this up directly in our app from the backend. So let's go and just try this one more time and we should have this issue fixed.
02:03
And let's wait for that to finish. And there we go. So a little bit more secure now with not broadcasting the entire file structure of our application.

Episode summary

In this episode, we revisit a potential security issue where our app was exposing the full file path of uploaded files to the client. This isn't ideal—it basically lets clients see our server's directory structure, which could be risky!

We walk through exactly what's happening by logging what the client receives, showing how the real file path info is making its way to the browser. From there, we talk about what can be improved and decide to change the way we handle this. Instead of sending the full real path, we switch to just sending the file name. Since all the file chunks end up in the same directory on the server, the file name alone is all we really need to work with on the client side.

However, this means we also need to adjust how we piece together files on the server. Specifically, when reconstructing the file, we use a helper to build the correct path from the file name, pointing to the right directory.

By the end of the episode, we test it out to confirm everything still works, and now the client only receives the temporary file name—no sensitive paths exposed! Much better. We'll tackle a small error next time, but our file uploads are definitely more secure now.

Episode discussion

No comments, yet. Be the first!