如何在GoLang模板中正确添加HTML标签属性

问题描述 #

现有一段可正常工作的Go模板代码，能为<td>标签正确添加onclick事件：

{{range . }}
    <td {{ if not .IsDisabled }}onclick="return toggle_active($(this))"{{ end }}>
      [x]
    </td>
{{end}}

但通过模板内定义字符串或Go函数动态生成onclick事件时，出现HTML转义问题，无法正常渲染出有效属性：

• 示例1（模板内定义字符串）：

  {{$clickEvent := "return toggle_active($(this));"}}
  <td {{$clickEvent}}>[x]</td>
  

  渲染后事件内容被转义，无法触发点击逻辑。

• 示例2（Go函数返回属性字符串）：
  Go函数代码：

  func (d TemplateObject) Click() string {
      return "onclick=\"toggle_active($(this))\""
  }
  

  模板调用：

  <td {{.Click}}>[x]</td>
  

  渲染后属性中的引号被转义为"，或直接将字符串输出到标签内部，无法识别为HTML属性。

解决方案 #

1. 模板内处理：使用safeHTMLAttr过滤器 #

Go模板默认会对字符串做HTML转义，若确认动态内容安全，可使用safeHTMLAttr标记内容为安全的HTML属性，跳过转义：

{{$clickEvent := "onclick=\"return toggle_active($(this));\""}}
<td {{$clickEvent | safeHTMLAttr}}>[x]</td>

若仅需动态生成事件函数内容，也可以拆分属性名和值：

{{$clickFunc := "return toggle_active($(this));"}}
<td onclick="{{$clickFunc | safeHTML}}">[x]</td>

2. Go代码层面：返回template.HTMLAttr类型 #

将Go函数的返回值从string改为template.HTMLAttr类型，该类型会被模板识别为安全的HTML属性内容，避免转义：

import "html/template"

func (d TemplateObject) Click() template.HTMLAttr {
    return template.HTMLAttr("onclick=\"toggle_active($(this))\"")
}

模板调用保持原有写法即可：

<td {{.Click}}>[x]</td>

原理说明 #

html/template包默认的转义机制是为了防止XSS攻击。safeHTMLAttr过滤器和template.HTMLAttr类型的作用都是明确告知模板：这段内容是安全的HTML属性，无需转义，从而让属性能够正确渲染到HTML标签中。

内容的提问来源于stack exchange，提问作者CodeLikeBeaker