Let's talk about how we fix that issue. Jinja makes it
easy to do this. There are two ways, I'll show you the
way that's simplest first. They've got the syntax for adding a
pipe and then a filter. There are a couple, there are lots
of built in features into Jinja. One of them is
called escape. So if you say when you print your item, if
you say pipe escape, it'll actually get escaped. Let's see what
this looks like in our browser. Now when I reload this page,
the junk is actually getting escaped. And if I
look at the source code for this page, we can
see down here that Jinja ran it through an HTML
escaping function and replaced the less than symbol with ampersand
less than, and the greater than symbol with ampersand
greater than. Just like we did in the previous lesson.
And again, you can see that down here with the
h1. But that's not how I prefer to do things
in any templating language. Because it's a little error prone.
If you forget to put this in, you've got a
security hole. There is another way around this, however. If
you go, when you initialize Jinja, if you say this, auto
escape equals true, Jinja will automatically escape all variable substitutions.
So let's make sure this is still working in our
browser. I reload this page, trust me I reloaded it,
nothing changed. If we check our source code, again nothing changed.
We can see it's all skipped properly here. The reason I like
to do this, is that prevents you from accidentally making a mistake.
It's a lot easier to see that oh, I need to deal
with this input when it's here, than it is to see a
subtle error or you know, not be able to see it at
all when a user is trying to hack your website. So I
always, in every templating language that I use, look for the equivalent
of auto escape equals two. And so far every one I have used
has something along this line. Now what if you actually want
to display the HTML? Well, there is a filter for just
that. And you can say safe, pipe safe. And so if
you know the HTML is safe, you can undo it this way,
and I feel like this is the best way, you to
opt in to the unsafe way rather than opting in to the
safe way. So if I save this and we go back
to our browser and I reload this page, we can see that
it is rendering unsafely again. But at least this time we
did it on purpose, we knew what to expect. And you
do this if you want to you know, sanitize the out
put a little bit. For example if your building a comment page
and you want the users to have some amount of formatting
but not everything. You can only allow certain things and then
print it using this filter. But anyways, let's get that out
of here because we don't, we don't trust our shopping cart users.
修正する方法を解説しましょう。
jinjaならこれを簡単に解決できます。
2つ方法があるので簡単な方から先に説明します。
jinjaにはパイプとフィルターという構文があります。
jinjaには多くの機能が組み込まれており。
その一つがエスケープです。
例えば "item | escape" と書きます。
これでエスケープができます。
実際にブラウザで確認してみましょう。
ページをリロードすると、エスケープされています。
ソースコードを見ると
この通りjinjaのHTMLエスケープ機能を通過して
< は < に変換され
> は > に変換されています。
前にやったエスケープのレッスンと同様の事が行われています。
h1タグも同じくエスケープされています。
しかしこれはテンプレート言語の種類に関わらず、私のオススメの方法ではありません。
潜在的にエラーを発生させる可能性が高いからです。
ここにエスケープ用のコードを入れ忘れたら、セキュリティホールが生まれます。
この問題を解決する方法があります。
jinjaの初期化を行うコードで autoescape=True と書きます。
こうするとjinjaは全ての変数置換について自動でエスケープを行います。
では動作に影響がないかブラウザに戻り確かめましょう。
ページをリロードします。
見た目は変わりませんがリロードしました。
ソースを確認しても変化はありません。
このように正しくエスケープされています。
私がこの方法を推奨する理由はミスを防止できるからです。
このように全部エスケープして表示してしまえば
ユーザのインプットにどう対処すべきか簡単にわかります。
そうでなければWEBサイトを操作しようとするハッカーの試みに
気づくのが難しいか全く気づかないでしょう。
ですから私は、テンプレート言語を利用するときはいつも
この autoescape=True に相当するものを探します。
そしてたいていの場合、同じような機能が見つかります。
では逆にHTMLを解釈させたい場合はどうしたら良いのでしょう?
そんな場合に使うフィルターがあります。safeです。
HTMLが安全だと知っている場合に限り、エスケープを取り消します。
これがオススメの方法です。
デフォルトではエスケープをしておいて、意図的・部分的にエスケープを解除するのです。
このコードを保存して
ブラウザをリロードしましょう。
エスケープが取り消されています。
しかし、少なくともこれは目的を持った意図した動作です。
出力のサニタイズをチェックしたいときなどに使えるでしょう。
例えばコメントページを作っていて
全てではないものの、幾らかのHTMLを許可したい場合です。
幾らかのHTMLを許可してから、このフィルターを通すのです。
safeフィルターについてはこれくらいで良いでしょう。
どのみちショッピングリストアプリのユーザに
HTMLは入力させないからです。