任何人都可以向我指出有关转义用户提交的 HTML、JavaScript 和 PHP 内容的 StackOverflow 答案和其他资源(包括书籍)吗?

例如,假设用户在文本框中键入信息,然后单击提交按钮。然后将文本通过JavaScript写入页面的div中,同时通过GET发送给PHP,由PHP放入MySQL数据库中。

我正在寻找一个很好的,广泛的,但也详细的概述涉及的所有不同类型的转义。流程图也会有所帮助!

谢谢!

谢谢!我正在寻找一个可以像备忘单一样制作的人,其中包括 1) 转义以显示 html 显示,2) 转义以输入 URL 3),将 URL 发送到 PHP,4) 将来自 URL 的数据插入到数据库中。每个部分应该有 1)关于潜在问题情况和应该转义的字符的示例,2)关于如何转义字符的示例,以及 3)如果以后需要如何解码字符。

好处将是一个一站式资源,其中包含许多有关转义的示例和解决方案,以便其他用户不必浏览大量示例和解决方案很少的不同站点、答案和资源。我认为这会很棒。

到目前为止,这张图表看起来还不错
http://www.the-art-of-web.com/javascript/escape/

最佳答案

我自己总是对用户数据使用“POST”,而不是“GET”,下面的讨论反射(reflect)了这一点,但无论哪种方式,您仍然可以使用我下面所说的大约 90%。所以这里...

一般规则:在转义数据时不要“提前考虑”。只进行立即必要的转换。规范示例:在进行数据库插入时不要转义 HTML,因为您最终会得到,例如,'&' 变成 '&'经过几次往返。

一般规则:始终使用 UTF-8。当有人第一次从包含 unicode 省略号的电子邮件中复制粘贴时,您会感激不尽。 (您会惊讶于这种情况发生的频率如此之高。)需要典型设置;这可能因 PHP/MySQL/HTML 版本而异:

  • PHP: php_value default_charset "UTF-8"
  • MySQL:创建数据库时选择utf8。
  • HTML:

  • 一般规则:未经 sanitizer (尽管已正确转义)的用户数据只有五个地方可以去:
  • (正确类型的)数据库字段(即 UTF-8 文本字段或 blob 字段)的值。
  • PHP 变量的值。
  • Javascript 变量的值。
  • HTML 表单元素的“value”属性值。
  • HTML 元素的 textNode 子元素的内容。

  • 如果您想将用户数据放在任何其他地方,则必须对其进行 sanitizer 。这超出了问题的范围,但在典型情况下,您可能会使用正则表达式来用下划线替换不是 ASCII 字母或数字的任何内容。在唯一性很重要的情况下,例如文件名或 HTML 'id' 属性,必须完成额外的工作以确保清理过的名称是唯一的(例如,确保在 'a^b' 和 'a&b ' 都被清理为 'a_b' 已解决)。典型的解决方案如下所示:
    filename = original_filename;
    while(already_exists(filename)) {count++; filename = original_filename + count;}
    

    最后,我的回答重点是:用于将数据移入和移出未修改的用户数据可以到达的五个特殊位置的特定转义函数:
  • HTML 表单值属性 -> PHP $_POST 变量:无需转义。
  • PHP 变量 -> 数据库字段:PDO 准备语句:
    $stmt = $db->prepare('insert into roundtrip (id, name) values (NULL, :data)');
    $stmt->execute(array('data' => $_POST['name']));
    
  • 数据库字段 -> PHP 变量:不需要转义,但使用 PDO 准备好的语句来转义查询值:
    $stmt = $db->prepare('select id, name from roundtrip where name = :data');
    $stmt->execute(array('data' => $_POST['name']));  // User data needs escaping.
    while ($result = $stmt->fetch()) {
        echo $result['name']; // DB result doesn't.
    }
    
  • PHP 变量 -> Javascript 变量:json_encode:
    var data = <?php echo json_encode(data); ?>;
    
  • PHP 变量 -> HTML textNode 或表单值:htmlspecialchars:
    <div><?php echo htmlspecialchars(data); ?></div>
    <input type="text" name="name" value="<?php echo htmlspecialchars(data); ?>"/>
    
  • Javascript HTML textNode 或表单值:浏览器的内置 textNode 和 .value 属性/函数:
    data = source_div.textContent; // Firefox
    data = source_div.innerText; // Other browsers
    target_div.textContent = data; // Firefox
    target_div.innerText = data; // Other browsers
    
    // To/from form element.
    data = source_form.value;
    target_form.value = data;
    
    // Append to element.
    target_div.appendChild(document.createTextNode(data)); // All browsers
    
    // jQuery textNode
    data = $('#source_div_id').text();
    $('#target_div_id').text(data);
    
    // jQuery form value
    data = $('#source_form_id').val();
    $('#target_form_id').val(data);
    

  • 用这样的字符串做一个重复的往返测试,以确保它在整个 HTML->PHP->DB->PHP->[Javascript->]HTML 循环中每次都完全相同:
    &amp;ДЖäüöéè<script>…</script>™<i>bold</i>
    

    这是我的脚本,用于测试以哪种方式转义;它显然需要一个数据库、一个名为“roundtrip”的表、列“id”和“name”,以及在运行它之前创建的 id=1 的单行:
    <?php
    $db = new PDO("mysql:host=$host;dbname=$dbname", $db_user, $db_password);
    $stmt_insert = $db->prepare('
    update
        roundtrip
    set
        name = :name
    where
        id = 1
    ');
    $stmt_select = $db->prepare('
    select
        name
    from
        roundtrip
    where
        id = 1
    ');
    if ($_POST['do'] == 'edit') {
        $stmt_insert->execute(array('name' => $_POST['name']));
    }
    $stmt_select->execute();
    while ($result = $stmt_select->fetch()) {
        $data = $result['name'];
    }
    ?>
    <!DOCTYPE html>
    <html>
    <head>
        <title>Roundtrip test</title>
        <script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript">
            function copydiv() {
                // Non-jquery:
                //var source = document.getElementById('divdata');
                //var target = document.getElementById('copydiv');
                //if (typeof(source.textContent) != "undefined") {
                //    target.textContent = source.textContent;
                //} else {
                //    target.innerText = source.innerText;
                //}
    
                // jquery:
                $('#copydiv').text($('#divdata').text());
            }
            function copyform() {
                // Non-jquery:
                //var source = document.getElementById('formdata');
                //var target1 = document.getElementById('copyform1');
                //var target2 = document.getElementById('copyform2');
                //if (typeof(source.textContent) != "undefined") {
                //    target1.textContent = source.value;
                //} else {
                //    target1.innerText = source.value;
                //}
                //target2.value = source.value;
    
                // jquery:
                $('#copyform1').text($('#formdata').val());
                $('#copyform2').val($('#formdata').val());
            }
            function copyjson() {
    
                var data = <?php echo json_encode($data); ?>;
    
                // Non-jquery:
                //var target = document.getElementById('copyjson');
                //if (typeof(target.textContent) != "undefined") {
                //    target.textContent = data;
                //} else {
                //    target.innerText = data;
                //}
    
                // jquery:
                $('#copyjson').text(data);
            }
        </script>
    </head>
    <body>
        <div>Data: <span id="divdata"><?php echo htmlspecialchars($data); ?></span></div>
        <div>JS div copy: <span id="copydiv"/></div>
        <div>JS form copy: <span id="copyform1"/></div>
        <div>JSON copy: <span id="copyjson"/></div>
        <form method="POST">
            <input type="hidden" name="do" value="edit"/>
            <input type="text" name="name" id="formdata" value="<?php echo htmlspecialchars($data); ?>"/>
            <input type="text" id="copyform2"/>
            <input type="button" value="Copy div" onclick="copydiv();"/>
            <input type="button" value="Copy form" onclick="copyform();"/>
            <input type="button" value="Copy json" onclick="copyjson();"/>
            <input type="submit"/>
        </form>
    </body>
    </html>
    

    关于php - 为 html、javascript 和 PHP 转义用户提交的内容的广泛概述、流程图,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/6399221/

    10-12 14:38
    查看更多