目录

 代码

代码分析

payload构造

结果

---

代码

<div><h4>Meme Code</h4><textarea class="form-control" id="meme-code" rows="4"></textarea><div id="notify"></div>
</div><script>/* Utils */const escape = (dirty) => unescape(dirty).replace(/[<>'"=]/g, '');const memeTemplate = (img, text) => {return (`<style>@import url('https://fonts.googleapis.com/css?family=Oswald:700&display=swap');`+`.meme-card{margin:0 auto;width:300px}.meme-card>img{width:300px}`+`.meme-card>h1{text-align:center;color:#fff;background:black;margin-top:-5px;`+`position:relative;font-family:Oswald,sans-serif;font-weight:700}</style>`+`<div class="meme-card"><img src="${img}"><h1>${text}</h1></div>`)}const memeGen = (that, notify) => {if (text && img) {template = memeTemplate(img, text)if (notify) {html = (`<div class="alert alert-warning" role="alert"><b>Meme</b> created from ${DOMPurify.sanitize(text)}</div>`)}setTimeout(_ => {$('#status').remove()notify ? ($('#notify').html(html)) : ''$('#meme-code').text(template)}, 1000)}}
</script><script>/* Main */let notify = false;let text = new URL(location).searchParams.get('text')let img = new URL(location).searchParams.get('img')if (text && img) {document.write(`<div class="alert alert-primary" role="alert" id="status">`+`<img class="circle" src="${escape(img)}" onload="memeGen(this, notify)">`+`Creating meme... (${DOMPurify.sanitize(text)})</div>`)} else {$('#meme-code').text(memeTemplate('https://i.imgur.com/PdbDexI.jpg', 'When you get that WW3 draft letter'))}
</script>

代码分析

经过分析大部分的输入输出都被过滤函数过滤了例如下图

‘

过滤了以后再寻找新的注入点，看一下这里，漏洞点就在这里

payload构造

对于Jquery.html()和innerHTML是有区别的，来个例子来解释一下

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

输入上面一样的东西对于innerHTML来说，他会补全标签，且style中不允许有标签，如果有标签的话里面的内容会被当作文本解析，里面的内容无法执行，所以就会出现下面那个样子

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

对于Jquery.html的话对于标签的处理是先调用htmlPrefilter() 这个函数，然后再用innerHTML

调用htmlPrefilter() 这个函数会将你的输入进行一个匹配，所匹配的代码就是<div/>这个样子，然后他会对你标签进行补全，补完以后就成这样了<div></div>

上面的例子就成了这样，其中script就逃逸出来了，然后中间的两个标签是替换后的标签，然后最上面的标签是innerHTML整出来的标签，然后第一个和第三个标签闭合了

（注：这个技巧对于Jquery.html版本是有要求的）

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

然后回来看一下这道题，首先进行的是DOMPurify这个过滤然后再进行.html，这样是不是就可以使用上面的技巧去绕过

但是想要触发这个.html还需要notify为true，但是这里是false

这里我们就要想办法进行DOM破坏了

然后我们尝试使用<img name=notify>来绕过，为什么不使用<img id=notify>,因为id不允许覆盖已经存在的值，但是name可以覆盖

所以我们构造如下payload

<img name=notify><style><style/><script>alert()//

然后需要我们进入到刚刚分析的漏洞点，所以我们需要进入下图所示，但是只有当img图片加载成功才可以，所以我们需要再img传一个真值,且img标签中属性的执行是异步的所以在src加载的过程中，下面的text也会加载，然后才是onload加载，这样payload也加载到了memeGen里面

所以最终传参为

img=valid_img_url&text=<img name=notify><style><style/><script>alert()//

结果

这里图片源可以添加一个更容易访问的图片，如果很难访问的图片的话可能会因为访问超时而没有回应