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


Sanitize strings to avoid special characters break javascript generated by php

我有一个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控制台中得到一些错误:

未捕获的语法错误:无效的正则表达式:缺少/home.php:1 Uncaught SyntaxError:missing)在参数列表之后

参数列表后未捕获的SyntaxError:缺少)

未捕获的SyntaxError:意外的令牌非法

我已经尝试过使用addslash、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攻击安全吗?

首先,创建一个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))"

仅供参考在脚本中使用单引号以避免转义双引号字符是更常见的做法。使事物更加干净和标准化。