一、环境

XSS Game - Learning XSS Made Simple! | Created by PwnFunction

二、开始介绍

如果notify为真的话那么html是

<div class="alert alert-warning" role="alert"><b>Meme</b> created from ${DOMPurify.sanitize(text)}</div>

代码解析

meme-code的值

在页面随便输入一个text=aaaa&img=bbbbb

很明显调用到这里因为text和img都存在了

而我们可以很明显看到一点Meme Code没值，没值的话那就代表onload根本没有加载，当我们什么都没写的情况下很明显加载值了

当我们把地址参数写对的情况下，我们的onload很明显是可以执行的

而我们从始至终都没有看到created...，因为notify是false

三、寻找触发点

很明显经过上面的介绍，我们必须要notify为true不然无法下手，那这不就是我们dom破坏的技巧

并且乍一看经过DOMPurify后的这些交互点都很安全，但是使用html()解析会存在标签逃逸问题。

两种解析html的方式:jquery.html&innerhtml。innerHTML是原生js的写法，Jqury.html()也是调用原生的innerHTML方法，但是加了自己的解析规则(后文介绍)。

关于两种方式:Jquery.html()和innerHTMl的区别我们用示例来看。

对于innerHTML：模拟浏览器自动补全标签，不处理非法标签。同时，<style>标签中不允许存在子标签(style标签最初的设计理念就不能用来放子标签)，如果存在会被当作text解析。因此<style><style/><script>alert(1337)//会被渲染如下

<style>
    <style/><script>alert(1337)//
</style>

对于Jqury.html()，最终对标签的处理是在htmlPrefilter()中实现:jquery-src，其后再进行原生innerHTML的调用来加载到页面。

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^/>x20trnf]*)[^>]*)/>/gi

jQuery.extend( {
    htmlPrefilter: function( html ) {
        return html.replace( rxhtmlTag, "<$1></$2>" );
    }
    ...
})

tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

有意思的是，这个正则表达式在匹配`<*/>`之后会重新生成一对标签(区别于直接调用innerHTML)

所以相同的语句`<style><style/><script>alert(1337)//`则会被解析成如下形式，成功逃逸`<script>`标签。

<style>    
    <style>
</style>
<script>alert(1337)//

我们知道DOMPurify的工作机制是将传入的payload分配给元素的innerHtml属性，让浏览器解释它(但不执行)，然后对潜在的XSS进行清理。由于DOMPurify在对其进行innerHtml处理时，script标签被当作style标签的text处理了，所以DOMPurify不会进行清洗(因为认为这是无害的payload)，但在其后进入html()时，这个无害payload就能逃逸出来一个有害的script标签从而xss。

3.1总结一下方法：

1.绕过过滤框架

2.html 逃逸出style标签

3.nofity dom破坏 使他为真

<img name=notify><style></style><script>alert//因为img是异步方法，那么DOMPurity会先写，那我们notify就会变成ture，那么我们就会触发

最终payload

text=<img name%3dnotify><style><style%2F><script>alert(1337)%2F%2F&img=https://i.imgur.com/PdbDexI.jpg

之后就搞定了 

最终的加载就是加载到div标签里面了