Burad's Blog » html

View contents of Zip/Jar files using firefox

burad — Tue, 13 May 2008 20:19:02 +0000

With Firefox 3, you can use firefox browser to view contents of zip/jar files.
For viewing contents of filename.zip type following at location bar:

jar:file://< full path to filename.zip >!/
Example: jar:file:///home/user/Desktop/filename.zip!/
Also: jar:file:///home/user/Desktop/filename.zip!/dir/file1.js

This is specially very useful when you want to see contents (.js, .css, .html files) included in firefox extension’s jar file. After it list the contents, you can easily browse through the directory, sorting files etc.

Update: Security problems that come with jar: protocol
While serching for pages related to jar protocol in firefox, I found an interesting article at www.gnucitizen.org

In simple terms, it means that any application which allows upload of JAR/ZIP files is potentially vulnerable to a persistent Cross-site Scripting. Potential targets for this attack include applications such as web mail clients, collaboration systems, document sharing systems, almost everything that smells like Web2.0, etc, etc, etc.

Similar security concerns also arise in data: protocol in firefox. So one need to be careful to filter files you want to allow for upload. Actually, once I had similar situation with a website which allowed you to host image files, but the problem was they were not checking for file types. Thats means you are allowed to upload a php file too. So now you can do anything you want with that server (don’t ask me what I did ). So beware of such issues.

The Perfect Home Page

burad — Sat, 26 Apr 2008 12:44:30 +0000

Through ajaxian.com, I found about this project “TPHP “.

“command based way to start your web journey”

An simple designed HTML page with javascripts to provide various functionality like search from google, yahoo etc and others like whois, dns lookup. It provides all these functionality with a simple command like interface. For example you can do :

-g India // to do a google search for India
-g India>> // to take you to first result of google search
-whois google.com // to do whois query

It also provides recommendation based on previous searches.
Try it..and give your feedback , would you prefer such homepage ?
For more details :TPHP: The Perfect Home Page

Creating Error 404 page

burad — Wed, 16 Apr 2008 20:54:24 +0000

Helping lost visitors? Sometimes a link provided by you may end up as 404 page or viewer might have typed wrong URL that doesn’t lead correct page on your site. To help your visitors you can actually use .htaccess file (for Apache servers) to redirect all such links to a special page which will be more useful than plain “404 File Not found” error.

You can add this one line to .htaccess file (create this file if it doesn’t exist)

ErrorDocument 404 /web404.html

This will redirect all queries for files not found in that directory and sub directories to web404.html
On that page you can provide user with:

Link to homepage
Tell them to check the URL or Go Back
Search functionality for your website will be very useful.

So yesterday I added a 404 page for my website: Check it out

I have also added similar functionality for my wordpress blog. For setting up 404 Error page on wordpress follow this well compiled article: Creating an Error 404 Page

Interesting read: Creating User Friendly 404 Pages

Cross-site Scripting (XSS)

burad — Tue, 15 Apr 2008 17:58:39 +0000

Two days back, my shoutbox was hacked . I was not aware that people are actually visiting this, which I made long back to have similar thing for Ethos in june, 2005. After that i haven’t updated the code and many things were left in between.

What actually happened: Cross Site Scripting, when we want user to input some data (which may be html/javascript) and displays it back. So if html/script tags are not properly checked it can cause trouble. Earlier I hadn’t checked for javascript, iframe inputs. So somebody just inserted an iframe as message input in my shout box. And the source of iframe contained redirection to another website. So when shouts were displayed on the page the iframe code was displayed as it is and page got redirected to other page.

Luckily I checked the page just after the day this happened, So that way i actually got chance to update this orphaned code and made some fixes.

Solution : Idea is to filter meta characters such as (< , >, ‘ , ” etc) Which will prevent browser from processing them as part of some script, they will be processed as plain text only.
So while doing in php you can do:

$shout=str_replace("<","<",$_GET["shout"]);

And to be on safer side we should also replace following characters:
replace ( with ( replace ) with ) replace & with & replace ' with ' replace " with "
Or If you are not expecting user to input these characters then you can simply replace these with null string;

Update: (25-apr-2008)
You can also use php functions htmlspecialchars, htmlentities, strip_tags.

The replacements which I have mentioned above can be easily done using htmlspecialchars but if you want to extend it to all html tags then you can use htmlentities. And to strip both html and php tags from string you can use strip_tags. The disadvantage with strip_tags is that it doesn’t validate html so can cause trouble in case of broken html tags. It also provide you option to exclude list of tags from being stripped.

So now you can enjoy Shout Box until some new bug is found or its hacked again [;)]

Related post:
SQL Attacks: Hacking (SQL injection)

Update(14th May 2008): XSS cheatsheet by ha.ckers.org lists possible cross site scripting methods on various browsers.

Adobe AIR: Web to Desktop

burad — Tue, 19 Feb 2008 21:28:44 +0000

Past few days, I have came across Adobe AIR through digg, techmeme, delicious and so today i thought i should try this. Adobe AIR lets us their existing web development skills in HTML, AJAX, Flash and Flex to build and deploy rich Internet applications to the desktop. For Application development you will need two things:

Adobe AIR Runtime : Necessary for running AIR applications. (For windows & mac)
AIR_SDK Provide necessary libraries to build AIR application

Having Adobe AIR extension for Dreamweaver CS3 can be very helpful as it facilitates to package and preview .air application files directly within Adobe Dreamweaver CS3.

As my first AIR application, I ported my rubiks cube timer as a desktop application (RubikTimer.air). Its very easy using dreamweaver extension, have a look here : Create your first HTML-based AIR application with the AIR SDK (great tutorial for beginners).

One problem I faced: Usually setInterval(“display()”,500) works with Firefox/IE but it was not starting with no error message to look into but then i found out about using Adobe CommandLine tool. (via Three ways to debug Adobe javascript Application). It´s called ADL and resides in the /bin folder of the SDK. ADL showed the Error: “Unsafe javascript”. Then after some random changes when i change it to “setInterval(display,500)”, It started working. Another problem I faced was related to keypress events in javascript, were not working with AIR (still have to resolve this issue)

Download RubikTimer.air here
Web Based Rubik Cube Timer

Sample Adobe AIR Applications
Trying hands on Google gadgets

Trying hands on Google gadgets

burad — Sun, 17 Feb 2008 00:16:26 +0000

Tonight i tried creating some google gadgets (actually its quite easy using Google Gadget Creator). You can check out them here: Google gadgets . You can use html / javascript (as in any other webapage) to create gadgets. So i converted my Rubiks Cube Timer to a gadget. Other one is a gadget to search stock, scripts on bombay stock exchange.

You can also create gadgets using : Make your Own Gadget (Which is as simple as filling out forms)

P.S. : My first post on wordpress blog. (I imported my previous posts from blogger)

Paint Online

burad — Wed, 18 Apr 2007 16:33:00 +0000

These days i’m getting so many websites which allows you to draw online..here is a list of some
Flash Based:

Imagination Cubed
Wetpaint Please Touch – Create Your Own Masterpiece!
Artpad
FlashPaint
Sketchr (also available at http://www.queeky.com)
Scratchpad
Online Paint Brush

HTML < canvas > Based:

Paint Chat [designed by me ]
Canvas Painter
Canvas Paint (resembles to MS paint)

Java Based:

Related Post :
Paint Chat !!
Web2.0 Applications

Web Development Tools

burad — Sat, 24 Feb 2007 17:34:00 +0000

Great listing of web developers powertools by Brennan Stehling.
I’ll starts with extension for firefox that comes very handy while web devlopment.

Web Developer : Adds a menu and a toolbar with various web developer tools.
Firebug: Allows you to edit debug, and monitor CSS, HTML, and JavaScript live in any web page.
ColorZilla: Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.
Live HTTP Headers

The list Web Development Tools for the Power Developer contains :

Validators

Javascript

Websites

Read More>> (also containing ASP.NET, Proxy tools)
And w3schools, a great place for finding tutorials realted to web development.

Updated(29 April 2007) : Tools for web-designers.

Improving interactivity with Javascript

burad — Thu, 22 Feb 2007 04:37:00 +0000

HTML controls other than conventional Push buttons, radio buttons, check boxes, select boxes, and text inputs, can power up forms, webdev using javascript to increase interactivity and easy (for users). List of such controls includes : slider, Date picker, Smart text boxes, Advanced tooltips, Auto validation etc.

Read more friendly bit >> Improving interactivity with Javascript
In addition, I find image maps also very handy when it comes to intereactivity when used properly with tooltips…as i used them in Paint Chat.

Bonus link[ ] DailyBlogTips > Web 2.0 Webdesign Tutorials
Related post :

Play with html using javascript

GPRS on Mobile

burad — Thu, 15 Feb 2007 19:29:00 +0000

Yesterday I activated GPRS on my mobile (nokia 6030) …its quite cheap( 10paise/10kb)
So I tried different pages which works for mobile

Yahoo Search
Flickr : http://m.flickr.com
W3schools.com: http://w3scholls.com/wap.wml
Google Mpas: http://www.google.com/gmm

Some more websites which works on mobile can be found here : Mobile Compatibe Wesites

So I thougth i should have a mobile webpage too.. so i searched for it and found this great tutorial on w3schools: WAP/WML tutorial. It has also got a demo page which works with explorer only but it contains simple and good examples explaining basic features of wml along with preview on how it looks on mobile.

The WAP (Wireless Application Protocol) protocol is the leading standard for information services on wireless terminals like digital mobile phones. WML stands for Wireless Markup Language. It is a mark-up language inherited from HTML, but WML is based on XML, so it is much stricter than HTML.

Tutorial was pretty easy..so i create my own pae which works on mobile. You can access it at:
http://www.aburad.com/m.wml, though it contain my pic, blog address and some content only(I will add some more content). WML supports wbmp(which is black & white) image format,( you can convert image to wbmp using http://www.online-utility.org/. It als o supports jpg format. One more thing while designing your pages for mobile, you can opera to see how it looks as it supports wml files. Or check it at online wap emulator: WapTiger
Some more links : Wap Tutorials(haven’t tried yet).