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

Question

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

我有一个 link 基本上是这样的：

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

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

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

SyntaxError: Unexpected identifier 'test2'. Expected ')' to end an argument list.

如果我对两个编码的单引号进行解码并使用反斜杠对它们进行转义，那么函数调用就会成功。但问题是我需要它编码。我不能不对它进行编码并转义引号。这不适用于我的情况。

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

Answer 1

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

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

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

<a>Link</a>

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

Answer 2

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

例如

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

in source 将分别生成 "（双引号）和 '（单引号）的属性值，尽管在 HTML source 中是用于引用属性值的定界符.

因此

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

将产生 href 属性值

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

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

选项可以适当地在 href 值内包含转义双引号 (HTML ")（这取决于 uploadVariantPicture 接受的语法），包括反斜杠转义在 post 中提到的单引号之前，或者根本不使用 javascript: 伪协议，支持在 JavaScript.

中添加事件监听器

强烈建议不使用 javascript: 伪协议 - 基本上它是对 HTML3.

的保留

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

Despite single quotes being encoded using htmlspecialchars, JavaScript is still complaining that these quotes need to be escaped in the function call

javascript

jquery

htmlspecialchars

single-quotes