【问题标题】：User submitted content in website用户在网站上提交的内容
【发布时间】：2017-11-28 23:09:50
【问题描述】：

我有我的网站项目，用户可以在其中评论帖子。例如，我想允许用户提交 YouTube 视频。我想在 iframe 中显示它们，以便其他人看到视频的漂亮窗口。

但这意味着用户可以使用所有 HTML 标记和脚本来利用网站？

输入类似的东西
< a href="">< script>alert();< /script>">
这会破坏网站...

我有什么方法可以解决这个问题？

我想确保用户不能使用任何标签。但是当链接发布时，它会将其包装在 iframe 中。

我想到的一种方法是只为将包装在 iframe 中的 url 放置单独的输入窗口。但这使一切变得复杂。我也想坚持一个评论窗口。

有什么建议吗？

【问题讨论】：

How to prevent XSS with HTML/PHP?的可能重复
你在问如何防止 XSS。为此，您需要清理服务器上的输入。上面的链接展示了如何在 PHP 中做到这一点，this question 讨论了一些一般的最佳实践。
不要让他们提供 HTML。只需将其文本解析为 YouTube URL。然后执行替换，插入 iframe 并使用提供的 URL。

标签： javascript jquery html css iframe

【解决方案1】：

不要让用户输入 HTML。
为 YouTube URL 解析用户评论。
将 URL 替换为指向所提供 URL 的 <iframe>。

这是一个超级简单的 JavaScript 示例。

https://jsfiddle.net/ntgs3ypt/

var comment = document.querySelector('textarea');
var output = document.querySelector('div');

var str = comment.value;
var regex = /(https:\/\/www.youtube.com\/embed\/\w*)/;

if (regex.test(str)) {

  str = str.replace(regex, '<iframe width="560" height="315" src="$1" frameborder="0" allowfullscreen></iframe>');
  output.innerHTML = str;

}

textarea {
  width: 100%;
}

<textarea name="comment">Lorem ipsum dolor https://www.youtube.com/embed/mr7FXvTSYpA lorem ipsum dolor</textarea>

<div class="output"></div>

【讨论】：