Elixir Phoenix中如何将字符串转换为可渲染的HTML？

问题描述 #

我在View中定义了如下函数：

def show_tree() do
  tree = "<ul>"
  tree = tree <> "<li><a href='edir/1'>1 item </a></li> <li><a href='edir/1'>2 item</a></li> </ul>"
  tree
end

当我在index.html.eex模板中通过<%= show_tree %>调用该函数时，得到的是转义后的HTML文本：

<ul><li><a href='edir/1'>1 item </a></li> <li><a href='edir/1'>2 item</a></li> </ul>

但我需要的是带有HTML链接的可渲染列表，请问该如何实现？

解决方案 #

这是因为Phoenix模板引擎默认会对所有输出的字符串进行HTML转义（为了防止XSS攻击），所以你需要明确告诉Phoenix这段HTML是安全的，直接渲染即可。有两种常用方式：

方式1：在模板中用raw/1包裹函数调用

修改模板里的调用代码，把返回的字符串用raw/1函数标记为安全内容：

<%= raw(show_tree()) %>

方式2：在View函数中直接返回安全的HTML结构

如果你希望View函数直接返回可渲染的内容，不需要每次在模板里都写raw，可以在函数里用Phoenix.HTML.raw/1包裹返回的HTML字符串：

def show_tree() do
  tree = "<ul><li><a href='edir/1'>1 item</a></li><li><a href='edir/1'>2 item</a></li></ul>"
  Phoenix.HTML.raw(tree)
end

之后在模板里直接调用<%= show_tree() %>就会渲染出正常的列表和链接了。

注意事项 #

只有当你完全控制要渲染的HTML内容（比如没有包含用户输入的动态内容）时，才使用raw渲染未转义的HTML。如果内容里有不可信的用户输入，直接渲染会带来XSS安全风险，这种情况下建议使用Phoenix的安全模板语法或者HTML生成函数来构建内容。

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