YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Escaping Templates - Web Development

Get Embed Code
2 Languages

Showing Revision 7 created 09/15/2017 by Dejan Trajkovic.

  1. Let's talk about how we fix that issue. Jinja makes it
  2. easy to do this. There are two ways, I'll show you the
  3. way that's simplest first. They've got the syntax for adding a
  4. pipe and then a filter. There are a couple, there are lots
  5. of built in features into Jinja. One of them is
  6. called escape. So if you say when you print your item, if
  7. you say pipe escape, it'll actually get escaped. Let's see what
  8. this looks like in our browser. Now when I reload this page,
  9. the junk is actually getting escaped. And if I
  10. look at the source code for this page, we can
  11. see down here that Jinja ran it through an HTML
  12. escaping function and replaced the less than symbol with ampersand
  13. less than, and the greater than symbol with ampersand
  14. greater than. Just like we did in the previous lesson.
  15. And again, you can see that down here with the
  16. h1. But that's not how I prefer to do things
  17. in any templating language. Because it's a little error prone.
  18. If you forget to put this in, you've got a
  19. security hole. There is another way around this, however. If
  20. you go, when you initialize Jinja, if you say this, auto
  21. escape equals true, Jinja will automatically escape all variable substitutions.
  22. So let's make sure this is still working in our
  23. browser. I reload this page, trust me I reloaded it,
  24. nothing changed. If we check our source code, again nothing changed.
  25. We can see it's all skipped properly here. The reason I like
  26. to do this, is that prevents you from accidentally making a mistake.
  27. It's a lot easier to see that oh, I need to deal
  28. with this input when it's here, than it is to see a
  29. subtle error or you know, not be able to see it at
  30. all when a user is trying to hack your website. So I
  31. always, in every templating language that I use, look for the equivalent
  32. of auto escape equals two. And so far every one I have used
  33. has something along this line. Now what if you actually want
  34. to display the HTML? Well, there is a filter for just
  35. that. And you can say safe, pipe safe. And so if
  36. you know the HTML is safe, you can undo it this way,
  37. and I feel like this is the best way, you to
  38. opt in to the unsafe way rather than opting in to the
  39. safe way. So if I save this and we go back
  40. to our browser and I reload this page, we can see that
  41. it is rendering unsafely again. But at least this time we
  42. did it on purpose, we knew what to expect. And you
  43. do this if you want to you know, sanitize the out
  44. put a little bit. For example if your building a comment page
  45. and you want the users to have some amount of formatting
  46. but not everything. You can only allow certain things and then
  47. print it using this filter. But anyways, let's get that out
  48. of here because we don't, we don't trust our shopping cart users.