How To Select a Child Element Using jQuery

Let’s assume you have an HTML string containing a parent element with a number of children and their sub children elements. If you’d like to extract HTML of one of the children (by class name or id), you can use this jQuery line:

var html = $(htmlString).find('div.target').html();

It can be useful when you get an AJAX response from the server, and only a particular section needs to extracted.

How to Prevent iFrame Breakaway

Few days ago I was searching for a solution to the problem I’ve encountered – I needed to prevent a third party page to break out of iframe inside a web page of my web application. For people who are not closely familiar with JavaScript, the following JS snippet will make it more clear how page can break out of iframe:

if (top.location.href != self.location.href)  {
    top.location.href = self.location.href;
}

If the current page is not the parent window – become the parent window.

I needed to implement something on my end, that would block or prevent the above script or similar to it from executing. I’ve spent several hours browsing the Net, talking to people on IRC and simply playing trial and error.

After some time, I understood that I wont be able to find a solution to my problem, simply because there is none unfortunately. But, having said that, I have some findings to share:

  1. There is iframe security attribute which only works on IE. Setting this attribute to security=”restricted”, will prevent iframe to break out. Its always “nice” to see that MS have few tricks up their sleeve :). Also, on one of the forums, someone mentioned that the same attribute will work under Opera as well as under IE. I personally haven’t tested it my self under Opera, I can just say that it works for IE and not FF.
  2. To make use of window.onbeforeunload event and prompt user with a dialog that requires user’s input if he agrees to navigate away from the current page. If user disagrees (clicks “cancel”), he will remain on the current page. So here in a sense iframe breakaway was canceled. By the way, there is no way to suppress the dialog prompt and make event from clicking “cancel” default.
  3. To grab the content of third party page using PHP Curl lib and to create your own placeholder page for that content. Then the placeholder page can be put inside iframe. The page or the grabbed content will not attempt to breakout, but any request submitted to the placeholder page (hyper link or button click on the grabbed content) will cause page to unload.

Also, while researching, I came across this post that talks about preventing iframe breakaway and click jacking with the help of 204 header response code.

After all that, my conclusion is:
If the page inside iframe is not yours, in other words it is a page hosted under another domain, its not possible actually to stop a page from unloading. Having something like that, would allow malicious sites to “trap” a user indefinitely.

I would love to hear any other suggestions regarding iframe breakout you may have dear readers.

Cheers

Detecting an Internet Connection With Javascript

The other day I was developing small client-server application where I needed to check using Javascript on the client’s side whether active Internet connection exists, before submitting request to the server.

Javascript does not allow you to do ping, and even so many websites protect against ping requests (ICMP echo), so I had to come up with some alternatives.

One of the nice solutions that I have found is to create an Image object and to specify as image source, URL to an image located on a remote server. Then to test, if the newly created Image object has height or width greater than zero.

If it is greater, what it means is that there is active Internet connection, since it was possible to create Image object using image or icon located on a remote server.

The downside here is that path to the image or image filename may change in the future on the target remote server, and as a result of that your Javascript function will stop working.

While thinking what image should I link to, I decided to use Google’s favicon. I tend to think that the favicon is not something that is going to change very often. I also considered to use Goggle logo, but favicon is much smaller in size.
(Another thing worth remembering is to allow some time to retrieve the remote image, which is another reason why I went for the favicon).

The solution is:

function testConnection() {
   var googleFavIcon = new Image();
   googleFavIcon.src =
               "http://www.google.com/favicon.ico";

   if(googleFavIcon.height>0)  {
       //do something
    }
    else {
      //warn user
    }
}

Just keep in mind, that the remote image is cached once you got it. If you decide to test connection again, you have to make sure that you are not using the cached image, but trying to retrieve it again from the remote server. To prevent caching, you can add some random parameter to the URL:


http://www.google.com/favicon.ico?param=[random-value]