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

Question

Objective

The goal is to provide features for inventory management for the authenticated users. Other visitors can consult the inventory only, and filter their findings.

Authentication

The authentication is through the ajaxSession() javascript function as described here.

1. PHP / Ajax : How to show/hide DIV on $_SESSION variable value? (See answer)
2. PHP: $_SESSION doesn't seem to get set. Any idea?

Now, the $.ajax() delegate gets the right answer from the PHP server. Now, I though of simply use CSS classes .hide and .show , but it doesn't seem to be a good idea for security reasons.

The ajaxSession() function

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

NB There are other members set in the $.ajax() call, but the important is there.

Answer 1

The security mechanisms should be implemented on the server side!

There won't be a security vulnerability if you create some login-specific buttons in your JS. Just be sure that you don't output sensitive data from your backend (PHP) or that you perform any unauthorized operation (again from your backend).

Always check on the server side (for each operation) that the user is authorized!
Store the login state in a session or the like. Don't rely on a URL parameter like isLoggedIn=1 or POST data. They come from the client. Clients are always the untrusted parts in an application.

Answer 2

You could use random class names instead of hide/show if you're worried about people guessing them... '230583' or 'fss83hjg' etc.

If I understand correctly, is this what you're after?

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('');
        }
    }
});
}

When creating your elements in jQuery, you should do them dynamically so that the elements are not on the page by default (see above). However, if anybody is looking (not even that hard) they will be able to see what you're up to in your source code and could fairly easily use the console to recreate whatever you're doing if authenticated... I'd suggest using server side code (you're using PHP?) to produce your sensitive data. (see below)

<?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

For success:

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

For fail

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