XMLSerializer.serializeToString处理script标签转义异常，如何修复？

问题 #

使用XMLSerializer.serializeToString序列化包含<script>标签的SVG元素时，Chrome浏览器会将<script>转换为\x3Cscript>、</script>转换为\x3C/script>，序列化结果不符合预期，但Safari浏览器表现正常。即使为所有元素使用createElementNS方法，Chrome仍存在异常表现，请问该如何修复此问题？

代码示例 #

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
const foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject');
foreignObject.appendChild(document.createElement('script'))
svg.appendChild(foreignObject);
new XMLSerializer().serializeToString(svg)
// 预期输出: "<svg xmlns=\"http://www.w3.org/2000/svg\"><foreignObject><script xmlns=\"http://www.w3.org/1999/xhtml\"></script></foreignObject></svg>"
// Chrome实际输出: 包含\x3Cscript>转义内容

修复方案 #

Chrome的这种行为是出于XSS防护的特殊转义逻辑，可通过以下两种方式修复：

1. 手动替换转义字符
   序列化完成后，针对性替换script标签相关的转义内容，避免影响其他正常转义：

const serialized = new XMLSerializer().serializeToString(svg);
// 替换script标签的转义开头
const fixedString = serialized.replace(/\\x3C(\/?script)/g, '<$1');

2. 通过DOMParser二次处理
   先将序列化后的字符串解析为XML文档，再重新序列化，绕过Chrome的特殊转义规则：

const serialized = new XMLSerializer().serializeToString(svg);
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(serialized, 'application/xml');
const fixedString = new XMLSerializer().serializeToString(xmlDoc.documentElement);

原理说明 #

Chrome在处理SVG的foreignObject内的HTML script标签时，会触发HTML层面的安全转义，而Safari遵循XML序列化的标准规则。上述方法要么直接还原转义内容，要么通过XML解析器重新处理，强制输出符合预期的标签格式。

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