luc2 luc2 - 4 months ago 47
Javascript Question

pubnub, how to identify the sender?

when receiving a message from pubnub, there is no information on the sender. how to know if it's a message from visitorA or visitorB ? there are examples on the web where the sender sends his name with the message, but how to know he isn't spoofing someone else's identity ?

here is an example of a chat interface :

<html>
<body>
<form id="message_form">
<input id="message_input" type="text"/>
</form>
<div id="chat"></div>
<script src="http://cdn.pubnub.com/pubnub-3.7.1.min.js"></script>
<script>
var pubnub = PUBNUB.init({
publish_key: 'demo',
subscribe_key: 'demo'
});

pubnub.subscribe({
channel: 'chat',
message: function(message){
var div = document.createElement("div");
div.textContent = message;
var chat = document.getElementById("chat");
chat.appendChild(div);
}
});

var form = document.getElementById("message_form");
form.onsubmit = function(e) {
var input = document.getElementById("message_input");
pubnub.publish({
channel: 'chat',
message: input.value
});
input.value = '';
e.preventDefault();
};
</script>
</body>
</html>

Answer

Chat User Identification

You can identify the sender by creating a Unique ID as well as a Name attached to the message payload of the chat conversation. This is similar to IRC strategies but a bit more simplistic.

var user_id      = PUBNUB.uuid();
var user_name    = name.value;
var user_message = input.vaule;

Here is a full example which includes the HTML elements for UserName input. Notice also that I added a safe_text() method to prevent XSS attacks.

<form id="message_form">
  Name: <input id="name_input" value="John" type="text"/><br>
  Message: <input id="message_input" value="Hi" type="text"/><br>
  <input type="submit" value="send">
</form>
<div id="chat"></div>
<script src="http://cdn.pubnub.com/pubnub-dev.js"></script>
<script>
  var userid = PUBNUB.uuid();
  var pubnub  = PUBNUB({
    publish_key   : 'demo',
    subscribe_key : 'demo',
    uuid          : userid
  });

  function safe_text(text) {
    return (''+text).replace( /[<>]/g, '' );
  }
  pubnub.subscribe({
    channel: 'chat',
    message: function(message){
      var div = document.createElement("div");
      div.textContent =
        safe_text(message.name) + ": " +
        safe_text(message.text);

      var chat = document.getElementById("chat");
      chat.appendChild(div);
    }
  });

  var form = document.getElementById("message_form");
  form.onsubmit = function(e) {
    var input = document.getElementById("message_input");
    var name  = document.getElementById("name_input"); 

    pubnub.publish({
      channel: 'chat',
      message: { name : name.value, text : input.value, userid :userid }
    });
    input.value = '';
    e.preventDefault();
  };
</script>

While this demonstration provides you with a quick and easy getting started app, you will want to add more enhanced chat security and chat authentication systems.

User Identification for Chat Apps

For additional resources for building chat applications check out Build Real-time Chat Apps in 10 Lines of Code guide and also Building A Basic Chat Application.

Chat Access Control Layer ACL

You will need to add Security ACL Access Control Layer. With PubNub Access Manager (PAM) you can control who has access by granting users permission with access tokens.

PubNub Chat Access Management ACL Access Control Layer

// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
// Grant Chat Access to Secured Conversations
// All server-side data is stored according to defined security policies.
// =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
var pubnub = PUBNUB({ 
    publish_key:   "PUBLISH_KEY", 
    subscribe_key: "SUBSCRIBE_KEY", 
    secret_key:    "SECRET_KEY"
})
pubnub.grant({
    channel  : "CHANNEL",
    callback : receiver,
    error    : receiver,
    ttl      : 60, // Minutes
    read     : true,
    write    : true,
    auth_key : "AUTH_KEY"
});

It is recommended to run this level of ACL code on Trusted Systems such as your own data center servers.

Sending/Receiving Secure Encrypted Messages

PubNub client libraries offer built-in Advanced Encryption Standard (AES) 256-bit encryption. To use message encryption, simply use cipher_key at initialization.

To enable Transport Layer Encryption with TLS and the ssl flag.

Then publish/subscribe as usual.

var pubnub = PUBNUB({
    subscribe_key: 'sub-c-f762fb78-...',
    publish_key: 'pub-c-156a6d5f-...',
    ssl: true,
    cipher_key: 'my_cipherkey'
});

Message Verification for Identity of Sender

Attaching user's information to each message is efficient and provides a very powerful level of flexibility within your application. However malicious users may attempt to spoof the identity of users and therefor impersonate other users. In the sample app we have shown that it is easy to impersonate anyone by changing your name in the "message_form" field. This is the same situation you encounter with email and SMTP where arbitrary email header impersonations are possible unless you provide a way to verify the identity of the sender. There is a solution!

Comments