OK, I had a tremendous urge to call this post “Hacking Web Interfaces”. But due to some uneducated folks who believe hacking is a bad word, I think I will stick to its euphemism.

The most direct way to feed random data to a web-service is in a raw format. Use telnet for absolute low level communications or tools like Fiddler, for communications at a higher level like HTTP. But with sites hosting hundreds of script files and html pages on their server, this approach has become more and more impractical. But there are other means to mess with the client side code.

DOM Inspector

If you use Firefox, you will notice there’s a utility called DOM Inspector that is included with it. As the name suggests, it allows you to see the DOM of the rendered HTML page. But, it also allows you to modify that DOM. You can modify the values of the properties of different DOM objects in the tree and even insert new objects.

Let’s try this technique on a product of one of the largest software companies, Google Calendar. I will use no other software than Firefox and DOM inspector.

Let’s go to the Settings screen. They have a setting for the “Custom View” property for the calendar.

Now I am a guy who wants to know what he would be doing in next 2 months but there is no option for that kind of view. Hmm, lets see if the DOM can help us. Firing the DOM Inspector, we see that the logic is quite simple.

The value of the ComboBox determines how the duration for which the custom view display the calendar. The value in the ComboBox is simply translated to the number of days. So I change the value to 42 (which is 6 weeks) and save my Settings. Et voilà, I get a custom view with 6 weeks Cool!

Using Visual Studio with IE

IE has a script debugger built in, but it is worthwhile to go in for Visual Studio as the debugger of choice. There’s a free version of the Visual Studio suite called the Express edition available which you can download and use.

Now to make it work…

1. Enable Script debugging in Internet Explorer.

   

2. Create a New Solution with an Empty Website (File > New > Web Site…)

   

3. Go to Property Pages for the new Website in Solution Explorer and enter the URL you want to debug. Don’t worry if you don’t know the URL, just enter any URL and fire the breakpoints only when you hit the required URL.

   

4. You might get a dialog asking you to include the web.config file. Answer Yes and continue. Now you will be surfing with the debugger attached to Internet Explorer. You can hit pause, set breakpoints and even skip those functions that don’t interest you

Using Venkman with Firefox

I would have loved it if Visual Studio also worked with Firefox. There’s a solution called Venkman. I won’t go through the complete detail of how to go about using it, you can read it up here.

I haven’t found a way to skip code (a la Visual Studio) using this yet.

You can change variable values by directly typing the JavaScript code for it.

The interface doesn’t have all the bells and whistles but should be able to get most of your work done.

In this post I take a look at some ridiculously simple security blunders committed by popular sites. These might not always be critical but provide an interesting insight into the design quality metrics followed at these companies.

While surfing the Net, whenever I see a website offering a cool service, my natural instinct is to find out how they are doing it. For example, Rediff used to have this ActiveX based multilingual mail composition feature, which they replaced with a JavaScript based one. Cool! So now I could work on Firefox and still send my mail in Hindi! How (naively?) were they doing this? Create an IFrame and put the entire composition feature in it. Hmmm, OK, but couldn’t someone just rip off the JS files and create, say, a multilingual composition plugin for WordPress using their code. Access to the .js files doesn’t even require a login to the Rediff servers and using them is as easy as pointing the URL to http://f1mail.rediff.com/quill/QuillPadWeb.html. I am not sure what their testing team (if they have one) thought of this, but this allows someone to use the cool text entry interface by just copying 4 files off the Rediff site.

The easiest way to thwart leechers is to deny access to the scripts unless you are logged on. That would take care of direct linking (protecting computational resources). But there’s no easy solution if someone just copies the files off the server and hosts them on his website (protecting intellectual resources). What do you do then? Probably obfuscate the code enough so that he never knows what file he has to copy. Yahoo mail does an excellent job of the obfuscation. Even their images are protected (in a loose way) by referring them through their MD5 hashes; enough to deter a casual hacker.

Another flaw is doing all (and I mean ALL) the validation at the client side using JavaScript. Client side validation is a nice way to reduce load at the server end. But sometimes, this solution is implemented without safeguards.

While designing any API, there is a golden rule that has to be followed…


All input is evil

Agreed, you have JS to check and ensure that the user input is correct. But what if I inject code through your web service using a simple script debugger like Visual Studio for IE and Venkman for Firefox. Even if I am not able to inject code, I will certainly be able to inject syntactically valid input data which is still invalid. To illustrate, imagine a banking service where the amount that can be withdrawn is checked against current balance using JavaScript. I could very well skip the function, overwrite the function which gets the current balance and a lot more. Unless the server is checking the validity of the transaction itself, I would be able to make any kind of transaction.

In my next post I will discuss, some techniques that can be misused to thwart JavaScript based validations. The purpose of the post will be to further educate software designers about the pitfalls of client side validation which is not backed by robust server side validation.

No wonder, people expect to have the same kind of anonymity while surfing the web through their mobile devices too. The mobile operator does give you a shared IP address. Though surfing through mobile phones is still very painful in India (3KBps download speeds aren’t that great), mobile Internet access through GPRS is becoming cheaper every passing month; Airtel offers a HTTP only package for just Rs. 99 per month which would encourage more people to at least try mobile web surfing. But cheap access doesn’t translate into secure access.

I always used to wonder how various websites like Yahoo, Rediff et al could get access to mobile subscriber data and charge them for their products and services. So I created a small servlet at http://www.myjavaserver.com/servlet/proteus.SmallFiles.WmlHead [Server is dead now]. And the results turned out to be shocking. I accessed the page from my friend’s phone and this is what I saw (the number was not masked, it has been done so to protect his privacy.

Host : www.myjavaserver.com

X-Wap-Profile : "http://wap.sonyericsson.com/UAprof/W700iR101.xml"

Accept-Language : en

Accept : application/vnd.wap.xhtml+xml, application/vnd.wap.wmlc, application/xhtml+xml, image/gif, */*, text/vnd.wap.wml

User-Agent : SonyEricssonW700i/R1CA Browser/SEMC-Browser/4.2 Profile/MIDP-2.0 Configuration/CLDC-1.1

Accept-Charset : *

Accept-Encoding : deflate, gzip

TE : deflate, gzip

MSISDN : 9198xxxxxxxx

WAP-Connection : Stack-Type=HTTP

Cookie : $Version=0;User-Identity-Forward-msisdn=9198xxxxxxxx;​User-Identity-Forward-ppp-username=void​;Bearer-Type=w-TCP;​wtls-security-level=none;network-access-type=CSD;​nas-ip-address=10.151.1.18;apn=airtelfun.com;imsi=404490016894720;​Called-station-id=airtelfun.com;​accounting-session-id=3D5FF84246578127;​accounting-authentication-method=2;​sgsn-ip-address=125.19.6.40

SCRIPT_URL : /servlet/proteus.SmallFiles.WmlHead

SCRIPT_URI : http://www.myjavaserver.com/servlet/proteus.SmallFiles.WmlHead

Remote Address : 203.145.131.158

Remote Host : 203.145.131.158

Server Name : www.myjavaserver.com

Protocol : HTTP/1.1>

This is from Airtel network in Andhra Pradesh, India. As one can see it is transmitting your mobile number in plain text as well as your mobile operator information to each and every website you visit. It also has your IMSI number which, about which Wikipedia says "In order to avoid the subscriber being identified and tracked by eavesdroppers on the radio interface, the IMSI is sent as rarely as possible and a randomly generated TMSI is sent instead.". This is potentially a great way for spammers to send you spam SMSs or track your surfing habits. They can put in a 0 X 0 pixel image on web pages and track you without you having to visit their site. Though much of this is what they can do through normal browsers on computers, here they can personally identify you through your phone number. You can visit the link given above to verify what headers you ISP is attaching to your outbound requests over GPRS. It is a WML page so even the oldest browsers should be able to open it.

It would be futile to even talk to your Customer Care guys about this, write to your ISP about this and ask them WHY they are exposing you to dangers which involve endangering your privacy. As a defence against this, you can use an anonymizing proxy like Opera Mini which will hide your information, but prevention is better than cure!

Source for the Java Servlet is available here .

Remember you need to access the URL with your Mobile phones , accessing through your normal browser will display the header information of your PC Browser. Also you need a GPRS connection that allows you to surf external sites and not just those of your service provider’s.


For the curious, I have also added a Java Servlet that displays the headers sent by your PC browsers here. The source for this one is available here.

XAML has this great concept of look-less controls. When we see a normal Win32 control like say a checkbox, we always assume that it will be a square box along with some text written to the left of it. Taking an example from our old friend WordPad, we would always expect a checkbox to look like

Pretty boring, if you would ask a kid (or even a teenager!). Even though it makes the control much more usable (which is a very important thing BTW), it doesn’t look cool. So how does WPF help us here?

For starters, when you define a control, WPF doesn’t force to you to define the look of the control along with the functionality. Here comes the concept of a look-less control; a control whose behaviour is defined but whose look is not defined. For instance, we might define the behavior of the check box (it has a bool or a bool? property called IsChecked, it has a check mark to the left of the content, etc… but leave it to the author to define the look for it. So we might have something like

How to go about doing this? This is all done by redefining the ControlTemplate for the checkbox. ControlTemplate is basically what it says, it is a Template for the Control and decides how the control will look like. To achieve such a look we define the Style of the Checkbox as

<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">
    <Setter Property="SnapsToDevicePixels" Value="true"/>
    <Setter Property="OverridesDefaultStyle" Value="true"/>
    <Setter Property="Template">
      <Setter.Value>
        <ControlTemplate TargetType="{x:Type CheckBox}">
          <WrapPanel Orientation="Horizontal">
            <Border x:Name="Border"
              CornerRadius="0” >
              <Image Name="CheckMark"
                      Height="{Binding ElementName=MyContent, Path=ActualHeight}" Source="happy.gif">
                <Image.BitmapEffect>
                  <OuterGlowBitmapEffect GlowColor="Blue" GlowSize="2” Noise=".1” Opacity="0.8"/>
                </Image.BitmapEffect>
              </Image>
            </Border>
            <ContentPresenter Margin="4,0,0,0" Name="MyContent"
              VerticalAlignment="Center"
              HorizontalAlignment="Left"
              RecognizesAccessKey="True"/>
          </WrapPanel>
          <ControlTemplate.Triggers>
            <Trigger Property="IsChecked" Value="{x:Null}">
              <Setter TargetName="CheckMark" Property="Source" Value="unsure.gif" />
              <Setter Property="BitmapEffect" TargetName="CheckMark">
                <Setter.Value>
                  <OuterGlowBitmapEffect GlowColor="Black" GlowSize="2" Noise=".1"
                  Opacity="0.8" />
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="IsChecked" Value="false">
              <Setter TargetName="CheckMark" Property="Source" Value="sad.gif" />
              <Setter Property="BitmapEffect" TargetName="CheckMark" Value="{x:Null}"/>
            </Trigger>
            <Trigger Property="IsMouseOver" Value="true">
              <Setter Property="BitmapEffect" TargetName="CheckMark">
                <Setter.Value>
                  <OuterGlowBitmapEffect GlowColor="Red" GlowSize="2" Noise=".1"
                  Opacity="0.8" />
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="IsPressed" Value="true">
              <Setter Property="BitmapEffect" TargetName="CheckMark">
                <Setter.Value>
                  <OuterGlowBitmapEffect GlowColor="Yellow" GlowSize="2" Noise=".1"
                  Opacity="0.8" />
                </Setter.Value>
              </Setter>
            </Trigger>
            <Trigger Property="IsEnabled" Value="false">
              <Setter TargetName="Border" Property="Background" Value="{StaticResource DisabledBackgroundBrush}" />
              <Setter TargetName="Border" Property="BorderBrush" Value="{StaticResource DisabledBorderBrush}" />
              <Setter Property="Foreground" Value="{StaticResource DisabledForegroundBrush}"/>
            </Trigger>
          </ControlTemplate.Triggers>
        </ControlTemplate>
      </Setter.Value>
    </Setter>
  </Style>

Let’s dissect this monster to see how it works

The first line

<Style x:Key="{x:Type CheckBox}" TargetType="{x:Type CheckBox}">

means that this is a Style being defined for Type CheckBox in the namespace referred to by x which is http://schemas.microsoft.com/winfx/2006/xaml in my case.

Moving on, the core part of the Style is in defining the ControlTemplarte.

 <ControlTemplate TargetType="{x:Type CheckBox}">

Note that I could have defined the ControlTemplate for the CheckBox using CheckBox.ControlTemplate but have chosen to implement it using a Style as it is quite common to do so.

It is in this ControlTemplate that I define the look of the CheckBox. Here I say that it should be a WrapPanel which should contain a Border which has an Image and a ContentPresenter in it. You can read more about the ContentPresenter in MSDN, it is just a UIElement which can contain and display any other object. The Image has a binding to the Height of the ContentPresenter so that it resizes automatically to the Height of the content, else you might have a case when you have text with FontSize 36 points but you checkmark is just 10 pixels high. That’s it! That’s the definition of our customized CheckBox; could it be any easier?

I added some Triggers to change the Image in the CheckBox depending on its state. I have added an image when IsChecked is null to account for a Tri State CheckBox. I also added some BitmapEffects for a Glow (just to make it more pretty!)

Go through the code, it isn’t very hard to understand or comprehend. Now whenever you wish your CheckBox to use this style, simply use it as

<CheckBox Margin="8” Style="myCheckBoxStyle">
    <TextBlock FontSize="20">Happy or Sad?</TextBlock>
</CheckBox>

If you find this article useful, do comment and let me know

 WinFX / Avalon

XAML, the new tool (pronounced zammel) XAML is an XML based system to create GUIs. BUt it can do much more than that. It provides for cool concepts like data binding. This is something like an element will automatically update its properties based on the properties of another element. So you can have the color of text in a TextBox to be the same as the Background of the Button which is an image. It as simple as writing a markup without any lines of code in C#. The power of XAML is truly phenomenal! Code:

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns: sys="clr-namespace: System;assembly=mscorlib"
xmlns: x="http://schemas.microsoft.com/winfx/2006/xaml" >
<Page.Resources>
<ImageBrush x:Key="SomeImage" ImageSource="C:\\Documents and Settings\\All Users\\Documents\\My Pictures\\Sample Pictures\\Sunset.jpg"/>
</Page.Resources>
<StackPanel Height="150" Width="350">
<Button Background="{StaticResource SomeImage}" Name="button" Height="60"/>
<TextBox Foreground="{Binding Path=Background, ElementName=button}" FontSize="20">
Some Text with a picture background
</TextBox>
</StackPanel>
</Page>




And the result!

Isn’t this great? Just a few lines of code was needed to produce such an application!

Now you guys have probably seen that the avatars on this forum are static, they have to be manually changed before you can use a new one.
Now take a look at my avatar url
http://www.smart-techie.com/images/avatar.gif
Now what happens when you view it? You see a jpg or a gif image.
Try accessing the same url 5 or more times… Did you notice something?
The picture changes automatically at random (amongst a set of 3 pics) If you didn’t see this try more times
How does it happen?
The first part is a VERY simple php script on my webserver (you need a hosting account with php scripting enabled for running scripts). Also (in Linux) CHMOD the files to give execute permission to everyone.
The php code that I am using is

<?php
$random = rand(1,3);

switch ($random)

{
case 1:header("location: /images/konqi.jpg" ) ;

break;

case 2:header("location: /images/Homer.gif" ) ;

break;

case 3:header("location: /images/Hobbes.gif" ) ;

break;
}

header('Cache-Control: no-store, no-cache, must-revalidate') ;

header('Cache-Control: post-check=0, pre-check=0', FALSE) ;

header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ) ; // Date in the past

header('Pragma: no-cache') ;

?>

Doesn’t take a genius to figure out what is going on here. Anyways I’ll explain
1. A random number is chosen between 1 and 3 and the corresponding image is displayed. This is done by the header function which is used to send HTTP headers ( a temporary redirect HTTP 302 response) This says that the resource that you want to see is at some other location).2. The headers at the end are DESPERATE ones which tell the browser “Please don’t cache the images or you will spoil my image changing effect?” Now to save bandwidth and load pages faster, browsers store copies of resources that they retrieved from the Internet on your disk in a location called cache/Temporary Internet files or similar location. Try about:cache in mozilla to see whats in it.
Also an expiry date is given in past so that the browser thinks “Oh, this content that I retrieved has become old. I shouldn’t cache it. Next time I’ll ask for a fresh copy” Sweet…
Now the file is saved as somename.php on your server and on running it the effect of changing avatars is complete.
2. Now for the final bit. Try pasting this url in your avatar field and the forum complains. It wants the URL to end in gif/jpg or whatever. So how to bypass this? Simple. Use the Apache .htaccess file (not available on IIS)
.htaccess is a file that stores settings on a folder basis on you webserver. I modify this file to add a statement

Redirect /avatar.gif http://www.website.com/images/somefile.php

There you have it! It is always easy to fool software.
Try this at least once to see the power of web scripting.

Addendum

“The great thing about mod_rewrite is it gives you all the configurability and flexibility of Sendmail. The downside to mod_rewrite is that it gives you all the configurability and flexibility of Sendmail.”
–
Brian Behlendorf, Apache Group