All posts tagged 'internet-explorer'

Internet Explorer and Web Standards

Many times I see people complaining about Internet Explorer 9 not rendering properly a “standard” web page, after digging into what the problem can be it normally resumes into two options:

The web page is not using the document mode “IE9 standards”.
The web page is using conditional comments making use of browser detection instead of feature detection and treats IE9 as IE7 or IE6, very old versions of IE that do not support today standards.

Let’s start with what the IE9 standards mode is.

Internet Explorer is the only browser that offers backward compatibility with older versions of the browser. This is done incorporating the new, plus the older versions of the rendering engine with each release of Internet Explorer.

As a user of IE you only need to press F12 to open the Developer Tools and select what document mode use.

This is very powerful because as developers we can decide what version of the IE rendering engine will be used to render the markup of our pages. In the case of Internet Explorer 9, as you have seen in the figure above, we can chose between the next document modes:

IE 9 standards: This is the default and latest standards-compliant behavior used to render webs that have a strict or unknown document type.
IE 8 standards: This behavior acts as it does IE8.
IE 7 standards: This behavior acts as it does IE7.
Quirks: This is the oldest behavior that can be used with IE, and applies when rendering a document with no doctype or a quirks doctype. It is similar to the behavior of IE5.

Selecting a different mode will reload the page to render it in the document mode selected, but will not change the user-agent string sent to the website. To do that you can also change the Browser Mode using the developer tools.

Regardless the best practice and my suggestion is to target always the standards and keep our sites upgraded to support them, in the case you have an old site you can’t migrate yet, you don’t need to continue using old versions of IE. You can upgrade to IE9 and use as quick fix the X-UA-Compatible meta tag to set what render engine IE has to use to display properly the page.

It is obvious but worthy to mention that if you use an older document mode as “Quirks mode”, you will use it with its full consequences. This means means that your modern IE9 browser will behave as the old IE5 browser and will not be able to use all the new standards and performance improvements that IE9 includes. You can easily see this by running this code and visualizing it in “Internet Explorer 9 standards” and any other document mode:

   1: <html>

   2:   <head>

   3:     <title>HTML5 Canvas example</title>

   4:     <script>

   5:       function drawCanvas(){

6:

   7:         var canvas = document.getElementById('myCanvas');

8:

   9:         var context = canvas.getContext('2d');

10:

  11:         context.fillRect (128, 25, 100, 100);

  12:       }

  13:     </script>

  14:     <style type="text/css">

  15:       canvas { border: 2px solid black; }

  16:     </style>

  17:   </head>

  18:   <body onload="drawCanvas();">

19:

  20:     <canvas id="myCanvas" width="260" height="200">

  21:     The document mode does not support canvas

  22:     </canvas>

23:

  24:   </body>

  25: </html>

So, if you find your website not rendering properly in IE9, first of all check that the site is being rendered in IE9 standards mode and secondly that you are not using any conditional comments that serve custom code for older versions of IE.

In this article we will not cover best practices on how to use feature detection instead of browser detection bad practices to avoid conditional comments, but I recommend reading the article Same Markup: Writing Cross-Browser Code.

You can read additional information on how internet explorer determines the document mode.

How to increase returning visitors traffic and measure it

Filed under Technology

Increase returning visitors traffic is one of the metrics any web analyst has in mind, this is because it means you are obviously increasing the loyalty of your audience and helps to guarantee the continuity of your site. There are many more metrics of course like conversion, page views, bounce rates … but in this article we will focus in how to increase returning visitors.

It is not new that lot of companies try to increase its returning visitors traffic, there are many techniques to do it like subscribing by email, forums, chats … all of them, of course, useless without good content in the site.

Probably the “easiest” way to achieve it, it is becoming the homepage of your browser, unfortunately this is a battle that is lasting from the very beginning of Internet, you saw Yahoo, NetVibes, MSN trying to become your homepage and now you can see it also with Facebook or even Google constantly telling you to do it.

The problem is that it is very hard to compete with the big Internet players to become the browser’s homepage, but today we are going to show an easy alternative that Internet Explorer 9 and above offers us: the pinned sites.

The pinned sites allow you to pin any site to the Windows Taskbar like if the site was a Windows application. Below you can see my taskbar with my pinned sites Hotmail, Twitter, LinkedIn, Facebook and SkyDrive sharing the space with traditional Windows Applications like Outlook or the Notepad.

Why this is better than the browser favorites?

In the first place, because according to the statistics retrieved with the improve user experience programs we know that 87% of users launch pinned apps from the taskbar (vs 18% opening sites from the favorites bar) and 33% of users have pinned at least one non-default app to the taskbar (vs 4.4% who have added a site on the favorites bar).

In the second place, because the pinned sites allow you to have a higher level of personalization and some advanced features that help to improve the user experience and easing how the user access our site.

In my site http://www.josebonnin.com I have implemented the pinned mode adding: personalized tasks that display the latest posts published, the main categories of my blog, access to the archive and how to contact with me.

There are many sites that implement the pinned mode today and some of them have shared some of their figures, the most well known case is the Huffington Post that thanks to implementing the pinned mode in their site they were able to increase among IE9 users 14% their returning visitors and 11% the number of pages visited.

There are many features of the pinned sites that you can deeply explore in the Pinned sites developer documentation. But the easiest and simplest way is to implement them is to include the next metatags in your site:

   1: <meta name="application-name"    2:   content="Jose Bonnin" />   3: <meta name="msapplication-starturl"    4:   content="http://www.josebonnin.com" />   5:     6: <meta name="msapplication-task"    7:   content="name=Contact;   8:   action-uri=http://www.josebonnin.com/contact.aspx;   9:   icon-uri=http://www.josebonnin.com/mail.ico"/>

The first metatag defines the name that will have the site once it is pinned in the taskbar, the second defines the url that will be opened.

The third will add a custom task called “Contact” that opens the URL http://www.josebonnin.com/contact.aspx

You can add as many custom tasks as you want by adding more metatags that follows the pattern of the “msapplication-task”. As I said before, there are many more options you can apply like: notifications, thumbnail buttons, custom tasks based on the context of the page, etc. just check the URL above to find all the documentation.

So, now that we know that we can increase the returning visitors by implementing pinned site features. Let’s see how we can measure it.

How to measure the increase of returning users thanks to the pinned mode?

To do it we have to tag all the links we define in the pinned mode options using the parameters of our Analytics provider. Google Analytics for instance forces you to use at least the parameters utm_source, utm_medium and utm_campaign. You can find more info on what each parameter means and in the URL Builder.

Therefore, following the example above I would need to tag the start URL and the Contact URL, using for instance the next values: utm_source=IE9, utm_medium=web, utm_campaign=pinnedmode.

Doing this the start URL would become http://www.josebonnin.com/?utm_source=IE9&utm_medium=web&utm_campaign=pinnedmode

and the contact URL http://www.josebonnin.com/contact.aspx?utm_source=IE9&utm_medium=web&utm_campaign=pinnedmode

After you do this you will be able to measure as with any other campaign all the traffic coming to your site through the pinned sites.

This is all, feel free to share how much have you increased your returning visitors thanks to the pinned sites.

Why I use IE8

Filed under Technology

Let’s be clear I like Internet Explorer.

I use IE8 and I have to hear jokes and all kind of comments because of it. Before I joined Microsoft I was arguing for a while until get tired of the conversation, moment where I ended always with a “yeah … it is”. Things like “but IE is not compatible with CSS standards” were very common to hear. No, please don’t go again into that, it’s clear there is still lot of improvements that can be done for standard compliance. In any case, IE8 is 100% compliant with CSS Level 2 Revision 1.

But after I joined Microsoft the comments were getting worse and stimulating for the conversation, ridiculous things like “but you use it because Microsoft does not allow other browsers to be installed”, not worthy to say that is far away from reality.

Now that there has been the famous attack to Google using an exploit of IE some comments have reached insanity levels.

If you want full information about the exploit and the solution go to The Microsoft Security Response Center (MSRC). I just want to stand up that “to date, the only successful attacks reported have been against Internet Explorer 6” (which is a 9 years old browser). Users with XP (more than 8 years old OS) were more prone to suffer this exploit because XP does not take profit of Address Space Layout Randomization (ASLR), Vista and other later versions are more effective blocking the exploit because they take profit of the improved security protection offered by ASLR.

So, we have that people using a 9 years old browser on an 8 years old OS were the biggest victims. I’m not going to comment about this, just take a look to this video and think about it yourself … security, hacking attacks, technology … all evolves and, don’t be fool, ALL of us are also responsible for our self-protection.

Whether you like it or not Internet Explorer is one the safest browsers of the market. You can do the comparison by:

1. Technologies applied: DEP, ASLR, Virtual Store, Mandatory Integrity Control, Today IE8 is the only one making use of all these technologies. I have to mention too the Cross Site Scripting filter and the Private Browsing, also known as porn mode but pretty useful and recommended when you browse from airports, Internet points and any other kind of shared computer.

2. Phishing protection: “The average phishing URL catch rate for browsers”

3. Average time to block phishing: “how long on average must a user wait until a requested phishing URL is added to the block list?”

Worthy to mention that “phishing sites have an average life expectancy of only 52 hours” mmm…sigh… Thanks Safari 4 to protect me against phishing sites that no longer exist.

Source: NSS Labs Browser Security – Phishing Q3 2009

“but Everybody recognizes a phishing site”. According to Gartner Group “theft through phishing activities costs U.S. banks and credit card issuers an estimated $2.8 billion annually”

4. Vulnerabilities:

“but regardless phishing Firefox is the safest browser”

Source: http://secunia.com/gfx/Secunia2008Report.pdf

I couldn’t find the 2009 report so I went manually product per product drilling by version in the Secunia site to get overall vulnerabilities.

Browser	Vulnerabilities	Release Date	Market Share
IE 6.x	184	8/27/2001	20.99%
FireFox 3.0.x	144	6/17/2008	6.91%
IE 7.x	106	10/18/2006	15.53%
FireFox 3.5.x	48	6/30/2009	16.32%
IE 8.x	30	3/19/2009	20.86%
Safari 4.0	16	6/2/2008	3.45%
Chrome 3.x	5	10/12/2009	3.75%

As you can see Firefox 3.0.x has had more vulnerabilities in 19 months than IE 7.x in more than 3 years and almost the same than IE6 in more than 8 years. I’m not going to comment about Firefox 1.0.x, which had 209 known vulnerabilities since 11/9/2004 and has a current share of 0.03%.

Vulnerabilities Source: http://secunia.com/advisories

Release date Source: http://www.wikipedia.org

Market Share Source: Market Share Browsers.

“but …” Before you mention that Safari and Chrome have less vulnerabilities, please review again the Market Share and Release Date and remember that massive attacks are like business: You always try to maximize benefits, if with one product (exploit) you can reach 60% of market you don’t put all your efforts trying to get 5%.

I’m not going to enter into specific features of IE8 that facilitates the administrator’s work in corporations like: the possibility to manage and configure nearly 1.500 built-in group policies, the IEAK for customization, distribution of updates and patches via Window Server Update Services…

So, yes I’m very proud to say I’m a IE8 user … “but browser %replace with your browser% it’s faster” … Yeah…it is

Google Safe Browsing API with Internet explorer

Filed under Development

These days lot of bloggers have been writing about the new API of Google: Google Safe Browsing API. The Safe Browsing API is an experimental API that enables client applications to check URLs against Google's constantly updated blacklists of suspected phishing and malware pages.

I think this is a cool API and if you want to take profit of it you already have it with FireFox. But, I like Internet Explorer so I would like to use both together.

If you take a look to the documentation, you will see that its usage is actually very easy. The idea is that you get a list of URL hashes, which are marked as phishing or malware; then you only need to validate the URL's you want to check against these hash tables. I'm not going to enter in too much details since you can read the guide that Google provides you.

What I've done is let's say: a "proof of concept", that it's possible to use Google Safe Browsing with IE. I've built an implementation of this using C#. The code you can download consists in two main parts:

A Windows Service that hosts a WCF Service with the logic to perform updates and the validation against the hash tables.
An BHO (Browser Helper Object) that queries the information to the WCF Service.

The BHO is configured as an add-on for IE. It just handles the BeforeNavigate2 event and checks the URL making a call to the published service, if the URL is safe then nothing happens otherwise the navigation is canceled and the message displayed:

The code for the BHO is pretty simple, the first you need to do is to declare the interface IObjectWithSite to make available for .NET

[ComImport]
[InterfaceType(ComInterfaceType.InterfaceIsIUnknown)]
[Guid("FC4801A3-2BA9-11CF-A229-00AA003D7352")]
public interface IObjectWithSite
{
    void SetSite([In, MarshalAs(UnmanagedType.IUnknown)] Object pUnkSite);
    void GetSite(ref Guid riid, [MarshalAs(UnmanagedType.IUnknown)] out Object ppvSite);
}

The other interesting part of it, is how to cancel the navigation and modify the HtmlDocument, with our custom html.

void webBrowser_BeforeNavigate2(object pDisp, ref object URL, ref object Flags, ref object TargetFrameName, ref object PostData, ref object Headers, ref bool Cancel)
{
    ....
  
    if (result == UrlValidationResult.Malware || result == UrlValidationResult.BlackList)
    {
        IHTMLDocument2 doc = webBrowser.Document as IHTMLDocument2;
  
        if (doc != null)
        {
            doc.clear();
            doc.writeln(result == UrlValidationResult.Malware ? Resources.MalwareWarning : Resources.BlackWarning);
            doc.close();
        }
  
        Cancel = true;
    }
}

The WCF Service exposes only two methods: "public void Update()" and "public UrlValidationResult ValidateUrl(Uri uri)". This service what it does is to obtain and keep updated the hash tables doing incremental updates, as well as the logic to validate the URL's against these tables. The tables are stored in an IsolatedStorage to avoid obtaining them from Internet every time, nevertheless the tables are loaded and operated in memory.

In order to validate a URL you need to perform some steps, first of all you need to obtain a 128 bit MD5 Hash of the URL you want to check, then you need to get the string representation of this hash. With .NET you can accomplish this easily.

private string GetHash(string url)
{
    byte[] hashBytes;
    using (MD5 md5 = MD5.Create())
    {
        hashBytes = md5.ComputeHash(System.Text.Encoding.ASCII.GetBytes(url));
    }
  
    StringBuilder sb = new StringBuilder(32);
  
    int length = hashBytes.Length;
    for (int i = 0; i < length; i++)
    {
        sb.Append(hashBytes[i].ToString("x2"));
    }
  
    return sb.ToString();
}

Google suggest you also to perform several lookups from the same URL to get an accurate result, which consists of: the exact hostname in the URL, up to 4 hostname's formed by starting with the last 4 components and successively removing the leading component. In addition for the path you should try at most 6 different strings: the exact path of the URL, including query parameters; the exact path of the URL, without query parameters and the 4 paths formed by starting at the root (/) and successively appending path components, including a trailing slash. A sample displays better what this means.

For the URL http://a.b.c.d.e.f.g/1.html

a.b.c.d.e.f.g/1.html

a.b.c.d.e.f.g/

c.d.e.f.g/1.html

c.d.e.f.g/

d.e.f.g/1.html

d.e.f.g/

e.f.g/1.html

e.f.g/

f.g/1.html

f.g/

*(Note that b.c.d.e.f.g, is skipped since we'll take only the last 5 hostname components, and the full hostname)

Another interesting feature is that you can verify that the tables obtained in the requests come from Google, this is obtained by requesting a pair of keys, client key and wrapped key. The wrapped key must be sent along the requests for updates, then Google will include a MAC (Message Authentication Code) in the header of each response following the structure "[mac=dRalfTU+bXwUhlk0NCGJtQ==]". In order to validate this mac you need to do again a 128 bit MD5 Hash with the following information: client_key|separator|table data|separator|client_key. Where the separator is the string:coolgoog: - that is a colon followed by "coolgoog" followed by a colon. To be honest I got a bit stuck here, I've tried a few ways to verify a MAC but there is something I'm missing and I cannot get the expected result. Maybe I try again when I come back from holidays.

You can download the code and test it, but remember that this code is provided as is and cannot be considered finished code. There is room enough for improvement in many areas including exception handling that has not been considered for this sample.

In order to test you will need to install and start the windows service included, before start it be sure that you include your own key in the appSettings section of the file "BalearesOnNet.GoogleSafeBrowsing.Service.exe.config". The BHO is configured to be installed when you compile it with Visual Studio, you can disable this option by unchecking the option "Register for COM interop" in the properties of the project.

I hope you like it.

GoogleSafeBrowsing.zip

Internet Explorer and Web Standards

If you like the article, please share it

How to increase returning visitors traffic and measure it

If you like the article, please share it

Why I use IE8

If you like the article, please share it

Google Safe Browsing API with Internet explorer

If you like the article, please share it