Labels
Posted by

Alternative of Frameset and iFrames in HTML


Frames are very useful in HTML development for loading external contents. using frame set one can load multiple pages into a single web page. A typical use of frame set was to show constant header and footer and load different content in the center of the page. So we create two different html pages for the header and footer and place them in a frame set. 
A typical syntax of frame set is 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

     "http://www.w3.org/TR/html4/frameset.dtd">
  <HTML>
  <HEAD>
  <TITLE>A frameset document</TITLE>
  </HEAD>
  <FRAMESET cols="50%, 50%">
     <FRAME src="main.html">
     <FRAME src="table_of_contents.html">
     <NOFRAMES>
     <P>Here is the <A href="main-noframes.html">
              non-frame based version of the document.</A> 
     </NOFRAMES>
  </FRAMESET> 
  </HTML>
But most of the experts do not advise to use frame set due to below disadvantages :
  1.  The major disadvantage of using frame set is that it restricts search engines to index all the pages. Pages embedded through frame set can not be searched through search engines. Most of the search engines will not index pages containing frames as it is hard for them to search for a specific content and move backwards to check to which frame set each page belongs to and retrieve all the pages in the frame set. 
  2. User experience will not be to good. Navigational issues will happen. Its hard to navigate through pages in frames when we have more than two or three frames.
  3. Compared to normal web page user can not properly print the web pages containing multiple frames.
  4. Browser compatibility is the most common issue. Not all browsers support frame set, so developer have to code differently for those browsers.
Now we can assume that Frames are of no use in today's era as we have lot of options now available. One of them is iframe which now used most widely in the web world. i-frame is just one "box" and you can place it anywhere on your site where as frames are a bunch of 'boxes' put together to make one site with many pages. iframe is able to "float" within content in a page, that is you can create an html page and position an iframe within it. This allows you to have a page and place another doucment directly in it. A frameset allows you to split the screen into different pages (horizontally and vertically) and display different documents in each part.

As day by day financial transactions and other secure things are going online , security for everyone is must. So if we talk about the security for frames and iframes then both are not up to mark. There are lot of security risks using these two elements in your web page. Lets see how these are dangerous for our application :

  1. iframes have access to certain properties of the parent document, e.g. redirect the parent frame to a new location using parent.location.href or parent.window.location .This is great for phishing attacks when embedding content from other servers (even if you trust that server it might be compromised).
  2. There is no cross domain policy exists means you can include content that does not originate from your domain which leads a great security risk.
  3. CSS and iframes can scan your LAN from the internet!
  4. Check http://www.thespanner.co.uk/2007/10/24/iframes-security-summary/ link , lot of proof of concepts given here which is enough to understand the risk.

Now with the introduction of the jquery in the web world , we have lot of flexibility. We can not things now more easily and in more convenient way.
Jquery replaces many old java script and html tags which were hard to write and were a security risk. similar to frame set and iframes you can load html pages into other html page. but the way of loading is totally different. Here pages are getting loaded into the html containers such as div etc. You can find the div element  using jquery selector $ where you want to load the page and then use function .load by passing the page url to load the page.
  $("#divid").load("pageName.html");
 The above code snippets will load a page with name pageName.html in to a div which have id "divid" . You can load any page or image anything using this method. Lets see the difference in this method with frame set and iframe.

  1. This load method does not allow cross domain page loading means you can not load any page which is hosted on google.com to you local page or the page which is hosted on some other domain. ex. the page http://myonlinecoupons.in/flipkart/fdiscount.html can not be loaded into the page which is hosted on http;//dkumar.co.in/mypage.html
  2. Using this method , all the code of the other page is loaded thus you can use a single script / css file for the both pages.
  3. There is no concept of parent or child here, you can easily call javascript methods of each pages into another.

Today's almost all ads provider sites uses iframe to provide their ads. Affiliate marketing is growing and all the affiliates are provided the code within an iframe which may be cause a security risk in coming future.

Please feel free to comment and give you suggestions about this article. If anything extra you were expecting from this article, let me know, I will update as per your expectations


Email Post
Labels:

Comments

Post a Comment

Thanks for your valuable feedbacks.Keep visiting the blog...