将URL放入img标签时如何正确进行HTML转义与URL编码？

核心处理逻辑 #

你需要按顺序完成URL编码和HTML转义两步操作，两者作用层级不同，不能互相替代，也不能打乱顺序。 #

第一步：先完成URL本身的合法性编码 #

按照URL RFC规范，查询参数的取值如果包含URL保留字符（比如你这里queryA的取值是另一个完整URL，包含/、:等保留符），必须先对参数值做百分号编码，避免和外层URL的语法规则冲突。
编码后queryA的取值为https%3A%2F%2Fexample.com%2Fblah，此时合法的原始URL为：
https://example.com/bar.png?queryA=https%3A%2F%2Fexample.com%2Fblah&queryB=1 #

第二步：对要放入HTML属性的内容做HTML转义 #

当你把上述合法URL放到用双引号包裹的src属性中时，需要对HTML特殊字符做转义，这里核心需要转义的是&符号，必须替换为&：如果不转义，浏览器会把&queryB识别为HTML实体尝试解析，最终导致src属性值被截断，图片无法正常加载。 #

你现有写法的问题 #

你提供的现有写法存在两处错误：

• 没有对queryA的参数值做URL编码，服务器解析外层URL时会把内层URL的保留字符识别为外层URL的控制符，无法正确拿到queryA的完整取值
• 直接在HTML属性中使用未转义的&，会导致HTML解析异常

最终正确的写法 #

<img src="https://example.com/bar.png?queryA=https%3A%2F%2Fexample.com%2Fblah&amp;queryB=1" alt="Foo" width="500" height="600">

补充说明 #

如果你是通过JavaScript的setAttribute方法、或者前端框架的属性绑定语法赋值src，框架/JS运行时会自动帮你完成HTML转义步骤，你只需要保证传入的URL本身已经完成正确的URL编码即可。

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