用户同意Cookie后动态注入App Insights脚本遇转义符丢失问题

问题原因 #

你当前的代码使用HTML实体（<、"）替代原生HTML标签和引号，结合jQuery的append()方法解析HTML字符串时，会自动转换HTML实体，同时可能导致脚本中需要保留的反斜杠被意外剥离，最终损坏脚本结构。

解决方案 #

方案1：直接使用原生HTML语法构建模板字符串 #

移除不必要的HTML实体，直接在模板字符串中使用<script>标签和双引号（外层用反引号包裹，内部双引号无需转义），避免HTML解析时的转义干扰：

const scripts = `
    <script type="text/javascript">
        !(function (cfg) {
            // ... 原初始化逻辑
        })( {
            src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
            crossOrigin: "anonymous",
            cfg: {
                connectionString: "InstrumentationKey=YOUR_INSTRUMENTATION_KEY"
            }
        });
    </script>
    <script type="text/javascript">
        var ref = document.referrer;
        appInsights.trackTrace({ message: 'Referrer  ' + ref });
    </script>
`;

function addScripts() {
    $('head').append(scripts);
};

方案2：直接创建DOM元素插入（更可靠） #

绕过HTML字符串解析环节，直接创建script DOM节点并设置内容，彻底避免转义问题：

function addScripts() {
    // 创建并插入Application Insights初始化脚本
    const initScript = document.createElement('script');
    initScript.type = 'text/javascript';
    initScript.textContent = `
        !(function (cfg) {
            // ... 原初始化逻辑
        })( {
            src: "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
            crossOrigin: "anonymous",
            cfg: {
                connectionString: "InstrumentationKey=YOUR_INSTRUMENTATION_KEY"
            }
        });
    `;
    document.head.appendChild(initScript);

    // 等待AI脚本加载完成后执行追踪逻辑，避免appInsights未定义
    initScript.onload = function() {
        const traceScript = document.createElement('script');
        traceScript.type = 'text/javascript';
        traceScript.textContent = `
            var ref = document.referrer;
            appInsights.trackTrace({ message: 'Referrer  ' + ref });
        `;
        document.head.appendChild(traceScript);
    };
}

额外提示 #

如果使用方案1，需注意：当脚本中包含需要保留的反斜杠（如正则表达式、转义字符）时，要在模板字符串中用双反斜杠\\进行转义，确保最终插入的脚本中保留单个反斜杠。

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