0

How to encrypt password in client widget and send encrypted data to server

asked 2014-07-16 11:17:09 +0800

tsinglongwu gravatar image tsinglongwu
30 2

updated 2014-07-18 02:58:21 +0800

Hi all,

I use ZK 5.0.7.

I want to encrypt client password and send encrypted data to server after submit. The unencrypted password is forbidden to be captured by Wireshark, etc.

I have read <url>http://books.zkoss.org/wiki/SmallTalks/2007/June/HowtoSecureUser%27sPasswordwith_Encryption</url> but it can not applied in my app because it is for ZK 2.4. There are some issues block me:

  1. Can't find method: zkau.send({uuid: comp.id, cmd: "onEncryption", data: [data]},10);
  2. "Command" in EncryptionCommand.java is not identified.

Is anyone know how to implement this feature with a exact demonstration for ZK 5? Thanks a lot in advanced.

delete flag offensive retag edit

2 Answers

Sort by ยป oldest newest most voted
1

answered 2014-07-23 11:21:41 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-07-24 07:17:42 +0800

Hmmm... I don't think that the ZK 5 posts automatically the raw password (at least in my example) but to be sure you can take my previous sample and instead of using ZK textboxes use the native html input controls which cannot be binded automatically through the ZK engine:

<?page title="Login Page" contentType="text/html;charset=UTF-8"?>
<?script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js" ?>
<zk>
<window id="winLogin"
        title="Login Page" border="normal" 
        apply="login.LoginController"
        xmlns:w="http://www.zkoss.org/2005/zk/client"
        xmlns:n="native">

    <vlayout>
        Username <n:input type="text" id="txtUsername" />
        Password <n:input type="password" id="txtPassword" />

        <hlayout>
            <button label="Login" w:onClick="login()" />
            <button label="Quit" href="http://www.pixar.com" />
        </hlayout>
    </vlayout>

<script type="text/javascript">
<![CDATA[

    function login() {
        var username = $( "#txtUsername" ).val();
        var password = $( "#txtPassword" ).val();
        var hashpass = CryptoJS.MD5(password);
        var data = 'username:' + username + ',password:' + hashpass;  
        zAu.send(new zk.Event( zk.Widget.$('$winLogin'), 'onUser', data));
    }

]]></script>

</window>
</zk>

Check from your browser the network traffic and you 'll see that the only values posted to the server are the encrypted ones.

Hope that helps

Costas

link publish delete flag offensive edit

Comments

Thanks Costas. It's work well of your example 2 to use xmlns:n="native". And I find another way to overwrite zk client engine of au.js if widgt._type is password, then set a encrypted data. Otherwise use https to fix this issuse. Thanks a lot for your reply.

tsinglongwu ( 2014-08-01 11:28:20 +0800 )edit
0

answered 2014-07-18 18:50:17 +0800

cyiannoulis gravatar image cyiannoulis
1191 10

updated 2014-07-18 18:51:48 +0800

Well, here is my friend an example in ZK 5. It is using the crypto-js javascript library.

The page:

<?page title="Login Page" contentType="text/html;charset=UTF-8"?>
<?script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js" ?>
<zk>
<window id="winLogin"
        title="Login Page" border="normal" 
        apply="login.LoginController"
        xmlns:w="http://www.zkoss.org/2005/zk/client">

    <vlayout>
        Username <textbox id="txtUsername" type="text" />
        Password <textbox id="txtPassword" type="password" />

        <hlayout>
            <button label="Login" w:onClick="login()" />
            <button label="Quit" href="http://www.pixar.com" />
        </hlayout>
    </vlayout>

<script type="text/javascript">
<![CDATA[

    function login() {
        var username = $( "$txtUsername" ).val();
        var password = $( "$txtPassword" ).val();
        var hashpass = CryptoJS.MD5(password);
        var data = 'username:' + username + ',password:' + hashpass;  
        zAu.send(new zk.Event( zk.Widget.$('$winLogin'), 'onUser', data));
    }

]]></script>

</window>
</zk>

And the controller:

import org.zkoss.zk.ui.Component;
import org.zkoss.zk.ui.event.Event;
import org.zkoss.zk.ui.event.ForwardEvent;
import org.zkoss.zk.ui.util.GenericForwardComposer;
import org.zkoss.zul.Messagebox;

public class LoginController extends GenericForwardComposer {

    private static final long serialVersionUID = 1L;

    @Override
    public void doAfterCompose(Component comp) throws Exception {
            super.doAfterCompose(comp);
    }

    public void onUser$winLogin(Event event) {
        ForwardEvent fe = (ForwardEvent) event;
        try {
            Messagebox.show("Received data: \n " + fe.getOrigin().getData());
        } 
        catch (InterruptedException e) {
            e.printStackTrace();
        }
    }

}

Hope that helps

Costas

link publish delete flag offensive edit

Comments

Thanks a lot, Costas. I think cryptoJS.MD5() is useful to encrypt password. But the raw password will still bind with textbox and transported to server in the Internet. So it will be captured by Wireshark or other network monitor tools. I think it's need to fix issue through zk client engine.

tsinglongwu ( 2014-07-23 04:38:12 +0800 )edit
Your answer
Please start posting your answer anonymously - your answer will be saved within the current session and published after you log in or create a new account. Please try to give a substantial answer, for discussions, please use comments and please do remember to vote (after you log in)!

[hide preview]

Question tools

Follow
1 follower

RSS

Stats

Asked: 2014-07-16 11:17:09 +0800

Seen: 35 times

Last updated: Jul 24 '14

Support Options
  • Email Support
  • Training
  • Consulting
  • Outsourcing
Learn More