Meteor.js 安全地嵌入 iframe

Question

我有一个包含聊天的 meteor.js 应用程序。我们需要允许用户从 youtube 和 soundcloud 发布嵌入代码。安全。

我使用 djedi:sanitize-html-client 来清理用户输入，而不是包含“youtube”和“soundcloud.com”的用户输入

因此，对于 YouTube，我在获取用户输入字符串的地方让它工作，例如

<iframe width="560" height="315" src="https://www.youtube.com/embed/B65pLsah3XE" frameborder="0" allowfullscreen></iframe>

，然后在空间上拆分它，并使用此 RegEx 循环遍历数组以找到有效的 url：

var pattern = new RegExp("(http|ftp|https)://[\w-]+(\.[\w-]+)+([\w.,@?^=%&:/~+#-]*[\w@?^=%&/~+#-])?");

之后，如果找到一个有效的 url，我会在代码中重建 iframe html，按照惯例插入 Mongo，然后它会显示在聊天窗口中。这部分工作正常。

但是这种方法不适用于 soundcloud 嵌入代码，例如：

<iframe width="100%" height="450" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/227010461&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>

RegEx 在该 soundcloud iframe 代码中找不到匹配项。

所以，我的问题是：我如何将这两个来自 soundcloud 的 url 正则表达式嵌入 html，或者在 Meteor.js 中是否有一种安全的方法来允许嵌入 iframe。

Answer 1

你可以直接使用这个 JS 代码：

var getHostname = function(href) {
    var l = document.createElement("a");
    l.href = href;
    return l.hostname;
};

并在您的代码中使用它：

getHostname("https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/227010461&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true")

返回：

“w.soundcloud.com”