gpt4 book ai didi

php - 关于转义用户提交的 html、javascript 和 PHP 内容的概述和流程图

转载 作者:可可西里 更新时间:2023-11-01 08:37:41 27 4
gpt4 key购买 nike

任何人都可以为我指出有关为 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:<meta http-equiv="Content-type"content="text/html;charset=UTF-8"/>

一般规则:只有五个地方可以放置未经处理(尽管已正确转义)的用户数据:

  • (正确输入的)数据库字段(即 UTF-8 文本字段或 blob 字段)的值。
  • PHP 变量的值。
  • Javascript 变量的值。
  • HTML 表单元素的“值”属性的值。
  • HTML 元素的 textNode 子元素的内容。

如果您想将用户数据放在任何其他 位置,则必须对其进行清理。这超出了问题的范围,但在典型情况下,您可以使用正则表达式用下划线替换任何不是 ASCII 字母或数字的内容。在唯一性很重要的情况下,如文件名或 HTML 的“id”属性,必须做额外的工作以确保经过清理的名称是唯一的(例如,确保在 'a^b' 和 'a&b' 时发生的冲突' 都被 sanitizer 为 '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 文本节点或表单值: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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com