主要利用chrome的<svg>和<p>标签
一般来说 浏览器进行解析的时候,解析规则趋于xml解析若不是html解析
主要区别在于HTML中的某些标签在从文本反序列化时不能有子标签。例如<style>。如果查看HTML规范，我们会发现它的内容模型是Text。即使您尝试将元素放在<style>中，它也会被视为文本：
对于SVG来说，事情并非如此。让我们继续用上面的例子，但<style>是<svg>的子标签：
<style>有了子元素
原理
1.<svg><p> 被浏览器重写成 <svg><p></svg>
2.添加到innerHTML中 <svg></svg><p></p> 如果<svg><p>中还有子标签style的话,可能会造成标签形成最初的HTML解析假定某些元素在<svg>内，而在随后的解析中，这些元素在<svg>之外，从而允许添加任意HTML标签。
例如
<svg><p><style><a id="</style><img src=1 onerror=alert(1)>">
被浏览器解析后
<svg><p></p><style><a id="</style><img src=1 onerror=alert(1)>"></a></style></svg>
放入innerHTML后
<svg></svg><p></p><style><a id="</style><img src="" onerror="alert(1)">">"
现在<svg>元素立即结束，后面的一切代码都是普通的HTML。这意味着<style>——</style>，包含onerror属性的<img>标签被写入DOM树。
summerized by https://xz.aliyun.com/t/6413