javascript - 即使在转义后引用也会破坏语法

Question

我有一个按钮，它应该使用 2 个参数(一个整数和一个字符串)调用一个 Action 。我正在使用 Yii2。

<button class="button_answer" 
    onclick="submitAnswer(
            <?php echo $id ?>, 
            <?php echo '\''.Html::encode($title).'\''?>
    );">
    Submit your answer
</button>  

它可以工作，但是当参数 title 包含单引号 或双引号 时，语法被破坏。

我变成了这样:

<button class="button_answer" onclick="submitAnswer(214, 'What's the ...?');">
     Post your answer
</button>

我不知道如何解决这个问题。

Answer 1

您需要针对 JavaScript 对 PHP 字符串进行编码。然后您需要针对 HTML 对 JavaScript 进行编码。

<?php
$js_string_title = json_encode($title);
$js = "submitAnswer($id, $js_string_title)";
$html_safe_js = htmlspecialchars($js);
?>

<button class="button_answer" 
     onclick="<?php echo $html_safe_js; ?>">
  Submit your answer
</button>  

---

更好的方法是避免完全内联 JS:

<button class="button_answer" 
        data-id="<?php echo htmlspecialchars($id); ?>"
        data-title="<?php echo htmlspecialchars($title); ?>">
     Post your answer
</button>

连同类似的东西:

addEventListener("click", answer_handler);

function answer_handler(event) {
     var el = event.target;
     if (el.classList.contains("button_answer")) {
         submitAnswer(el.dataset.id, el.dataset.title);
     }
}