清理字符串以避免特殊字符破壞由php生成的javascript

Question

我有一個php'搜索'腳本，它在MySQL數據庫中查找請求的數據並打印一個表。 通過單擊圖標可以修改或刪除此表的每一行。 當您單擊其中一個圖標時，將調用顯示顯示的javascript函數。

這是一段代碼：

      while ($row = mysqli_fetch_row($result)) {
            // Define $id
            $id = $row[7];

            // Sanitize output
            $user = htmlentities($row[0]);
            $name = htmlentities($row[1]);
            $surnames = htmlentities($row[2]);
            $email = htmlentities($row[3]);
            $role = htmlentities($row[4]);
            $access = htmlentities($row[5]);
            $center = htmlentities($row[6]);

            $message .= "<tr>
                    <td>" . $user . "</td>" .
                    "<td>" . $name . "</td>" .
                    "<td>" . $surnames . "</td>" .
                    "<td>" . $email . "</td>" .
                    "<td>" . $role . "</td>" .
                    "<td>" . $access . "</td>" .
                    "<td>" . $center . "</td>" .
                    "<td>" .
                        "<input type='image' src='../resources/edit.png' id='edit_" . $user . "' class='edit' onclick=edit_user(\"$user\",\"$name\",\"$surnames\",'$email','$role','$access',\"$center\",'$id') title='Editar'></button>" . 
                    "</td>" .
                    "<td>" .
                        "<input type='image' src='../resources/delete.png' id='delete_" . $user . "' class='delete' onclick=delete_user(\"$user\",'$role') title='Eliminar'></button>" . 
                    "</td>
                </tr>";
        }

這只是我生成的表格的一部分。 畢竟，我用json_encode對表進行編碼並回顯它。 回聲由ajax函數捕獲，該函數對其進行解碼（JSON.parse）並將其放入div中。

表格是正確呈現的，一切正常的字符都可以正常工作，但我發現如果我有引號，斜杠和其他有意義的字符，我會遇到一些問題。 字符串在表中正確顯示，因此php沒有問題，但生成的javascript不適用於某些字符串。

例如，如果我介紹：

</b>5'"

要么：

<b>5'6"</b><br><div

作為用戶，當我點擊編輯或刪除圖標時，我在javascript控制台中出現了一些錯誤：

未捕獲的SyntaxError：參數列表后面的無效正則表達式：missing / home.php：1 Uncaught SyntaxError：missing）

參數列表后面的Uncaught SyntaxError：missing）

未捕獲的SyntaxError：意外的標記ILLEGAL

我嘗試了幾種addlash，replace，htmlentites，htmlspecialchars的組合...但我無法得到正確的。

使用它的正確方法是什么，以避免任何問題？

謝謝。

編輯：

我已經探測過這個似乎有效：

在PHP中我使用此功能：

function javascript_escape($str) {
$new_str = '';

$str_len = strlen($str);
for($i = 0; $i < $str_len; $i++) {
    $new_str .= '\\x' . dechex(ord(substr($str, $i, 1)));
}

return $new_str;
}

然后我用類似的東西

$('<textarea />').html(user).text()

在javascript中解碼字符串。

這對XSS攻擊是否安全？

Answer 1

首先，創建一個HTML安全的數組JSON字符串，然后修改代碼以使用如下數據屬性：

      while ($row = mysqli_fetch_row($result)) {
            // Define $id
            $id = $row[7];

            // Sanitize output
            $user = htmlentities($row[0]);
            $name = htmlentities($row[1]);
            $surnames = htmlentities($row[2]);
            $email = htmlentities($row[3]);
            $role = htmlentities($row[4]);
            $access = htmlentities($row[5]);
            $center = htmlentities($row[6]);

            $json_str_edit = htmlentities(json_encode(array($row[0], $row[1], $row[2], $row[3], $row[4], $row[5], $row[6], $id)));
            $json_str_delete = htmlentities(json_encode(array($row[0], $row[4])));

            $message .= "<tr>
                    <td>" . $user . "</td>" .
                    "<td>" . $name . "</td>" .
                    "<td>" . $surnames . "</td>" .
                    "<td>" . $email . "</td>" .
                    "<td>" . $role . "</td>" .
                    "<td>" . $access . "</td>" .
                    "<td>" . $center . "</td>" .
                    "<td>" .
                        "<input type=\"image\" src=\"../resources/edit.png\" id=\"edit_$user\" class=\"edit\" data-user=\"$json_str_edit\" title=\"Editar\"></button>" . 
                    "</td>" .
                    "<td>" .
                        "<input type=\"image\" src=\"../resources/delete.png\" id=\"delete_$user\" class=\"delete\" data-user=\"$json_str_delete\" title=\"Eliminar\"></button>" . 
                    "</td>
                </tr>";
        }

然后創建一個事件監聽器來捕獲JS中的相關點擊事件，如下所示：

function edit_user(user, name, surnames, email, role, access, center, id) {
    // `this` will refer to the html element involved in the event

    }

function delete_user(user, role) {
    // `this` will refer to the html element involved in the event

    }

document.addEventListener('click', function(event) {
    if(event.target.hasAttribute('data-user')) {
        switch(event.target.className) {
            case 'edit':
                edit_user.apply(event.target, JSON.parse(event.target.dataset.user));
                break;
            case 'delete':
                delete_user.apply(event.target, JSON.parse(event.target.dataset.user));
                break;
            }
        }
    }, false);

或者從addEventListener方法中，你可以直接將這個onclick事件監聽器直接添加到元素中（在這種情況下我真的認為不重要）：

onclick="edit_user.apply(this, JSON.parse(this.dataset.user))"

僅供參考在腳本中使用單引號更常見的做法是避免必須轉義雙引號字符。 使事情更清潔，更標准化。