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

问题描述

发生了一些奇怪的事情，我被难住了。

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

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

如您所见，我正在使用参数“size:'test2'”调用函数uploadVariantPicture。

然而，当我真正点击链接时，JavaScript 会抱怨两个编码的单引号没有被转义。我收到以下错误：

语法错误：意外的标识符“test2”。需要“)”来结束参数列表。

如果我解码两个编码的单引号并使用反斜杠将它们转义，则函数调用成功。但问题是我需要对它进行编码。我不能让它未编码并转义引号。这对我的情况不起作用。

非常感谢任何帮助。我超级困惑。

解决方法

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 解析器删除外部双引号之后。

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

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

,

考虑使用 JavaScript 正确附加事件处理程序，这样您就不必担心转义问题，并且不必依赖全局对象的污染来使脚本工作：

const uploadVariantPicture = (arg) => console.log(arg);

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

<a>Link</a>

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