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]*)[^>]*)/>/gi

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