为何insertAdjacentHTML中JS字符串拼接在极少数情况下未被解析？

我在一个非本人所有的公共网站上运行以下JavaScript代码，本质是向页面写入一个像素图以调用我提供的API（n是我之前添加到页面的DIV标签引用；换行仅为可读性，原代码无换行）：

n.insertAdjacentHTML('beforebegin',
                     '<img src="https://myapiserver/api/SessionError?cust=ABCD&loc='  
                     + encodeURIComponent(window.location.href)  
                     + '&ua='
                     + encodeURIComponent(navigator.userAgent.slice(0,255))  
                     + '" style="height:0px;width:0px">');

这段代码大部分时间运行正常，能正确调用API并传递参数，但我在API日志中发现一例异常情况，收到的参数值如下：

• cust=ABCD
• loc=' + encodeURIComponent(window.location.href) + '
• ua=' + encodeURIComponent(navigator.userAgent.slice(0,255)) + '

可以确定是这段代码导致的异常，浏览器已执行JavaScript，但字符串拼接未正确解析。请问该异常的原因是什么？是否需要更换引号以适配特定浏览器或区域设置？

分析与解决 #

这种异常和引号适配、区域设置无关，核心原因是你的代码被目标网站的安全防护机制或第三方脚本篡改了：

• 公共网站通常会部署内容安全策略（CSP）或XSS防护脚本，这类机制会拦截、修改动态插入的HTML/JS代码，防止恶意注入。你的代码虽然合法，但其中的字符串拼接逻辑可能被防护系统误判，导致JS引擎没有正确执行拼接，反而把+ encodeURIComponent(...) +这类代码片段直接当成静态字符串传入了API。
• 另外，用户端的广告拦截器、用户脚本管理器等工具也可能干扰代码执行，破坏字符串拼接的上下文，让代码片段原样输出。

可行的修复方案 #

1. 改用DOM元素创建方式（推荐）
   完全避开HTML字符串拼接，直接创建img元素并设置属性，这种方式更安全，也不容易被防护系统误判：

   const img = document.createElement('img');
   img.src = `https://myapiserver/api/SessionError?cust=ABCD&loc=${encodeURIComponent(window.location.href)}&ua=${encodeURIComponent(navigator.userAgent.slice(0,255))}`;
   img.style.cssText = 'height:0;width:0';
   n.before(img);
   

2. 提前完成URL拼接再插入
   如果必须用insertAdjacentHTML，先把完整的API URL拼接好再插入到HTML字符串中，减少动态拼接部分：

   const apiUrl = `https://myapiserver/api/SessionError?cust=ABCD&loc=${encodeURIComponent(window.location.href)}&ua=${encodeURIComponent(navigator.userAgent.slice(0,255))}`;
   n.insertAdjacentHTML('beforebegin', `<img src="${apiUrl}" style="height:0;width:0">`);
   

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