SVG animate SIML XSS cheatsheet

svg_animate_cheatsheet.md

📌 SVG <animate> Cheat Sheet for XSS Payloads

🔹 What is <animate>?

• The <animate> element in SVG is used to animate attributes of another SVG element.
• Host element = the element whose attribute is being animated.
  • If <animate> has no href, the parent element becomes the host.
  • If <animate href="#id"> is present, the host = the element with that ID.

---

🔹 Common Host Elements and Animatable Attributes

Host Element	Example Animatable Attributes
<circle>	r, cx, cy, fill, stroke
<rect>	x, y, width, height, rx, ry, fill
<ellipse>	cx, cy, rx, ry, fill
<line>	x1, y1, x2, y2, stroke
<polygon> / <polyline>	points, fill, stroke
<path>	d, stroke, fill
<text>	x, y, font-size, fill, stroke
<a>	href (or xlink:href in older SVGs)
<image>	x, y, width, height, href
<svg>	viewBox, width, height

---

🔹 Example Payload

<svg>
  <a>
    <animate attributeName="href" values="javascript:alert(1)" />
    <text x="20" y="20">Click me</text>
  </a>
</svg>

🔎 Explanation:

• Parent of <animate> → <a>
• Host element → <a> (since no href was specified, the parent is used).
• Attribute being animated → href of <a>.
• Effect → When <animate> runs, it sets the href of <a> to javascript:alert(1).
• User interaction required → User must click the link text (Click me) to trigger the JavaScript.

---

⚠️ XSS Payload Crafting Notes

• Safe targets for <animate> in XSS: href, xlink:href, src, style.
• User interaction triggers (to bypass restrictions): <a> click, <text> click, or animation auto-play (begin="0s").
• Modern browsers block javascript: URIs in some contexts (like top-level navigation), but click-based payloads often still work.

---

✅ Use this as a reference for reflected/stored XSS labs involving SVG + animate.