Sharovatov’s Weblog

moving to github

Posted in no category by sharovatov on 5 January 2013

This is the last post here as I’m moving to http://sharovatov.github.com/ and all future content will only appear there.

It’s much easier to blog with static site generators like docpad because you control everything and can embed any content plus static resources are perfectly cacheable.

And what’s even more important – it makes more sense to me that blogposts (which are in essence static content) are served statically and are also managed by a DVCS.

Opera Unite is dead

Posted in no category by sharovatov on 22 October 2012

So it turns out I was right in my earlier blogpost about Opera’s so-called “web revolution” and “reinventing the web” marketing bluff – it was a dead end right from the start.

As officially noted on the Opera blog, Opera Unite has been discontinued from the 24th April 2012 with Opera 12 release. Not a big surprise at all.

Installing Opera Mini emulator locally

Posted in no category by sharovatov on 17 October 2012

If I remember correctly, Opera website earlier had instructions on how to use Opera Mini on the desktop, but now they are either gone or unreachable. So here’s a simple set of instructions to get Opera Mini running in a JVM emulator.

  1. make sure that JRE is installed
  2. download latest microemulator  and unzip it somewhere
  3. download Opera Mini jars:
  4. run microemu: java -jar microemulator.jar
  5. Make sure Options->MIDlet network access is checked so that your emulator will have access to the network
  6. Select Options->Select device and choose “Resizable device” and set it as a default – this will allow you to resize your emulator to any width you like
  7. Select File->Open midlet, locate mini.jar and select it

However, this setup is only useful to see how your website looks in Opera Mini, and is certainly not a proper development environment. For instance, I couldn’t find a way to inspect what’s being transferred over the network – and even if I did, I’d obviously only see Opera’s OBML traffic between the jar and Opera’s servers and nothing more.

The only useful thing hiding in Opera Mini is server:source.

Basically, if you want to view the source of the page, you can type in server:source in the address bar while viewing a website and you’ll get awfully-rendered page source (note that this will not be OBML, but rather the original page source that Opera’s servers got from the URL you specified). And if want to inspect the source on your desktop rather than small emulator screen, you can ask Opera’s servers to post the source to a URL by specifying server:source?post=http://youraddress/script and three values will be POSTed to the URL provided:

  • html – the original page source
  • host – the HTTP host field value
  • URL – the URL that was fetched

iframe height auto-resize

Posted in no category by sharovatov on 24 January 2012

If you have a page and an iframe in it,  and the iframe viewport height changes, browser adds scrollbars to the iframe.

Sometimes it’s ok, but when you need your iframe to “expand” automatically on the host page, you have to change the iframe object height style property. And it’s dead easy when both iframe and the host page are from same origin – you just talk to parent window from the iframe and make it set the object height.

However, when cross-origin security model applies, everything gets more interesting, and you’re pretty much limited to CDM/window.name/location.hash transports.

So the proper approach would be to use CDM with a fallback to location.hash – newer browsers (IE8+ and current Firefox, Opera, Safari and Chrome) support postMessage, older versions will fall back to setting parent page location.hash property and on the parent page – interval polling for changes.

Here’s a basic working sample implementing this approach and here’s the code for it:

Please note that in this sample no origin check is done for the message on the parent page and the message is sent from the client page to * origin. This might be a serious security breach since the parent page will process a message send from any page, but in my case it’s OK because the worst thing that can happen – the iframe height will change. Please don’t use this as a universal solution for cross-iframe communication – there’re plenty of plugins and libraries that do it properly. I built it this way just to fit my exact needs – i.e. change height of the iframe object on a parent page.

Tagged with: , ,

X-FRAME-OPTIONS

Posted in no category by sharovatov on 22 January 2012

This X-FRAME-OPTIONS HTTP header invented by Microsoft for IE8 provides an easy way to work around Clickjacking security issue (see this great paper for even more details). The main article explaining how X-FRAME-OPTION works is this: http://blogs.msdn.com/b/ie/archive/2009/01/27/ie8-security-part-vii-clickjacking-defenses.aspx

Basically, here’s what behaviour you get with different X-FRAME-OPTIONS values:

DENY browser will not render the iframe contents in any case
SAMEORIGIN browser will only render the iframe contents if host page origin is the same as the iframe page origin
ALLOW FROM http://host browser will only render the iframe contents if the iframe host is http://host

Please note that specifying the header in META tag won’t work.

Good news – all browsers vendors copied this from Microsoft and now we’ve got all modern browsers supporting this header (Firefox 3.6.9, IE8, Opera 10.50, Safari 4.0, Chrome 4.1).

Unfortunately, for some reason only Opera and IE show a meaningful message why the frame was blocked, all others just display the empty iframe (it’s especially weird for Firefox, which should show the warning as per their bugzilla):

image

In any case, study the security papers I linked to above to understand how the attack works and what it can do to your visitors or your business.

However, if you strongly believe no one should embed your page in an iframe – then your silver bullet is to add X-FRAME-OPTIONS: DENY to all the pages you serve.

P.S. X-FRAME-OPTIONS is now proposed to IETF: http://tools.ietf.org/html/draft-gondrom-frame-options-01

small piece of js code explained

Posted in no category by sharovatov on 31 January 2011

Today a colleague showed me a piece of js code and asked to explain how it works.

Here’s the code:

(function(x) { return x(x) })(function(z){ return function(y) { return z; } })(1)(2)(3)

For many from non-js background it would be easier if I rewrite first two function expressions as function declarations, turn third function expression into named function expression and break the execution into parts:


function f1(x) { 
  return x(x); 
} 

function f2(z) { 
  return function f3 (y) { 
     return z; 
  } 
}

var result1 = f1(f2);

var result2 = result1(1);

var result3 = result2(2);

var result4 = result3(3);

So let’s see what each function does first:

Function f1 accepts one argument and calls this argument as a function and passes it with  itself as a parameter.

Function f2 accepts parameter z and creates another function. As f2 scope gets copied to f3, argument z is always accessible from within f3; and what f3 does is it returns this argument z.

After we grasp the idea of what these functions do, let’s see how everything is executed.

When var result1 = f1(f2) is executed, f1 is called with f2 passed as a parameter. return x(x) means that we need to call f2(f2) and return the result.

When f2 is called with f2 as a parameter, function f3 will be created and it’s z will hold a reference to f2. And this f3 is returned to result1.

Now we know that result1 actually holds a reference to f3 which regardless of the parameters always returns a reference to f2 which it “remembered” earlier. Hence, when we come to execute var result2 = result1(1), we actually call f3(1) and our f3 just returns a reference to f2.

So, this part of the code (function(x) { return x(x) })(function(z){ return function(y) { return z; } })(1) could be replaced with (function(z){ return function(y) { return z; } }).

Let’s move on and execute var result3 = result2(2);. We’ve just found out that result2 holds a reference to f2, so it’s rather f2(2) that we’re seeing here, which – as we remember – creates f3 function and stores z in it’s context. This f3 will always return 2, result3 is a function will always return 2.

And when we execute var result4 = result3(3), f3(3) is actually called and returns 2 as expected.

I think, this again proves that javascript is syntactically very powerfull language.

link-to-QRCode IE8 accelerator

Posted in browsers, IE8, mobile, nokia-n78, web-development by sharovatov on 20 March 2010

I have Nokia N78 phone and use it a lot for surfing web (with beautiful Opera Mobile 10), reading RSS (with internal webkit-based browser), tweeting (with awesome Gravity client), reading CHMs (with great mobiCHM tool) or using Skype, or doing and many other tasks.

But mostly I use the phone to read something on the internet when I’m on the way to some place (as it takes at least an hour to get somewhere in Moscow using public transport). And usually when I’m browsing web on a PC and find something worthy to save to mobile, I type its URL  on the phone and save it to bookmarks. Which, even with bit.ly or any other url-shortening service, is a kerfuffle, and T9 doesn’t really help here.

So I was trying to find an easier way to get URLs transferred from my PC onto the mobile. Opera 10 Mobile comes with Opera Link bookmarks synchronisation service, but I don’t surf internet in Opera on a PC. There’re some social bookmarking sites, but I’m not adding every link that I want to read on mobile to my bookmarks, be it a web-service or browser bookmarks.

And here comes QRCode scanning to the rescue. I knew that Nokia provided a nice free easy-to-use QRCode scanner for their smartphones, and I gave it a go. Downloaded, installed, tried with some QRCodes I had, everything was fine, scanning and recognition speed was really high – I just pointed the phone camera onto my computer’s screen and the encoded text was momentarily recognised. I decided to try encoding links in QRCodes using Nokia service, and it worked fine as well – the scanner made them active so I could either copy them to use in Opera Mobile or open with default web-browser (handy if it’s a link to RSS feed).

Of course, encoding each link manually and then scanning resulting QRCode is taking much more time than just typing the link in the phone, so the idea of making the browser show QRCode for any link made more sense to me.

The easiest way to integrate some web-service to IE8 is its beautiful Accelerators platform. I did 10 lines of PHP code which shortens any URL with bit.ly service, and then echoes the IMG tag pointing to Nokia QR Code creation service URL. Here’s the code:

<?php
  require_once('bitly.php');
  $sUrl = make_bitly_url($_GET['url']); //shorten the original URL first
  echo '<img src="http://mobilecodes.nokia.com/qr?DATA='.$sUrl.'&MODULE_SIZE=4&name=&MARGIN=2&ENCODING=BYTE&type=link&MODE=TEXT&a=view">';

Bit.ly is used to make QRCode creation faster and easier as only small chunk of data is encoded.

Then I created a very simple XML file which instructs IE8 what to do with the link:

<?xml version="1.0" encoding="UTF-8"?>
<!-- author: Vitaly Sharovatov (http://sharovatov.ru) -->
<openServiceDescription xmlns="http://www.microsoft.com/schemas/openservicedescription/1.0">
  <homepageUrl>http://sharovatov.ru</homepageUrl>
  <display>
    <name>link QRCode</name>
    <icon>http://sharovatov.ru/qrcode/favicon.ico</icon>
  </display>
  <description>Get the QRCode for selected link</description>
  <activity category="mobile">
    <activityAction context="link">
      <preview action="http://sharovatov.ru/qrcode/createCode.php?url={link}" />
      <execute method="get" action="http://sharovatov.ru/qrcode/createCode.php?url={link}" />
    </activityAction>
  </activity>
</openServiceDescription>

 

And then just uploaded the php script and my accelerator to my site. Dead easy, 10 minutes job.

As wordpress.com doesn’t allow javascript onclick handlers on the links (and accelerator gets added to IE by window.external.addService call), I had to put the install page on my site. Please visit http://sharovatov.ru/current.html for this and few other IE8 accelerators. To get this accelerator installed, just press on “Install now” link in its description.

Now if you right-click on any link, go to Accelerators, and just hover “link to QRCode” accelerator you’ll get the window with QRCode for the current link:

qrcode-accelerator

Then you just run Barcode app on the mobile, get the QRCode scanned and then can do anything with the link – copy it to the clipboard, open right now in the default browser. Seems to be quite handy.

In order to get this accelerator in the main right-click menu, you need to go to Page –> All Accelerators –> Manage accelerators and in the window that appears select “link QRCode” accelerator and press on “Set as default” button.

Here’s some guiding screenshots:

manageaccels manageaddones

Then your link QRCode accelerator will be in the default context menu:

defaultmenu

So now you can get a QRCode for any link, scan it and use it on your mobile.

P.S. There’re QRCode scanners for all mobile platforms, so if you want similar functionality on your phone, google for “QRCode scanner %yourphone%”.

Windows Phone 7 emulator, updates and app blacklist

Posted in windows phone 7 by sharovatov on 19 March 2010

Today twitter brought me a link to a very interesting blog of Dan Ardelean who’s exploring Windows Phone 7.

As you know, Microsoft offers a free version of Visual Studio Express for Windows Phone 7 which comes with an emulator. But in that emulator you can only run IEMobile (obviously, to test your websites in it) and apps you are developing in Visual Studio Express.

So I was really amazed by what Dan did – he unlocked the full version of emulator and made all the default apps available! Visit his blogpost for more details and the link to the modified emulator image (unfortunately, the link is now down as Dan says he doesn’t know what Microsoft will think about this).

Luckily, I managed to download the image, but I won’t upload it until Dan decides what to do with it. If you have his image, you need to run it with XDA (part of Visual Studio Express for Windows Phone):

"D:\Program Files\Microsoft XDE\1.0\XDE.exe" "C:\dist\WM70Full.bin"

And you’ll get the emulator running the unlocked image!

wphone1 wphone2

As far as I understand, Dan was looking at the registry file from the emulator’s image binary and found that some applications were blacklisted, then he enabled all of them and repackaged the image. Sounds simple, but believe me, it’s not!

But what’s more interesting is that:

  1. apps are going to be distributed only through WP Marketplace
  2. there will be a Windows Update-like service on the Phone 7
  3. there’s a blacklist registry hive for apps on the phone which Dan discovered

So it will be dead easy for Microsoft to block certain applications with new updates, especially if updates are going to be mandatory and automatically installed.

At this moment the system has this configuration screen for updates:

wphone3

Does this “notify me when new updates are found” mean that updates will not be installed automatically and we’ll be able to choose what to install? We’ll see.

Useful links:

  1. Dan Ardelean’s blog
  2. Visual Studio Express for Windows Phone 7 beta
  3. Microsoft Expression Blend 4 beta
  4. Microsoft Expression Blend SDK preview for Windows Phone
  5. Microsoft Expression Blend Add-in preview for Windows Phone

:visited links privacy issue revisited

Posted in browsers, privacy by sharovatov on 17 March 2010

This is a follow up to my old post about :visited links privacy issue. I thought the best solution for this issue would be educating users about the problem and promoting Private mode as a solution. I think I was wrong. See below why.

It’s worthy to note that all browsers now support Private mode – IE8, Fx, Opera, Safari, Chrome. Opera 10.50 can even open a “private” tab in the existing window. Flash player did a good catch-up – with its version 10.1 release flash cookies are not stored when a browser runs in the Private mode (so updating to latest flash player is highly recommended if you use Private mode).

But browser vendors clearly failed to promote this feature. I asked few general internet users, nobody even knew about Private browsing mode in their browser. (However, most of my interviewees knew about HTTPS, so security concerns weren’t completely new to them). If my small poll doesn’t seem a representative sample for you, do your own and share results!

So people are obviously not aware that their history data can be “obtained” by anyone.

David Baron thought this was unacceptable and started working on a patch for Gecko which targets most of the “attack vectors” (see his blogpost). Basically, Gecko will have two style contexts for a visited link – one with rules applied for a :visited link, and one with rules not applied – as if the link wasn’t visited. GetComputedStyle will take the first style context, and therefore getComputedStyle check for a CSS value of the rule set for :visited pseudoclass selector will fail – it will think the link has default or specified in :link selector rules applied. But when browser will do actual styling, it will use the second styling context, but will apply only a set of properties which are considered safe (color, background-color, border-*-color, and outline-color). This approach looks nice and will give users some protection, but as it was pointed by Robert O’Callahan here, it will fail if it becomes possible to read the actual color of the link after actual styling is done. So this approach has to be applied very carefully – for example, if Canvas drawWindow object was available not only to Fx extensions, it would mean that attacker would still be able to get resulting color from the second styling context. I really hope this never happens.

So I was wrong because I thought that no browser vendor would go and fix this technically, while it seems quite doable and thanks to David Baron, it will appear in Gecko. With careful integration, this approach will protect from most of the possible attacks and will still provide a way for authors to make visited and not visited links distinguishable in their designs.

We’ll now see what other browser vendors will do, and this will become especially interesting if Firefox does a good marketing campaign from this feature.


Share :

IE9 – sucks much less than other browsers

Posted in browsers, IE9, web-development by sharovatov on 16 March 2010

I won’t repeat everything that’s been said on Mix now, you should read this article and this IEBlog entry and get the IE platform preview. Don’t be afraid that IE9 will spoil your IE8 – IE9 preview doesn’t replace IE8 or anything, it’s got new jscript engine (called “Chakra”), new Trident layout engine version and wininet bundled in one package (31 megabytes installed size!) – first time when Microsoft does it this way – very impressive!

This preview will be updated each few weeks – the work isn’t finished, UI is still in a very “beta” mode:

ie9

Most important changes IE9 has from IE8:

  • JIT-powered js optimisation in jscript engine (Sunspider reports speed faster than Firefox 3.7 alpha2) – looks similar to Apple’s Nitro JIT.
  • new Trident with more CSS3 support – CSS3 Selectors module, CSS3 Borders and Backgrounds module (passes CSS Selectors tests)
  • DOM2 Styles support
  • SVG 1.1 2nd ed support (plus hardware acceleration)
  • XHTML support (with proper namespaces support)
  • complete hardware acceleration support for graphics and text rendering, which makes any animation in IE9 WAY much faster than in other browsers – you should look at videos
  • HTML5 video support with h264 codec with proper hardware acceleration support (kicks Chrome’s ass, allows 2 simultaneous HD 720p video playbacks via HTML5 video on a cheap netbook). Another nail in the OGG coffin :)
  • DOM Events support

And IE9 is ridiculously fast. That’s partly due to the fact that “Chakra” jscript compiles javascript in a separate CPU core in parallel to IE (natural improvement to LCIE), and partly because of hardware optimisation for all rendering and animations.

Unfortunately, IE9 is not available for Windows XP (and it won’t be), the main reason is the security model – basically, XP security model just doesn’t suit for IE9. Quite right, XP is nearly 10 years old! Another reason is that graphical core on Windows XP works in a different way, so IE9 hardware acceleration just cannot work there.

Of course, IE9 follows the same logics IE8 has in terms of backwards compatibility – rules that I described here apply to IE9 – if X-UA-Compatible header/meta is set to Edge, IE9 new engine will run. Of course, it will render sites with correct doctype (but withouth X-UA-Compatible) in IE9 standards mode, and it will continue support for compatibility view lists feature. So old crappy sites designed for IE6 will still work in compatibility mode, and new sites will work in awesome IE9 in the standards mode without any problems. Read the abovementioned post for more details.

Improvements that will be done later:

  • better Ecma262 conformance and as a result, better ACID3 scores (current score is 55), IE team promises to improve this significantly, I think it will pass the test by the time RC ships
  • support for other CSS3 standard modules
  • canvas support – wasn’t announced, but I think this is a natural move when SVG is already done and done properly!

But anyway, the whole feeling after watching IE9 keynote session is IT’S AWESOME!

We’re entering the new era when Microsoft browser is faster than others, more secure (it’s been more secure than others since IE8b1) and provides better level of standards support.

P.S. To see the real speed just run these test on IE9 platform preview  and on any other browser and feel the difference :)

Some links:


Share this post :

Follow

Get every new post delivered to your Inbox.