WW3

源码

<!-- Challenge -->
<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>

目前啥也不输入，直接进入查看。

分析源码

可控的输入点为text和img。
img被escape过滤。也就是将<>"’=进行了替换。

const escape = (dirty) => unescape(dirty).replace(/[<>'"=]/g, '');

text也是被过滤掉了。
拿到题目感觉到处都被过滤掉了。
这道题的入口点其实在

setTimeout(_ => {
$('#status').remove()
notify ? ($('#notify').html(html)) : ''
$('#meme-code').text(template)
}, 1000)

当notify为true时，就会进入到下面的函数

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

但是题目中给出了notify为false，那我们就又得用dom破坏了。

DOMPpurify框架绕过

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

rxhtmlTag = /<(?!area|br|col|embed|hr|img|input|link|meta|param)(([a-z][^/>x20trnf]*)[^>]*)/>/gijQuery.extend( {htmlPrefilter: function( html ) {return html.replace( rxhtmlTag, "<$1></$2>" );}...
})tmp.innerHTML = wrap[ 1 ] + jQuery.htmlPrefilter( elem ) + wrap[ 2 ];

首先是匹配一些函数，然后当匹配到<*/>时，他会自动转换为<*></*>这类标签。
例如，对于<style><style/><script>alert(1337)//会被解析成<style><style></style><script>alert(1337)//。
我们知道DOMPurify的工作机制是将传入的payload分配给元素的innerHtml属性，让浏览器解释它(但不执行)，然后对潜在的XSS进行清理。由于DOMPurify在对其进行innerHtml处理时，script标签被当作style标签的text处理了，所以DOMPurify不会进行清洗(因为认为这是无害的payload)，但在其后进入html()时，这个无害payload就能逃逸出来一个有害的script标签从而xss。

覆盖变量notify

就是使用dom破坏。
id不允许覆盖已经存在的变量。
通过属性name进行覆盖。

js作用域和作用链域

在JS的函数中，一个变量是否可访问要看它的作用域(scope)，变量的作用域有全局作用域和局部作用域(函数作用域)两种。
一步步的想上找。

构建payload

那么这里还有一类知识点，img标签时异步解码。
也就是这段代码里，会先写Creating，再加载图片，然后才会触发src…也就是可以使用text进行覆盖notify。

<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>

那么就能顺利进入下面这段代码

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

最终也是进入了计时器里面。
构建payload

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

那么传参也就是

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