动态添加JavaScript标签时type字段被注入随机串，如何避免？

云上老周

2026-8-14

解决动态添加Script标签时Type字段被注入随机字符的问题

这种情况基本是页面上的安全脚本、CMS安全类插件或者CDN的防护机制导致的——它们会通过修改script的type属性来跟踪动态注入的脚本，或是防范潜在的XSS攻击。

下面是几种可行的解决方法：

省略Type属性
现代浏览器默认会把script标签的type解析为text/javascript，完全不需要手动指定。直接去掉type字段，就算被注入随机字符也不会影响脚本执行，示例代码：
```
const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
document.head.appendChild(gtagScript);
```

插入DOM后再设置Type
如果业务上必须指定type，可以先把script标签添加到DOM，之后再修改type属性，避开拦截逻辑：

const gtagScript = document.createElement('script');
gtagScript.async = true;
gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXX';
document.head.appendChild(gtagScript);
// 插入完成后再设置type
gtagScript.type = 'text/javascript';

用MutationObserver拦截修改
如果找不到源头或者无法禁用拦截逻辑，可以用DOM监听来自动修正被篡改的type：

const observer = new MutationObserver((mutations) => {
  mutations.forEach(mut => {
    if (mut.attributeName === 'type' && mut.target.tagName === 'SCRIPT') {
      const currentType = mut.target.type;
      if (currentType.endsWith('-text/javascript')) {
        mut.target.type = 'text/javascript';
      }
    }
  });
});

// 监听页眉和页脚区域的属性变化
observer.observe(document.head, { attributes: true, subtree: true });
observer.observe(document.body, { attributes: true, subtree: true });