How do I save encoded password entries when using DataTables Editor?

pansengtat

I would like to know how do I save both the encrypted user's password and its password-salt into an existing MySQL table when using Editor for DataTables. I am currently using XAMPP (phpMyAdmin v4.1.12, PHP v5.5.11, Windows 8.1 x64). Here are the codes that I currently have:

JavaScript File

var editor; // use a global for the submit and return data rendering in the examples

(function($){
    $(document).ready(function() {
        editor = new $.fn.dataTable.Editor({
            ajax: "php/manageUsersEditor.php",
            table: "#manageusers",
            fields: [{
                    label: "Rank:",
                    name: "Login.RankID"
                },{
                    label: "Status:",
                    name: "Login.Status",
                    type: "select",
                    ipOpts: [
                        { label: "Active", value: "1"},
                        { label: "Inactive", value: "0"}
                    ]
                }
            ]
        } );
        
        adder = new $.fn.dataTable.Editor({
            ajax: "php/manageUsersAddEditor.php",
            table: "#manageusers",
            fields: [{
                    label: "Username:",
                    name: "Login.Username"
                },{
                    label: "Email:",
                    name: "Login.Email",
                },{
                    label: "Password:",
                    name: "Login.Password",
                    type: "password"
                },{
                    label: "Rank:",
                    name: "Login.RankID"
                },{
                    label: "Status:",
                    name: "Login.Status",
                    type: "select",
                    ipOpts: [
                        { label: "Active", value: "1"},
                        { label: "Inactive", value: "0"}
                    ]
                }
            ]
        } );
     
        $('#manageusers').dataTable( { // INCLUDE IDENTIFIER FOR THE FORM HERE.
            dom: "Tfrtip",
            ajax: "php/manageusersEditor.php", // PHP CODE FOR THE EDITOR
            columns: [  //  COLUMN DATA TO BE DISPLAYED
                { data: "Login.ID" },
                { data: "Login.Username" },
                { data: "Login.Email" },
                { data: "Login.RankID" },
                { data: "Login.Status" }
            ],
            tableTools: {
                sRowSelect: "os",
                aButtons: [
                    { sExtends: "editor_create", editor: adder},
                    { sExtends: "editor_edit",   editor: editor}
                ]
            }
        } );
    } );
}(jQuery));

PHP Code for adding a new user (this is where the Password field is concerned)

<?php
    // DataTables PHP library
    include( "lib/DataTables.php" );
    
    // Alias Editor classes so they are easy to use
    use
        DataTables\Editor,
        DataTables\Editor\Field,
        DataTables\Editor\Format,
        DataTables\Editor\Join,
        DataTables\Editor\Validate;
     
    $data = Editor::inst($db, 'RazerLogin', 'ID')
        ->field(
            Field::inst('Login.ID')->set(false),
            Field::inst('Login.Username')->validator( 'Validate::notEmpty'),
            Field::inst('Login.Email')->validator( 'Validate::email'),
            Field::inst('Login.Password')->validator( 'Validate::notEmpty'),
            Field::inst('Login.RankID')->validator('Validate::numeric'),
            Field::inst('Login.Status')->validator('Validate::notEmpty')
        )
        ->process($_POST)
        ->data();
    
    echo json_encode($data);

pansengtat

Somehow, I am confused as to whether I should generate the password-salt on the Editor.js file instead of the server-side PHP script. Here goes:

$('#manageusers').dataTable( { // INCLUDE IDENTIFIER FOR THE FORM HERE.
            dom: "Tfrtip",
            ajax: {
                "url": "php/manageusersEditor.php", // PHP CODE FOR THE EDITOR
                "data" : {
                    "PWSalt" : genSalt()
                }
            },
            columns: [  //  COLUMN DATA TO BE DISPLAYED
                { data: "Login.ID" },
                { data: "Login.Username" },
                { data: "Login.Email" },
                { data: "Login.RankID" },
                { data: "Login.Status" }
            ],
            tableTools: {
                sRowSelect: "os",
                aButtons: [
                    { sExtends: "editor_create", editor: adder},
                    { sExtends: "editor_edit",   editor: editor}
                ]
            }
        } );

Notice that I added the "data" section under "ajax".
I defined genSalt() as a function at the top of this JS script.
Now I am thinking about storing the password-salt into the hidden field for the Editor (Adder) form. Thing is, how do I pass this salt (string) to the database when the user clicks "Create"?

Code for the hidden field:

adder = new $.fn.dataTable.Editor({
            ajax: "php/manageUsersAddEditor.php",
            table: "#manageusers",
            fields: [{
                    //... cut snippet {
                    label: "Salt:",
                    name: "Login.PWSalt",
                    type: "hidden"
                } //... cut snippet
            ]
        } );

Daimian

I am by no means an expert on network security, but generating the encryption salt with javascript and sending it to the server even using a top notch SSL screams security flaw.

I would generate it serverside with PHP.

pansengtat

Hmmm... you're right. In that case, I wrote the PHP function for the encryption salt (I quickly removed the JS code), but question now is that I am not exactly sure how to intercept the Ajax call to the server when the user finishes keying in his/her user account details after clicking Create in the Editor.

(Notice, that I added an additional field for PWSalt to attempt to save into the DB; this is an update to the PHP code I posted earlier)

$data = Editor::inst($db, 'Login', 'ID')->field(
Field::inst('Login.ID')->set(false),
Field::inst('Login.Username')->validator( 'Validate::notEmpty'),
Field::inst('Login.Email')->validator( 'Validate::email'), 
Field::inst('Login.Password')->validator( 'Validate::notEmpty'), 
Field::inst('Login.PWSalt')->validator( 'Validate::notEmpty'),
Field::inst('Login.RankID')->validator('Validate::numeric'),
Field::inst('Login.Status')->validator('Validate::notEmpty')
)
->process($_POST)
->data();

echo json_encode($data);

pansengtat

I rephrased my question into a new thread. Please see this for a more clear question: https://datatables.net/forums/discussion/22306/how-do-i-send-perform-additional-data-on-server-side-php-with-editor#latest