Next.js中dangerouslySetInnerHTML真的危险吗？集成GTM时能否安全使用？

1. dangerouslySetInnerHTML 和原生.innerHTML的区别 #

核心功能上没本质差异，最终都是把HTML/JS代码插入DOM节点。但：

• React默认会自动转义所有插入的文本，从根源上防范XSS；dangerouslySetInnerHTML是React特意设置的「绕过转义开关」，名字里的「dangerously」就是明确提醒：你现在要插入未转义的内容，安全责任完全由你自己承担。
• 原生.innerHTML只是普通DOM API，没有这种明确的风险警示，但操作风险和前者完全一致——用它插入不可信内容同样会触发XSS漏洞。

2. 安装GTM时用它安全吗？ #

完全安全，只要你插入的是Google官方直接提供的GTM初始化代码：

• GTM的启动代码是固定的官方模板，没有恶意内容，也不含任何用户可控的输入。
• 只要你确保代码没被篡改（不从非官方渠道复制、避免传输过程被劫持），用dangerouslySetInnerHTML插入这段代码不会有任何XSS风险。

3. 容易忽略的其他风险 #

除了XSS，还有几个点需要留意：

• GTM容器的后续管理风险：初始的启动代码是安全的，但之后你在GTM后台添加的第三方标签、自定义HTML/JS，如果包含恶意脚本或未过滤的用户输入，会直接在你的页面上执行——这个风险和dangerouslySetInnerHTML无关，是对GTM容器内容审核不到位导致的，必须严格把关容器内的所有代码。
• Next.js渲染模式适配问题：如果在SSR/SSG页面中直接用它插入GTM脚本，可能出现服务端渲染内容与客户端hydration不匹配，或者脚本在服务端提前执行引发异常。建议只在客户端组件中插入（比如用useEffect，或者直接使用Next.js自带的Script组件——该组件专门处理第三方脚本，还能控制加载时机，比dangerouslySetInnerHTML更适配Next.js）。
• 性能影响：GTM本身会加载额外资源，如果插入时机不当（比如阻塞渲染），会拖慢页面加载速度——这是脚本本身的问题，但用dangerouslySetInnerHTML时要配合Next.js的脚本加载策略（比如设置strategy="lazyOnload"）。

内容的提问来源于stack exchange，提问作者Cam