使用 Trix 清理 HTML 输入答案

【问题标题】：Sanitizing HTML Input with Trix使用 Trix 清理 HTML 输入
【发布时间】：2018-02-16 12:20:54
【问题描述】：

我现在有一个奇怪的问题，我正在寻找有关如何处理这个问题的任何见解。

我目前使用Basecamp Trix editor 接受 HTML 输入。

当我将输入发送到我的 Laravel 应用程序时，它会保存到我的数据库中：

<div>&lt;script&gt;alert('test');&lt;/script&gt;</div>

但是，问题是当我使用 Laravel 的刀片将其插入 Vue 属性时，它实际上以某种方式将其转换回有效的 HTML：

<reply :data-reply="{{ $reply }}"></reply>

结果：

似乎 Laravel 使用刀片 echo 语句将脚本标签转换为有效的 HTML？

我的观点：

{{ $reply }}

结果：

{"id":63,"created_at":"2017-09-07 13:30:53","updated_at":"2017-09-07 13:35:05","user_id":1,"body":"<div><script>alert('test');<\/script><\/div>","options":null}

问题是，我无法清理它，因为 HTML 数据实际上是在我的数据库中转义的，但是当 Laravel 将我的回复转换为 JSON 时，它实际上取消了脚本标签，并且在使用 @ 时它实际上是在 Vue 中运行的987654328@指令。

我知道在使用 v-html 指令时我不应该接受用户输入，但我需要 HTML 支持来回复回复，而且我无法在我的 Laravel 应用程序中清理已经转义的 HTML。

有没有人知道如何以某种方式清理 Trix 的内容？

【问题讨论】：

试试<reply :data-reply="{!! $reply !!}"></reply> ?

标签： php laravel vue.js vuejs2 trix

【解决方案1】：

好的，我已经放了

<div>&lt;script&gt;alert('test');&lt;/script&gt;</div>

进入用户的电子邮件字段。

我只是在 Laravel 中使用：

return view('welcome', ['user' => App\User::find(1)]);

模型没什么特别的。

我的观点是这样的：

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<div id="el">{{ $user }}</div>
<script>
    user = JSON.parse(document.getElementById("el").innerHTML);
    console.log(user.name);
</script>
</body>
</html>

在 JS 控制台中我得到：

&lt;div&gt;&lt;script&gt;alert('test');&lt;/script&gt;&lt;/div&gt;

所以它与数据库中的不一样，但它看起来也不像你展示的那样。

【讨论】：

这实际上不起作用，因为当通过常规转义括号时，Laravel 传递了整个 Reply 对象，即 json_encoded。此外，标签{!! !!} 不会转义任何东西，实际上恰恰相反。不过谢谢！
@SteveBauman 对不起，我看错了你的问题，我已经更新了我的答案
实际上仍然做同样的事情，由于某种原因，当使用 {{ }} laravel 标签将回复模型传递给 Vue 时，它会将回复正文中的脚本标签转换为有效的 HTML：@987654329 @
@SteveBauman 看看我的编辑，你确定你又得到了有效的 HTML 吗？我的情况正好相反。确保不是 Vue 再次将其转换回 HTML
Hmmmm... 在您的用户模型的实际视图中呈现什么？您是否看到标签是否被转换回实际的 HTML 标签？顺便说一句，我使用的是 Laravel 5.5，你是 5.5 的吗？