尽管使用 htmlspecialchars 对单引号进行编码，JavaScript 仍然抱怨这些引号需要在 function 调用中转义

Question

发生了一些奇怪的事情，我很困惑。

我有一个基本上看起来像这样的链接：

<a href="javascript:uploadVariantPicture('size:&#039;test2&#039');">Link</a>

如您所见，我使用参数“size:'test2&#039”调用 function uploadVariantPicture。

但是，当我实际单击该链接时， JavaScript 抱怨两个编码的单引号没有被转义。 我收到以下错误：

SyntaxError：意外的标识符“test2”。 预期 ')' 结束参数列表。

如果我解码两个编码的单引号并使用反斜杠对其进行转义，则 function 调用成功。 但问题是我需要对其进行编码。 我不能让它不编码并转义引号。 这不适用于我的情况。

任何帮助是极大的赞赏。 我超级困惑。

Answer 1

在解析源代码时，HTML 字符实体和转义被 HTML 解析器替换。 对于引号，它允许在用于引用源中的属性值的 HTML 属性中包含相同类型的引号。

例如

 <element attribute="&quot;">
 <element attribute='&#039;'>

在源代码中将分别产生" （双引号）和' （单引号）的属性值，尽管是用于引用 HTML 源代码中的属性值的分隔符。

因此

 <a href="javascript:uploadVariantPicture('size:&#039;test2&#039');">Link</a>

将产生一个href属性值

  javascript:uploadVariantPicture('size:'test'');

在 HTML 解析器删除外部双引号后。

选项可以包括 escaping 双引号 (HTML " ) 在href值内适当地（这取决于uploadVariantPicture接受的语法），包括帖子中提到的单引号之前的反斜杠转义，或者不使用javascript:伪协议，赞成在 JavaScript 中添加事件监听器。

不使用javascript:强烈建议使用伪协议 - 基本上它是 HTML3 的保留。

Answer 2

考虑使用 JavaScript 正确附加事件处理程序，这样您就不必担心 escaping 问题，并且您不必依赖全局 ZA8CFDE6331BD59EB2AC96F8911C4B66Z 的污染来运行脚本：

 const uploadVariantPicture = (arg) => console.log(arg); document.querySelector('a').addEventListener('click', () => { uploadVariantPicture("size:'test2'"); });

 <a>Link</a>

我想不出内联处理程序比addEventListener更可取的任何情况，除非您故意尝试利用 XSS 漏洞。