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"元素时会发生错误.

在' char相当于'和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元素上放置click事件,它们不是设计成用户控件,所以它们不能(没有更多的混乱)被(例如)聚焦元素并按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>