javascript - PHP生成带有引号错误的Javascript代码

Question

我有这个 PHP 页面:

<?php

$lines = array();
$lines[] = "I am happy";
$lines[] = "I'm happy";

foreach ($lines as $line){
    $message = htmlspecialchars($line);
    ?>
    <div onclick="alert('<?=$message?>');"><div>
    <?php
}

它生成这个 HTML 结果:

<div onclick="alert('I am happy');"><div>
<div onclick="alert('I&#039;m happy');"><div>

此代码似乎是正确的，但是，单击第二个“div”元素时会发生错误。

' 字符等同于 ' 并且 javascript 生成错误:

alert('I'm happy');"

我通过添加 addslashes() PHP 函数解决了这个问题:

$lines = array();
$lines[] = "I am happy";
$lines[] = "I'm happy";

foreach ($lines as $line){
    $message = htmlspecialchars(addslashes($line));
    ?>
    <div onclick="alert('<?=$message?>');"><div>
    <?php
}

正确结果:

<div onclick="alert('I am happy');"><div>
<div onclick="alert('I\&#039;m happy');"><div>

我的问题:

这是正确/最佳的解决方案吗？ 管理此类问题的最佳做法是什么？

Answer 1

不要尝试通过将字符串混合在一起来生成 JavaScript 字符串文字。 json_encode 将为您完成所有转义('、"、换行等)，这是您需要的 JS。它是优于 addslashes 因为它是为目标数据格式设计的并且不是通用的(通用的转义解决方案往往会遗漏一些东西)。

编码 HTML 属性值的数据是在将数据放入值之前对数据所做的最后一件事。在将数据放入 JavaScript 之前不要对 HTML 进行编码。

foreach ($lines as $line){
    $message = json_encode($line);
    $javascript = "alert($message)";
    $html = htmlspecialchars($javascript);
    ?>
    <div onclick="<?= $html ?>"><div>
    <?php
}

---

也就是说，现代方法通常会将 JavaScript 分开并将数据存储在数据属性中。

您还应该避免将点击事件放在 div 元素上，它们并非设计为用户控件，因此它们不能(无需更多考虑)通过(例如)聚焦元素并按 enter 来创建可访问性问题。

foreach ($lines as $line){
    $html = htmlspecialchars($line);
    ?>
    <button type="button" data-message="<?= $html ?>">...</button>
    <?php
}

与

<script>
function buttonAlert(event) {
    var message = event.target.dataset.message;
    if (message) {
        alert(message);
    }
}
addEventListener("click", buttonAlert);
</script>