Build Your Own PHP Framework
This episode is for members only

Sign up to access "Build Your Own PHP Framework" right now.

Get started
Already a member? Sign in to continue
Playing
36. Adding tokens to forms

Episodes

0%
Your progress
  • Total: 4h 45m
  • Played: 0m
  • Remaining: 4h 45m
Join or sign in to track your progress
01. Setting up
01. Introduction
2m 23s
0%
02. Composer and PSR-4 Autoloading
6m 17s
0%
03. Bootstrapping and structure
3m 18s
0%
04. Error reporting with Ignition
3m 49s
0%
02. Container
05. Using a container
3m 21s
0%
06. Adding service providers
5m 23s
0%
07. Autowiring with reflection
5m 5s
0%
08. Refactoring to a singleton
4m 17s
0%
03. Application config
09. Building the Config class
6m 19s
0%
10. Reading and merging config files
6m 21s
0%
11. Registering service providers through config
2m 13s
0%
12. Using env files
6m 26s
0%
04. Routing and controllers
13. Everything starts with requests
6m 52s
0%
14. Adding routing
5m 27s
0%
15. Responding in routes
4m 13s
0%
16. Cleaning up responding
7m 12s
0%
17. Defining routes in a separate file
3m 10s
0%
18. Creating a controller
5m 17s
0%
19. Using services inside controllers
2m 3s
0%
05. Views
20. Installing Twig
6m 22s
0%
21. Rendering a view
3m 36s
0%
22. Debugging in Twig
4m 45s
0%
23. Creating a base layout
3m 38s
0%
24. Page titles in Twig
4m 31s
0%
25. Creating a Twig config helper
8m 57s
0%
06. Database
26. Setting up and querying the database
13m 29s
0%
27. Working with models
4m 32s
0%
28. Creating an example user profile page
5m 49s
0%
07. Authentication
29. Setting up Sentinel
8m 36s
0%
30. Creating the registration flow
5m 44s
0%
31. Registering and authenticating a user
5m
0%
32. Showing authenticated state
5m 40s
0%
33. Logging in
3m 59s
0%
34. Logging out
3m 2s
0%
08. CSRF Protection
35. Protecting routes with CSRF
7m 51s
0%
36. Adding tokens to forms
6m 5s
0%
09. Flashing messages
37. Basic session flashing
5m 46s
0%
38. Creating a Twig helper and flashing globally
1m 39s
0%
10. Validation
39. Validating the login form
6m 40s
0%
40. Manually adding validation errors
1m 24s
0%
41. Validating the registration form
4m 5s
0%
42. Custom validation rules
9m 39s
0%
11. Middleware
43. How middleware works
5m 41s
0%
44. Adding auth middleware and grouping routes
7m 37s
0%
45. Persisting old form data
6m 53s
0%
12. Exception handling
46. Creating an exception handler
3m 38s
0%
47. Custom 404 (and other error) views
7m 27s
0%
48. Rendering views for CSRF errors
5m 18s
0%
13. Pagination
49. Paginating with Eloquent
7m 48s
0%
50. Building a pagination view with Twig
7m 38s
0%
14. Global helpers
51. Registering functions with PSR-4
1m 50s
0%
52. Container resolution helper
2m 24s
0%
53. View and config helpers
4m 12s
0%
54. Route generator helper
4m 34s
0%

Transcript

00:00
So now that we have our cross-site request forgery token middleware applied,
00:03
we can't really do much until we apply this to our form. Now there's a couple of ways that you could do this. On any of the pages that you want to show this token or output this token within the form, for example, within our navigation, we could pass down from our controller
00:20
the token name key, the token name value, and the token value key, and the token value. Let's have a look at what this looks like and then we'll look at how we can extract this out. So we're going to end up with two hidden inputs. So we're going to have a hidden input in here with a specific name.
00:38
This will be a randomly generated name and a randomly generated value. Then we'll have a token name. So this will be something else. It doesn't really matter.
00:49
And we'll have a value for this as well. So these things will be randomly generated by that cross-site request forgery guard class, and we need to output them. But we don't really want to have to pass these down to a controller
01:02
every single time we want to apply cross-site request forgery protection. We're going to need to apply this to our register form and also our login form. So having to pass this down from a controller every single time is going to get a little bit annoying.
01:15
So we're going to go and build out a helper function. So let's go over to our Twig runtime extension, and let's create out a new function in here or a new method in here, which gives us back a cross-site request forgery token.
01:28
So effectively from here, what we're going to do is return to marker. So we're going to have an input in here with a type of hidden. That's going to have a name, and that's going to have a value as well. And there are a couple of other ways that we could output this HTML,
01:42
but let's just keep it really simple for now. And we're going to have this data in here as well. OK, so now that we've got this, what we want to do is pull out that guard class from our container.
01:54
So let's go ahead and grab this container and get cross-site request forgery. Now, let's go ahead and just look at one of the methods that we're going to need, and then we'll fill in the rest. So I'm going to go ahead and dump and kill the page here.
02:07
And let's go ahead and from guard access the get token key name method. So if we just open this up within the guard class, get token key name, this gives us the key for the first input that we need to implement. So let's just have a look at this by trying to use this over in our navigation.
02:28
So let's use cross-site request forgery in here, and let's see what happens. So let's go back and give that refresh. And yeah, of course, we just need to add this to our Twig extension here. So let's go ahead and pull in a line to reference that.
02:45
And we should see the output on the page. OK, so an incorrect method here. I probably just wrote this down wrong. So it should be name key.
02:54
And let's try that out again. Great. So now we've got cross-site request forgery token name. So that's the name of the key that we need to use.
03:02
That's the guard, the middleware will actually pick up. So we can take this and we can put this inside of the name just here. Now, we also have the name value, which is just get token name. And you can see that this changes every single time.
03:18
So every time this route is being hit, that middleware is generating out this new value. Let's grab this and put this into the value inside of here. And that will give us our first input that needs to be validated by that middleware. Now, the next two are very similar.
03:35
We just have the token value key. So let's have a look at that. And that will just give us the key for that value. The reason that we do this is because if this changes with inside of the middleware of what
03:49
key needs to be checked when we post through, we have a reference to it directly. We could manually put this in here. But like I said, if it ever changes, it's not going to work. OK, so we're going to put that into here.
04:02
So let's get rid of that extra single quote. And that's in there now. And then last but not least, we have the value itself. This will be a lot longer and more cryptographically secure.
04:14
So we have this to put directly into the value here. So now that we have done this, let's just pull this into the value here. What's going to happen is when we submit or when we output this token on the form and we submit this, Slim will check this name exists within our parse body, which we saw
04:34
within the middleware. And this one as well, it will compare these to the ones that it has generated for every single request. If they match, we'll be let through and we'll be able to post through.
04:44
If it doesn't match, we'll see that error that we saw before. Now, there's one issue here. We're returning this value. But if we just check this out, you can see that it literally outputs this in the markup.
04:54
That's just because we're outputting markup, which is automatically escaped with Twig. What we need to do, because we trust this data, we want to output the raw value of this. To do this, we can use a filter within Twig and we can use raw separated by a pipe. And that's going to actually output the value.
05:13
So if we just check our page source now, you can see that sure enough, that hidden input is in there with the value and the name. Now that refreshes every single time and changes for security. When we submit this through, once we land on this page, it should match and we should
05:28
be allowed to log out. And you can see that sure enough, we are. OK, so the last thing that we need to do, really importantly, is apply this to our login and register forms.
05:35
Now, if we head over to login and try and submit this, you can see that we get a failed check because we've applied that middleware globally. So we're just going to head over to our login page here or our login form, paste this in here, and we're going to do the same thing for register as well.
05:50
So we'll just put that at the very top of the form. OK, so now that we've done that, we should be able to sign in as normal and everything is working. We now have much more security on our forms thanks to cross-site request forgery protection.

Episode summary

In this episode, we dive into actually integrating our cross-site request forgery (CSRF) tokens into our forms, now that we've got the middleware set up. At first, we explore how to pass the necessary CSRF token keys and values from our controller down to the template, but quickly realize this can get repetitive and messy if we do it everywhere we need a form.

To make things easier, we create a helper function in our Twig runtime extension. This function automatically generates and outputs the right hidden input fields needed for CSRF protection, using values from our CSRF guard class. We go through setting up the helper, calling the appropriate methods to get both the token name and value, and explain how each piece fits together. We also touch on outputting these values raw in Twig so they render correctly in our HTML.

After testing the implementation in the navigation, we extend this to our login and registration forms, ensuring they're now protected too. The end result: our forms are now nicely secured against CSRF attacks, and we've kept our code clean and DRY by using a smart helper function.

Episode discussion

No comments, yet. Be the first!