XSS: 사용자가 SVG를 업로드할 수 있는 문제

사용자가 물건을 업로드하도록 허용하는 것은 멋진 일입니다. 내가 작업하고 있던 한 고객 대면 앱은 사용자가 파일을 업로드할 수 있도록 허용했습니다.

다음은 허용된 파일 확장자 중 일부입니다.

const acceptedFileTypes = [
  '.jpg',
  '.jpeg',
  '.png',
  '.svg'];

우리는 나중에 그것이 사용자의 보안과 관련하여 어떻게 문제가 될 수 있는지를 발견했습니다.

간단한 svg 파일은 다음과 같습니다.



간단한 구글 검색 후 온라인으로 가져왔습니다. 다음은 link 입니다.

VS 코드에서 동일한 파일을 다운로드하고 열면 다음과 같이 표시됩니다.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
</svg>

이것은 XML 코드처럼 보입니다. SVG는 애니메이션을 포함할 수 있으며 이를 위해 허용됩니다scripting. 따라서 위의 파일은 다음과 같이 쉽게 변경할 수 있습니다.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
<script type="text/javascript">
//Harmful JS here
</script>
</svg>

여기에 간단한 demo이 있습니다. 새 탭에서 이미지를 열면 javascript가 실행되는 것을 볼 수 있습니다.

해커가 다른 사용자의 장치에서 스크립트를 실행하도록 허용할 가능성을 상상해 보십시오.

이것은 저장된 것인 XSS attack 입니다. 이것은 우리가 만든 앱에 직접적인 영향을 미치지는 않았지만 확실히 사용자에게 영향을 미칠 수 있습니다. 새 링크에서 이미지를 여는 사람은 누구나 취약할 수 있습니다.

그렇기 때문에 항상 신뢰할 수 있는 출처의 svg만 허용하는 것이 좋습니다.