LiveView中如何编程式构建~H sigil并插入任意HTML代码

出现纯文本渲染问题是两点导致的：

• HEEx模板（即~H sigil）默认会对所有插值内容做HTML转义防护，避免XSS攻击，传入的HTML标签会被转义为普通文本，不会被浏览器解析渲染。
• #{}是Elixir普通字符串的插值语法，在HEEx模板中不生效，会被直接当成普通文本输出，HEEx的正确插值写法是<%= 表达式 %>。

渲染现成可信HTML #

如果你的HTML表格代码是完全可信的（无用户可控的恶意内容），用Phoenix内置的raw/1函数包裹变量即可，该函数会标记内容为安全HTML，跳过转义直接渲染：

html_codes = """
  <table> .... </table>
"""

~H"""
  <%= raw(html_codes) %>
"""

更安全的长期方案 #

如果表格结构和数据是程序可控的，不建议拼接HTML字符串，直接在HEEx中写原生标签即可。这种写法动态值会自动做安全转义，完全没有XSS风险，维护也更方便：

~H"""
<table>
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
    </tr>
  </thead>
  <tbody>
    <%= for row <- @table_rows do %>
      <tr>
        <td><%= row.col1 %></td>
        <td><%= row.col2 %></td>
      </tr>
    <% end %>
  </tbody>
</table>
"""

绝对不要直接用raw/1渲染来源不可信、用户可提交篡改的内容，否则会引发XSS漏洞，恶意用户可注入脚本窃取用户信息、篡改页面。如果必须渲染用户提交的HTML，必须先通过白名单过滤机制清洗内容，仅保留table、tr、td这类安全的排版标签，彻底移除script、iframe、事件属性等危险内容后再渲染。

内容的提问来源于stack exchange，提问作者Jason O.