为何PHP或jQuery会移除内联JS脚本中拼接的</a>标签并自行闭合标签？

问题场景 #

编写的PHP代码用于输出标题及内联jQuery脚本，预期在placeholder div后插入包含链接的test-id div，本地环境运行正常，但部署到生产服务器后，脚本代码被异常修改：

原始代码 #

<?php
echo '<h2>Test</h2>';
?>

<div>
<form>
<input type="hidden" name="test">
<div id="placeholder"></div>
<script>
jQuery( document ).ready( function( $ ) {
    var testVar = 'Some info from a variable.';
    $( '<div id="test-id" class="test-class">' + testVar + ' <a href="/test?test=1">Test?</a></div>' ).insertAfter( $( '#placeholder' ) );
});
</script>
</form>
</div>

<?php
echo '<h2>End of test</h2>';
?>

生产环境异常代码 #

$( '<div id="test-id" class="test-class">' + testVar + ' <a href="/test?test=1">Test?</script>
</form>
</div>' ).insertAfter( $( '#placeholder' ) );

可见</a>标签被移除，<script>和<form>被提前自行闭合。

原因 #

生产环境中存在HTML内容过滤/净化工具（可能是服务器端插件、CDN内容优化机制、CMS的输出过滤功能），这类工具会自动检测并"修复"它认为不规范的HTML结构，但无法区分脚本字符串中的标签和真实页面结构标签：

• 工具误将脚本字符串里的</a>识别为页面中未闭合的<a>标签的闭合标记，触发了自动闭合逻辑
• 进而错误地提前闭合了<script>和<form>标签，同时移除了它判定为"多余"的标签内容

解决方案 #

• 改用jQuery DOM创建语法：避免直接拼接HTML字符串，通过jQuery的对象创建方法构建元素，彻底规避标签识别问题：

  jQuery( document ).ready( function( $ ) {
      var testVar = 'Some info from a variable.';
      // 分步创建DOM元素
      var $newDiv = $('<div>', {
          id: 'test-id',
          class: 'test-class'
      }).text(testVar);
      var $link = $('<a>', {
          href: '/test?test=1',
          text: 'Test?'
      });
      $newDiv.append($link).insertAfter('#placeholder');
  });
  

• 转义脚本内的HTML字符：将字符串中的<转义为<，>转义为>，插入到页面后jQuery会自动解析：

  $( '<div id="test-id" class="test-class">' + testVar + ' <a href="/test?test=1">Test?</a></div>' ).insertAfter( $( '#placeholder' ) );
  

• 关闭针对性过滤：如果明确是服务器/CDN的过滤工具导致，找到对应配置，将当前页面或内联脚本块排除在过滤规则外。
• 改用外部JS文件：将内联脚本迁移到外部JS文件中引用，避免内容过滤工具误处理内联脚本中的字符串内容。

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