Question

我正在将AngularJS和ASP.Net Web API 2用于我的客户调查系统。

我的网络使用wysiwyg组件来帮助用户输入他/她的数据。这是我使用的wysiwyg生成的html：

<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>

这是我在API上用于编码上述html代码的内容。

/// 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);
        }

当我的前端客户端加载编码的html并显示到网站页面时。我希望当我单击图像时，不会显示任何消息 Hello world 或 Mouse out 。

这意味着，我只允许显示文本，图像，视频，但不允许在内容中插入行内代码。

对此有任何解决方案吗？

谢谢

Answer 1

要确保html的某些部分是安全的，请困难！有一些库可以进行html XSS过滤，但是它们很大，仍然很危险。这就是为什么存在类似mobiledoc的原因。通常，我建议您不要将HTML用作所见即所得的输出，这样就不必转义它了。而是使用其他内容并从中生成HTML。然后，您可以确保不会生成危险的HTML。如果您执行简单的字符串连接，请务必小心。

这就是为什么我们有BB代码或Wiki标记或mobiledoc之类的原因。

防止html中的xss onclick，onmouseout，...用于SPA

1 个答案: