使用 Trix 清理 HTML 输入
Posted
技术标签:
【中文标题】使用 Trix 清理 HTML 输入【英文标题】：Sanitizing HTML Input with Trix 【发布时间】：2018-02-16 12:20:54 【问题描述】：我现在有一个奇怪的问题，我正在寻找有关如何处理这个问题的任何见解。
我目前使用Basecamp Trix editor 接受 html 输入。
当我将输入发送到我的 Laravel 应用程序时，它会保存到我的数据库中：
<div><script>alert('test');</script></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> ?
【参考方案1】：
好的，我已经放了
<div><script>alert('test');</script></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 控制台中我得到：
<div><script>alert('test');</script></div>
所以它与数据库中的不一样，但它看起来也不像你展示的那样。
【讨论】：
这实际上不起作用，因为当通过常规转义括号时，Laravel 传递了整个Reply 对象，即 json_encoded。此外，标签!! !! 不会转义任何东西，实际上恰恰相反。不过谢谢！
@SteveBauman 对不起，我看错了你的问题，我已经更新了我的答案
实际上仍然做同样的事情，由于某种原因，当使用 laravel 标签将回复模型传递给 Vue 时，它会将回复正文中的脚本标签转换为有效的 HTML：@987654329 @
@SteveBauman 看看我的编辑，你确定你又得到了有效的 HTML 吗？我的情况正好相反。确保不是 Vue 再次将其转换回 HTML
Hmmmm... 在您的用户模型的实际视图中呈现什么？您是否看到标签是否被转换回实际的 HTML 标签？顺便说一句，我使用的是 Laravel 5.5，你是 5.5 的吗？以上是关于使用 Trix 清理 HTML 输入的主要内容，如果未能解决你的问题，请参考以下文章
在 Clojure/Compojure 中转义/清理用户输入