使用 Javascript 的 CreateElement 时防止 XSS 攻击

Question

我公司的合作伙伴通过动态生成的 iframe 将我们的一些网页嵌入到他们的网站中。 iframe 的源 URL 来自合作伙伴网站上的查询字符串，因此我想确保不存在跨站点脚本攻击的风险，因为我们使用不受信任的输入作为 iframe 的源。

源 URL 始终是相对 URL（我们的主机名在 Javascript 中硬编码并添加到相对 URL 之前），并且我们对输入 URL 进行一些验证，以确保它以“index.php”开头，因为所有请求都被路由通过我们网站上的该页面。例如，如果在客户端站点上访问以下 URL：

www.ourpartner.com/home.html?url=index.php%3Fid%3D999

iframe 的源 URL 将为 http://www.oursite.com/index.php?id=999。 iframe 是使用 createElement 在 Javascript 中生成的，如下所示：

...
// We assign the url value from the query string to the variable urlparam

if(! urlparam.match(/^index\.php/i) ) {
    // Error.  Quit.
}
var myiframe = document.createElement('iframe');
myiframe.src = 'http://www.oursite.com/' + urlparam;
document.getElementById('iframe_container').appendChild(myiframe);

攻击者是否有可能将恶意 URL 注入 iframe 的源中？浏览器似乎会转义 URL 中可能出现的任何 HTML 实体，例如双引号和左/右尖括号。我们是否应该对该 URL 采取进一步的预防措施？

谢谢！

Answer 1

不，这很好。

当您处理像 .src 这样的 DOM 属性时，不涉及任何标记。您将字符串直接写入字符串属性。如果您将值封装在标记内，例如写入 innerHTML 或 document.write() 时，您只需担心 HTML 转义。