表单文本在提交、保存、修改、输出过程中的编解码处理

XSS （跨站脚本攻击）虽然手段初级，但网站开发者稍不留神就会给黑客留下机会。在 ASP.NET 中，默认阻止了表单文本中的危险字符（譬如 HTML 标签），但有时为了功能需求，我们需要在服务端获取用户输入的任何文本或者富文本编辑器的内容，那么首先应该使用 JS 将数据进行 HTML 编码。

将以下测试文本填入到多行文本框内：

&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>

或将以下测试文本填入到单行文本框内：

&a=1'">a< /input>b<input value='"c<script>alert(1)</script>

使用 jQuery 异步 POST 方式提交到服务端：

$.post("post.aspx", {
  myData: $("#myTextarea").val()
}, function (data) {
  console.log(data);
}, 'text');

这时，post.aspx 将返回 500 内部服务器错误：

从客户端(......)中检测到有潜在危险的 Request.Form 值。

将提交代码稍作改动，把 POST 数据进行 HTML 编码：

$.post("post.aspx", {
  myData: $('<div />').text($("#myTextarea").val()).html()
}, function (data) {
  console.log(data);
}, 'text');

这样，服务端接收到的 myData 值应该是：

&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>

顺利通过 ValidateRequest 的检验。

我们在服务端对其进行一次 HTML 解码。

string myData = HttpUtility.HtmlDecode(Request.Form["myData"]);
// 接收时，去首尾空格、去 null
string myData = HttpUtility.HtmlDecode(Request.Form["myData"]?.Trim() ?? "");

客户端的编码和服务端的解码是一对互操作。

我们把用户输入的原始内容存入数据库中。

页面输出时，必须要经过 HTML 编码，否则内容将被解释成 HTML，出现跨站攻击漏洞。下面列出常见的输出到页面的方法（注意区分 <%= 与 <%:，<%# 与 <%#:）。这样，浏览器中查看源代码看到的即是 HTML 编码的内容，渲染后看到的即是原本在输入框中输入的原文。

// WebForm 输出到 div
<div><%: myData %></div>

// WebForm 输出到 pre
<pre><%: myData %></pre>

// WebForm 输出到文本脚本
<script type="text/plain"><%: myData %></script>

// WebForm 输出到单行文本框
<input type="text" value='<%: myData %>' />

// WebForm 输出到多行文本框
<textarea><%: myData %></textarea>

// WebForm 赋值到 <asp:TextBox /> （不需要手动 HtmlEncode）
input_myData.Text = myData;

// WebForm 绑定到数据控件
<%#: Eval("myData") %>

// MVC Razor
@Html.DisplayFor(model => model.myData)
// 或
@Model.myData

<%: 会自动替换 " 和 ' 为 " 和 '，不用担心输出到 <input /> 的 value 属性中会产生问题。

如果数据由 <textarea /> 提供并希望在输出时保持换行，那么先执行 HtmlEncode，再替换换行符：

// WebForm 输出到 div
<div><%= HttpUtility.HtmlEncode(myData)?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %></div>

// WebForm 输出到 pre（无须处理换行）
<pre><%: myData %></pre>

// WebForm 绑定到数据控件
<%# HttpUtility.HtmlEncode(Eval("myData"))?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %>

更特殊的例子：

// WebForm 输出到 Highcharts
var chart = Highcharts.chart('container', {
  title: {
    text: $('<div />').html('《<%: exam.title.Replace("\r", "").Replace("\n", "") %>》问卷回收量').html()
  },
  ...
});

// 导出 Excel 时指定文件名（会自动替换非法字符）
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", exam.title));

如果我们使用在线编辑器来编辑我们的内容，需要在浏览输出时实现“所见即所得”，那么就需要将原文输出到源代码，渲染后展示效果：

// ASPX
<%= myData %>

// Razor
@Html.Raw(Model.myData)

务必保证是网站编辑人员在授权登录下提交在线编辑器的内容，否则可能成为跨站攻击的漏洞。通常不建议普通网友使用在线编辑器，如一定要用，必须处理一些危险的标签，参此文。

总结

客户端输入的原文，经过 JS 的 HTML 编码传输到服务器，HTML 解码后存入数据库，读取展示时 HTML 编码输出（在线编辑器的内容不需要编码）。

建议

如果我们对所有输入的字符串作以上编码解码的处理想必是非常繁琐且容易出错的。微软提供了 ValidateRequest，不用不是太浪费了？

对于普通的文本框输入，我们省略 JS 端的 HTML 编码，省略服务端的 HTML 解码即可，输出仍然按文中描述处理。

好的用户体验是在 Request.Form["xxx"] 时进行容错处理并返回客户端友好提示。

我们仅针对在线编码器及需要以代码为内容的数据提交进行编码、解码处理，以绕过 ValidateRequest。

顺便提一下，千万不要这样写：

<%= Request.QueryString["xxx"] %>

千万不要动态拼接 SQL 语句，防止 SQL 注入。