正确使用 appendChild 避免 XSS

如何解决正确使用 appendChild 避免 XSS

在进行 XXS 站点检查后，控制台中弹出的一个错误是内联使用了 Google Analytics Tag Manager 所需的脚本。 我现在已经创建了一个外部 analytics.js 文件，我将其加载到标题中并创建了一个 IIFE 来加载脚本，然后检查它是否在 GA 中工作（确实如此）：

var load_google_tag_manager = function(){
    var script = document.createElement("script");
    var head = document.getElementsByTagName('head')[0];
    script.async = true;
    script.type = "text/javascript";
    script.src = "https://www.googletagmanager.com/gtag/js?id=UA-XXXXXX-1";
    head.appendChild(script);
}();

window.dataLayer = window.dataLayer || [];

function gtag() {
    dataLayer.push(arguments);
}
gtag('js',new Date());
gtag('config','UA-XXXXXX-1',{
    "anonymize_ip": true,"allow_display_features": false,"link_attribution": false
});

然后我再次检查控制台是否有错误警告并得到一个，这是函数 appendChild 的使用。 在阅读了一些 OWASP documentation 后，我了解到使用它可能存在潜在危险，并给出了一些如何使其更安全的好例子，例如：如何使用 setAttribute 方法。例如：

SAFE and FUNCTIONALLY CORRECT example

 var x = document.createElement("input");
 x.setAttribute("name","company_name");
 x.setAttribute("value",'<%=Encoder.encodeForJS(companyName)%>');
 var form1 = document.forms[0];
 form1.appendChild(x);

但是当您不使用此方法时，它没有说明如何执行此操作。 我将如何例如安全地设置 src 值？ 最终，我想让我的 IIFE 远离 XXS。

解决方法

示例中需要编码，因为服务器端模板与客户端代码混合使用。引号需要转义以防止字符串文字被关闭，并在其后添加更多代码。

所以如果 companyName 是 '); alert(1);//，那么：

x.setAttribute("value",'<%=companyName%>');

会变成：

x.setAttribute("value",''); alert(1);//');

你的 URL 看起来像一个固定的常量，所以不可能有这样的事情，所以你的代码应该没问题。