能否将代码加载到img元素中执行？用户上传图片安全防护问询

首先直接给结论：正常情况下，浏览器绝对不会允许<img>元素加载并执行代码。<img>标签的核心设计就是用于加载图像资源（JPG/PNG/GIF等），浏览器会强制将其请求的资源当作图像格式解析——哪怕你把src指向一个JS文件，浏览器也只会尝试把它渲染成图片（结果大概率是显示破碎图），完全不会执行其中的代码逻辑。

但这并不意味着处理用户上传的图片就没有风险，我们需要防范的是间接的漏洞利用场景，下面具体拆解：

需要防护的核心风险场景 #

• SVG文件的恶意嵌入：SVG虽然是图像格式，但本质是XML文件，支持嵌入<script>标签、on*事件属性（比如onload="alert('XSS')"），甚至可以引入外部资源。如果你的网站允许上传SVG且没有做任何清理：
  • 虽然<img>标签加载的SVG默认不会执行脚本，但如果后续被用<object>/<embed>/<iframe>标签加载，或者被当作HTML文件解析，就会触发恶意代码。
  • 即使不执行脚本，SVG也可以通过样式劫持、钓鱼链接（比如嵌入透明的<a>标签覆盖页面）等方式攻击用户。
• 文件伪装与MIME类型绕过：攻击者可能把恶意脚本、HTML文件改后缀为.jpg/.png上传，如果你的服务器只校验文件后缀而不检查实际内容：
  • 若服务器配置错误（比如允许根据文件内容自动识别MIME并解析），这个伪装的文件可能被当作脚本或HTML执行。
  • 如果网站后续把这个文件的URL错误地引用到<script>标签的src属性中，浏览器就会执行里面的代码。
• 文件名/属性注入导致的XSS：如果你的网站在页面上显示用户上传的图片文件名、自定义的alt属性等内容时，没有做HTML转义：
  • 攻击者可以上传文件名包含<script>alert('XSS')</script>的图片，当页面渲染这个文件名时，就会触发XSS攻击。
• 路径遍历漏洞：攻击者上传的图片文件名包含../../../../etc/passwd这类恶意路径，如果网站没有过滤文件名中的特殊字符，可能导致服务器泄露敏感文件，甚至被恶意写入文件。

有效的图片 sanitize 防护措施 #

• 校验文件真实内容：不要只依赖文件后缀，检查文件的魔术头（比如JPG的FF D8 FF、PNG的89 50 4E 47），确保上传的是真正的图像文件。对于SVG，要使用专门的XML清理库移除所有危险标签和属性。
• 重命名上传文件：用随机生成的文件名（比如UUID）替代用户上传的原始文件名，避免路径遍历和文件名注入。
• 严格控制MIME类型：服务器只允许指定的图像MIME类型（image/jpeg、image/png、image/gif等）被上传和访问，拒绝其他类型的文件。
• 转义所有用户输入的输出：在页面上显示文件名、alt属性等用户提供的内容时，进行HTML转义（比如把<转成<，>转成>），防止XSS。
• 隔离存储上传文件：把上传的图片放在独立的存储位置，不要放在可执行的Web目录下，或者配置服务器禁止解析该目录下的脚本文件。

内容的提问来源于stack exchange，提问作者user1671787