防止html中的xss onclick，onmouseout等对SPA

Question

I'm using AngularJS and ASP.Net Web API 2 for my customer survey system.

My web use a wysiwyg component to help user inputs his/her data. This is the html generated by my wysiwyg I'm using:

<h2 style="text-align: center;"><span style="text-decoration: underline;"><strong>Click here</strong></span><strong> to start using the </strong><strong><em>HTML editor online</em></strong></h2>
<p><span style="font-weight: 400;">Please</span><span style="font-weight: 400;"> try out the WYSIWYG HTML editor features found in the kitchen sink above to edit and format your text and images</span></p>
<p><span style="font-weight: 400;">You&rsquo;ll see the content created in the WYSIWYG-HTML editor in source code format on the right.</span><br /><br /></p>
<p>&nbsp;</p>
<p><img onclick="alert('Hello world')" onmouseout="alert('Mouse out')" src="https://icon2.kisspng.com/20180416/ucw/kisspng-tanki-online-video-gaming-clan-world-of-tanks-avat-joker-5ad4b1028d0565.2188790515238883865776.jpg" alt="" width="260" height="260" /></p>

This is what I'm doing on API for encoding the html code above.

/// Encode submited html content
        /// </summary>
        /// <returns></returns>
        [Route("encode")]
        [HttpPost]
        public IHttpActionResult Encode([FromBody] EncodeViewModel httpContent)
        {
            if (httpContent == null)
            {
                httpContent = new EncodeViewModel();
                Validate(httpContent);
            }

            if (!ModelState.IsValid)
                return BadRequest(ModelState);

            var encodedHtmlContent= HttpUtility.HtmlEncode(httpContent.HtmlContent);

            // Save content to database here.
            return Ok(encodedHtmlContent);
        }

When my front-end client load the encoded html and display to website page. I want that there will be no message Hello world or Mouse out displayed when I click on the image.

That means, I only allow text, images, videos to be displayed, but don't allow inline code in the content.

Are there any solutions for this ?

Thank you,

Answer 1

To ensure that some piece of html is safe is hard ! There are libraries to do html XSS filtering, but they are large and its still dangerous. Thats why there are things like mobiledoc . In general I would recommend you to not use HTML as your WYSIWYG output , then you dont have to escape it. Rather use something else and generate the HTML from it. Then you can be sure you dont generate dangerous HTML. Still be careful if you do simple string concatenations.

This is why we have things like BB-Code or wiki markup or mobiledoc.