从 <div> 中添加/删除 <button>？

Question

目标

目标是为经过身份验证的用户提供库存管理功能。其他访问者只能查阅库存，并过滤他们的发现。

身份验证

身份验证是通过ajaxSession() javascript 函数进行的，如此处所述。

1. PHP / Ajax : How to show/hide DIV on $_SESSION variable value?（见答案）
2. PHP: $_SESSION doesn't seem to get set. Any idea?

现在，$.ajax() 委托从 PHP 服务器获得正确答案。现在，我虽然简单地使用 CSS 类 .hide 和 .show，但出于安全原因，这似乎不是一个好主意。

ajaxSession() 函数

function ajaxSession(actionUrl) {
    $.ajax(function() {
        url: actionUrl
        success: function(authenticated) {
            if (authenticated == 'true') {
                // create buttons here.
            } else {
                // ensure to empty those div
            }
        }
    });
}

注意$.ajax()调用中设置了其他成员，但重要的是在那里。

Answer 1

安全机制应该​​在服务器端实现！

如果您在 JS 中创建一些特定于登录的按钮，则不会存在安全漏洞。请确保您不从您的后端 (PHP) 输出敏感数据，或者您执行任何未经授权的操作（再次从您的后端）。

始终在服务器端（针对每个操作）检查用户是否已获得授权！
将登录状态存储在会话等中。不要依赖像 isLoggedIn=1 或 POST 数据这样的 URL 参数。它们来自客户。客户端始终是应用程序中不受信任的部分。

Answer 2

如果您担心人们猜到它们，您可以使用随机类名而不是隐藏/显示...“230583”或“fss83hjg”等。

如果我理解正确，这就是你想要的吗？

function ajaxSession(actionUrl) {
$.ajax(function() {
    url: actionUrl
    success: function(authenticated) {
        if (authenticated == 'true') {
            // create buttons here.
            var buttons = '<input type="button" value="Button 1">'
            buttons += '<input type="button" value="Button 2">'
            buttons += 'etc...';
            $('#button-container-div').html( buttons );
        } else {
            // ensure to empty those div
            $('#button-container-div').html('');
        }
    }
});
}

在 jQuery 中创建元素时，您应该动态地执行它们，以便元素默认不在页面上（见上文）。但是，如果有人正在寻找（甚至没有那么难），他们将能够看到您在源代码中所做的事情，并且可以相当容易地使用控制台重新创建您正在做的任何事情（如果经过身份验证）......我会建议使用服务器端代码（您使用的是 PHP？）来生成您的敏感数据。 （见下文）

<?php
// start sessions if you aren't including a global config file that does it for you
session_start();

if($_SESSION['is_logged_in'] == true) {
    // logged in, show buttons
    $buttons = '<input type="button" value="Button 1">';
    $buttons .= '<input type="button" value="Button 2">';
    $buttons .= 'etc...';

    echo $buttons;
} else {
    // not logged in
}
?>

Answer 3

为了成功：

Function myFunction()
{
    var btn=document.createElement("BUTTON");
    var t=document.createTextNode("CLICK ME");
    btn.appendChild(t);
    document.getElementById("theDiv").appendChild(btn);
}

失败

function myFailFunction() {
   var node = document.getElementById("theDiv");
   while (node.hasChildNodes()) {
        node.removeChild(node.lastChild);
    }
}