如何向HTML沙箱iframe插入含特殊字符的代码并避免语法报错

问题原因 #

这不是Firefox的bug，本质是多层上下文的转义冲突导致的。你使用的特殊字符属于Unicode双向控制类字符，在HTML属性解析、JS字符串解析、iframe内容解析的多层嵌套场景下，没有做对应转义的话，解析器会偶发将特殊字符识别为语法符号，比如识别成正则范围符就会抛出invalid range in character class错误，识别为字符串截断符就会抛出missing ) after argument list错误，运行结果自然不稳定。

解决方案 #

方案1：Unicode转义（推荐，无需额外权限） #

把你代码里的特殊字符提前转换为\uXXXX格式的Unicode转义序列，再嵌入到iframe代码中即可，完全规避解析冲突，也不需要给sandbox添加多余权限：

<!DOCTYPE html>
<body>
    <iframe sandbox="allow-scripts" srcdoc="<!DOCTYPE html><body><script>console.log('Special character: \uXXXX')<\/script></body></html>"></iframe>
</body>
</html>

将上面的\uXXXX替换为你实际使用的特殊字符对应的Unicode编码即可。

方案2：Blob URL加载 #

如果不想手动处理转义，可以用Blob URL的方式加载iframe内容，完全避开多层转义的问题：

<!DOCTYPE html>
<body>
    <iframe id="frame" sandbox="allow-scripts"></iframe>
    <script>
        const frameCode = `<!DOCTYPE html>
<body>
    <script>
        console.log("Special character: ''")
    <\/script>
</body>`
        const blob = new Blob([frameCode], { type: 'text/html' })
        frame.src = URL.createObjectURL(blob)
    </script>
</body>
</html>

该方案不需要给sandbox添加allow-same-origin权限，所有字符都会被正常解析，不会出现偶发报错。

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