<button>从中</button>添加/删除 <div> <button>？</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);
    }
}