正确使用appendChild以避免XSS

Question

在进行XXS站点检查后，控制台中弹出的一个错误是内联使用了Google Analytics Tag Manager所需的脚本。我现在已经创建了一个外部analystics.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文档后，我了解到使用它可能有潜在的危险，并给出了一些如何使其更安全的好例子，例如：如何使用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的伤害。

Answer 1

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

因此，如果companyName是'); alert(1);//，那么：

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

将变成：

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

你的URL看起来像一个固定的常量，所以不可能出现这样的情况，所以你的代码应该很好