@garethheyes가 또 새로운 XSS 벡터를 만들어 왔습니다. 바로 ontransitionend
란 이벤트 핸들러인데요. 이 이벤트 핸들러는 transition, 즉 CSS의 애니메이션이 끝날 때 동작하며 동작을 위해선 해당 Element에 포커스 상태가 되어야합니다.
<style>
display: block;
transition: outline 1s;
</style>
<xss ontransitionend=alert(1) id=x tabindex=1>test</xss>
위 코드 기반이고, 약간 더 살펴보죠.
CSS Transition
Transition은 CSS에서 속성이 변경될 때 애니메이션 속도를 명시하는 값입니다. 아래와 같이 값으로 동작할 CSS 속성과, 시간 값이 들어가게 됩니다.
transition: <attr> <time>
.body {
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
Ontransitionend
Ontransitionend은 이벤트 핸들러 중 하나로 CSS의 Transition이 완료될 때 동작합니다.
const transition = document.querySelector('.transition');
transition.addEventListener('transitionend', () => {
console.log('Transition ended');
});
XSS
아래 코드 삽입 이후 input 영역을 클릭하는 등 focus를 잡게되면 ontransitionend이 동작하면서 alert(1)
이 실행됩니다.
<input type=text style="display:block;transition:outline 1s;" ontransitionend=alert(1) id=x tabindex=1>
References
- https://portswigger.net/research/new-xss-vectors
- https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/transitionend_event