Saturday, 29 September 2012

Absolute and Relative Paths

Writing URLs

When you're creating links to documents and images on the web, you need to think about how you're going to link to them. There are two standard ways to create links:

absolute paths
relative paths

Absolute Path URLs

Absolute paths are called that because they refer to the very specific location, including the domain name. The absolute path to a web element is also often referred to as the URL. For example, the absolute path to this web page is:

http://webdesign.about.com/od/ beginningtutorials/a/aa040502a.htm

You typically use the absolute path with the domain to point to Web elements that are on another domain than your own. For example, if I want to link to the Graphics Software Guide’s site — I need to include the domain in the URL: http://graphicssoft.about.com/. So a link to her Photoshop review would look like this:

<a href="http://graphicssoft.about.com/od/productreviews/gr/Photoshop.htm"> Review of Photoshop</a>

If you’re referring to a web element that is on the same domain that you’re on, you don’t need to use the domain name in the path of your link. Simply leave off the domain, but be sure to include the first slash (/) after the domain name.
For example, my article “How to Create a Web Page with HTML” has the URL:

http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm

If I were to link to this URL from another page on my site, I could link to it in this way:

<a href="http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>

It is a good idea to use absolute paths, without the domain name, on most websites. This format insures that the link or image will be usable no matter where you place the page. This may seem like a silly reason to use longer links, but if you share code across multiple pages and directories on your site, using absolute paths will speed up your maintenance.

Relative Path URLs

Relative paths change depending upon the page the links are on. There are several rules to creating a link using the relative path:

links in the same directory as the current page have no path information listed
filename
sub-directories are listed without any preceding slashes
weekly/filename
links up one directory are listed as
../filename

How to determine the relative path:

First define the URL of the page you are editing. In the case of this article, that would be http://webdesign.about.com/od/beginningtutorials/a/aa040502a.htm
Then look at the directory path for the page. For this article, that is /od/beginningtutorials/a/
Get the URL of the page you want to link to. For this example that would be the “How to Create a Web Page with HTML” article: http://webdesign.about.com/od/beginningtutorials/ss/aasspagehtml1.htm
And look at the directory path for that page: /od/beginningtutorials/ss/
Compare the two paths, to determine how to link to it. From this article I would need to step up one directory from the /a/ directory and then go back down to the /ss/ directory using the code ../ss/aasspagehtml1.htm.
Write the link: <a href="../ss/aasspagehtml1.htm">How to Create a Web Page with HTML</a>

Current Web Design/HTML Articles

Other URL Resources

jek2kdotcom » Blog Archive » Building a custom Skype-me button with status icon

Building a custom Skype-me button with status icon

a simple PHP solution

I’m not a big fan of Skype and I usually don’t use it. However, in a recent project, I was asked to add a “Skype Me” button in the contacts section of a client’s website.

I guess you all know Skype provides a bunch of free buttons and even an online wizard to build custom buttons. This works pretty good, except it only allows to use the default Skype buttons and icons and images are PNGs.

What to do then if you need to use custom-designed buttons? Or if you’re targeting IE6 and have no transparent-PNGs support? I scored 2 on 2, having both those problems.
So I decided to search for some Skype documentation and build a script myself.

Some basic information on creating custom Skype buttons and links can be found here. This explains how to code links, but still doesn’t address my problem. Then I found some more in-depth documentation on building web-services and apps interacting with Skype, that can be downloaded from here.

This way I found out that you can call a remote Skype URL, passing in your username and some parameters, to retrieve a status button, a status code or a status string.

The numeric status code is easier to use. Here’s a short list of numeric codes and their meaning:

0 – unknown
1 – offline
2 – online
3 – away
4 – not available
5 – do not disturb
6 – invisible
7 – skype me

Then I coded a short PHP script to take advantage of this function and retrieve the status code for a given Skype username.

01function getSkypeStatus($username) {
02    $remote_status = fopen ('http://mystatus.skype.com/'.$username.'.num', 'r');
03    if (!$remote_status) {
04        return '0';
05        exit;
06    }
07    while (!feof ($remote_status)) {
08        $value = fgets ($remote_status, 1024);
09        return trim($value);
10    }
11    fclose($remote_status);
12}    

Half of the job was done. Now I needed to link each code to a custom-designed status icon.

1function getSkypeStatusIcon($username) {
2    $status = getSkypeStatus($username);
3    // change the path of the icons folder to match your site
4    echo '<img src="/skype-icons/'.$status.'.jpg" alt="call '.$username.'" />';
5}

So that calling the PHP function with the desired username…

`1`	`getSkypeStatusIcon('nicolovolpato');`

…returns the necessary HTML code for the icon image.

`1`	`<img src="/skype-icons/1.jpg"` `alt="call nicolovolpato"` `/>`

Of course I had then to go back to Photoshop and design my custom icons. I simply named the files like the status codes, where 1.jpg is the icon for offline, 2.jpg is the icon for online and so on.

I’ve tested this script using my Skype account and other accounts and seems pretty reliable. This is not the only method and I’m pretty sure this is not even the best method available, but it’s just the solution I have found to this problem and wanted to share it.

Download the source code (4k ZIP)

Create Custom Skype Buttonsfor a website

Create Custom Skype Buttons

Recently we implemented Live Help for our paying customers. We based it on Skype, so our customers can call us or contact us as they are working on their websites, especially if they need instant advice. The main challenge we had was creating custom Skype Call Me buttons. You see, Skype provides a bunch of free custom buttons, but you are then tied into their default Skype buttons images. For most people that might be fine, but you also might find yourself not happy with being tied to “Call Me” buttons. So how do you get custom Skype buttons to work? The solution we found was this great script which we have slightly modified.
Basically it ties into the status codes of Skype as below

* 0 – unknown
* 1 – offline
* 2 – online
* 3 – away
* 4 – not available
* 5 – do not disturb
* 6 – invisible
* 7 – skype me

Simply create images in JPG or PNG and number them 1 thru 7 for each status. The next step is to change your username to your personal one and you are good to go. It’s that simple. Get the full script here with our notations. Make the changes you need, and save as .PHP file type. Have fun!

Send and email from a webpage,sample code

Home | About Us | Contact | Articles

To send and email from a web page, there are two options. The first uses the visitor’s own default email program; the second utilizes a process available with asp called CDOSYS. The sample code that follows will allow a visitor to send an e-mail to an e-mail address associated with the website.

Using the visitor’s email program.

Two methods that will be demonstrated using the visitor's email are the use of a link and the use of a button.

Using a link.

This is by far the easiest methodology but also the least pleasing to look at.

Sample code for an email link.

<A HREF="mailto:support@mywebsite.com?subject=Support Request ">E-mail Support</A>

This will appear on the webpage as:

E-mail Support

Using a button

This method definitely looks more professional.

Sample code for sending an e-mail using a button.

<FORM>
<INPUT TYPE="button" value="E-mail Support" onClick="parent.location='mailto:support@mywebsite.com?subject=Support Request’">
</FORM>

NOTE: The code for the button should be placed on a single line as follows:

<INPUT type="button" Value="E-mail Support" onClick="parent.location='mailto:support@mywebsite.com?subject=Support Request’">

This will appear on the webpage as:

Using CDOSYS and a webpage form

Using CDOSYS to send an e-mail from a website requires the use of asp and a webpage form. This method does NOT use the visitor’s e-mail program, it uses your website.

The webpage form

<form method="post" action="sendmail.asp"><br>
Your name: <input type="text" name="visitorname" size="20"><br>
Your e-mail: <input type="text" name="from" size="40"><br>
<center>Questions or Comments</center><br>
<textarea cols="40" rows="6" name="msgBody"></textarea><br><br>

<input type="submit" value="Send Email"><br>
</form>

This will appear on the webpage as:

The sendmail.asp page

Sample code:

<% visitorname = Request("visitorname")
from = Request("from")
msgBody = Request("msgBody")

Set ObjSendMail = CreateObject("CDO.Message")

'This section provides the configuration information for the remote SMTP server.

ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusing") = 2 'Send the message using the network (SMTP over the network).
ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserver") ="relay-hosting.secureserver.net"
ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpserverport") = 25
ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpusessl") = False 'Use SSL for the connection (True or False)
ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpconnectiontimeout") = 60

' If your server requires outgoing authentication uncomment the lines bleow and use a valid email address and password.
'ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/smtpauthenticate") = 1 'basic (clear-text) authentication
'ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendusername") ="somemail@yourserver.com"
'ObjSendMail.Configuration.Fields.Item ("http://schemas.microsoft.com/cdo/configuration/sendpassword") ="yourpassword"

ObjSendMail.Configuration.Fields.Update

'End remote SMTP server configuration section==
ObjSendMail.To = "support@mywebsite.com"
ObjSendMail.Subject = "Support Request"
ObjSendMail.From = from & "@mywebsite.com"

ObjSendMail.TextBody= msgBody
ObjSendMail.Send

Set ObjSendMail = Nothing
Response.Redirect "Enter the url you want the visitor to go to."
%>

Obviously the use of a webpage form is more desirable, it's much more professional in appearance.

Have a question or Comment
or need some help?

Fill in the form below and we will get back to you as quickly as possible.
We may also be reached by phone at 612-871-6089

Saturday, 22 September 2012

Dynamic Drive DHTML Scripts- Encrypted Password script

Encrypted Password script - Dynamic Drive DHTML Scripts

Encrypted Password script

Author: Rob Heslop | homepage

Last updated: July 23rd 2001 by Mike to include username field

Description: JavaScript password scripts have improved substantially over time, with the latest enhancement being an encrypted password, archived using "fuzzy" algorithms. The result are password scripts that won't crumble as soon as the user views the page's source. Use this script to password protect your webpage; based on a simple yet effective encryption method, it's one of the best of its kind.

Important: In general JavaScript password scripts are significantly less secure that their CGI counterpart. If your server supports CGI, the ideal method of password protection is via that route.

Demo: Username is "john" & password is "good":

Directions:

Step 1: First, generate the encrypted username/password set by typing the desired selections in the box below (ie: "john" and "good") and press calculate (the generator is NOT case sensitive):

Step 2: Once you have the encrypted set, name the secure page what your password is .htm (i.e. "good.htm"). Then, add the following script to the page leading up to the protected one, replacing the numbers inside the script (where indicated by the comments) with the numbers generated above:

Select All

<script>//Encrypted Password script- By Rob Heslop //Script featured on Dynamic Drive  //Visit http://www.dynamicdrive.com   function submitentry(){ password = document.password1.password2.value.toLowerCase() username = document.password1.username2.value.toLowerCase() passcode = 1 usercode = 1 for(i = 0; i < password.length; i++) { passcode *= password.charCodeAt(i); } for(x = 0; x < username.length; x++) { usercode *= username.charCodeAt(x); } //CHANGE THE NUMBERS BELOW TO REFLECT YOUR USERNAME/PASSWORD if(usercode==134603040&&passcode==126906300) //CHANGE THE NUMBERS ABOVE TO REFLECT YOUR USERNAME/PASSWORD { window.location=password+".htm"} else{ alert("password/username combination wrong")} } </script> <form name="password1">
<b>Enter username: </b><input type="text" name="username2" size="15"> <b>Enter password: </b><input type="password" name="password2" size="15"> <input type="button" value="Submit" onClick="submitentry()"></form>

You're done.

Let's replay everything, just to make sure everyone's on the same page:

Step 1: Use the generator to create the encrpted, numeric versions of your username/password (ie: "good" becomes 126906300) Step 2: Name the page you wish to password protect what your password is, prefixed with .htm (ie: "good.htm") Step 3: Inside the code of Step 2 above, change the two numbers to the numbers generated by the generator Step 4: Finally, insert the code of Step 2 into the proceeding page visitors will login using.

Free free to rewind at this point...

Tuesday, 4 September 2012

How to Embed a YouTube Playlist into your Website | Connecting Up

So, you've managed to secure a YouTube for Nonprofits account and you've made some great looking videos, but how do you share them on your website?

YouTube has the great feature of being able to create playlists filled with your organisation's videos. The benefit of this is that instead of hunting down all of your videos, they can just check out your playlists. They're also a great way of keeping track of your favourite YouTube videos.

It's well known that you can embed a single YouTube video into your website, but did you know you can embed a YouTube playlist into your website too? It doesn't take up any more room than a single video, and brings all of your YouTube playlist videos into one place.

Why would you want to embed a YouTube playlist into your website?

Here are some great reasons why you would want to embed a YouTube playlist into your nonprofit organisation's website:

Everytime you add videos to your playlist, they will be automatically added to your website.
Keep people on your website longer by offering them more relevant content that you hand-pick.
Avoid unrelated or inappropriate videos being displayed after a video has been watched
Easy way to create a portal to your YouTube content
Highlight videos from your supporters - the playlists can contain any videos, not just yours!

Part 1: Create Your YouTube Playlist

There are a range of ways to create a YouTube playlist for you to embed. Here's one, straightforward option:

From any page on YouTube, click on your account name (next to the "Sign Out" link) to open the "My Acocunt" box.
Click "Videos" under "My Account"
In the left hand column click the "+New" button next to "Playlists"
A box will pop up asking for: Playlist title, Playlist description and Playlist tags
Once you've filled these out, click "Create playlist"

Now you can add videos to your YouTube Playlist, simply click the "+" buton you see under every YouTube video. For example, for videos from the Connecting Up 2011 conference, we added all of our videos to one playlist.

Part 2: Get the YouTube Playlist Embed code

Now that you're all set up, the next step is to get the code to embed your YouTube playlist into your website.

From any page on YouTube, click on your account name (next to the "Sign Out" link) to open the "My Acocunt" box.
Click "Videos" under "My Account"
Choose your YouTube Playlist from the left hand column (under the "Playlists" heading)
Click the "Share" button
Copy the "Embed code"

The code is now in your clipboard. If you want to save it, you can open up your wordprocessor (e.g. Microsoft Word) or text editor and paste it into there. Otherwise, it's in your clipboard ready to be pasted into your website!

Part 3: Embed the YouTube Playlist into your website code

Great work! You now have the necessary code to embed your YouTube playlist in your clipboard. The next part requires you to embed this into your website. Now, this will be different for everyone as the platforms you use for your website are different, but here are a few things to remember:

What you have copied is HTML code, and will have to be inserted with this in mind. If you're using a WYSIWIG editor, you may need to click "source" or "Disable rich-text" or "HTML" to see the HTML code.
You can change the size of the embedded YouTube Playlist by changing the "width" and "height" properties (defaults are: width="480" height="385")
If you want more advanced options you can see the YouTube Embedded Player Parameters
Be creative! With this code, you can embed your YouTube Playlist just about anywhere - e.g. Facebook Tabs, blogs, etc
If you can't embed your YouTube Playlist, you can always link to it by copying the "Playlist URL" instead.

Here's a finished example!

Below is the playlist from our Connecting Up 2011: Reboot Your Nonprofit conference, enjoy!

Ben Teoh's blog
Log in or register to post comments

YouTube Gives Embedded Video Playlist Player A Facelift

Jeremy Scott |

5 Replies

playlist player1 200x161 YouTube Gives Embedded Video Playlist Player A Facelift

YouTube has been tinkering a bit lately with the design and interface of their video player. In fact, they seem to change things up pretty frequently, as far as redesigns go. But the embeddable playlist player has remained relatively unchanged for quite some time. That all changes today, as YouTube has released a brand new playlist player that much more closely resembles the latest version of the standard single-video player.

Playlists are a fantastic tool for anyone that needs to share multiple videos at once all in the same embedded player. You simply create the playlist in your YouTube account--you can even create playlists including videos beyond just those that you've made yourself--and then generate the embed code.

It's a great way to incorporate multiple pieces of video content, centered around a theme or topic, without the viewer having to do anything more than click the original "Play" button one time. Tons of people use playlists, so this new updated player ought to be a very welcome surprise.

Here... have a look (this is just an image, not a clickable video):

playlist player YouTube Gives Embedded Video Playlist Player A Facelift

playlist player YouTube Gives Embedded Video Playlist Player A Facelift

Notice the red toggle at the bottom of the player, which allows the user to have the rest of the playlist clips pop up with thumbnails.

The new player is available immediately to publishers who wish to use it. And it's retroactive too, if you want. All you need to do to turn on the new playlist video player is change the tail end of the URL string from "fs=1" to "version=3".

For now, YouTube is encouraging publishers and developers to test the new player. Should you find anything with it to be buggy or problematic, they're asking for your feedback over at the YouTube API Google Group. However, if you don't feel like being one of the guinea pigs, and would rather not edit a bunch of URLs... then just hold tight a few days. The new playlist player goes live on July 20 for everyone.

Source: YouTube Gives Embedded Video Playlist Player A Facelift http://www.reelseo.com/youtube-embedded-video-playlist-player-facelift/#ixzz25XsyJJ72
©2012 ReelSEO

2 Ways to Embed YouTube Playlists to Website

Nov 28,2011 2:59 am / Posted by Christine Smith to Video and Audio
Follow @Christi64545571

Still embed YouTube videos on a web page one by one? In fact, you have other ways to do it - create a YouTube playlist and embed using the method described in this article. There are many advantages to embed YouTube playlist to a web page instead of multiple videos. First, it saves the web page space. Visitors don't need to scroll down to watch the next YouTube videos. Second, it will reduce the web page size because only one embed code is used, which makes the page load faster. Third, the videos will be played continuously without any interruption.

There is only one disadvantage - you must learn how to embed a YouTube playlist to website. But after read this article, you will see how easy it's. Check it out.

First, you need a YouTube playlist. See how to create a YouTube Playlist here for Christmas or any uses. To make YouTube videos, learn about Wondershare DVD Slideshow Builder >>

Using IFRAME Code to Embed YouTube Playlist

The new style YouTube playlist embed code begins with "<iframe...". Here is how you can get the YouTube playlist embed code.

1. Go to the Playlists section of your account.
2. Select the playlist you'd like to embed.
3. Click Share and next Embed to show the playlist embed code.
4. Copy the embed code.
5. Paste the embed code into your website or blog.

Watch a sample YouTube playlist embedded using the IFRAME code.

Below is the IFRAME embedding code example. If you know what the YouTube playlist URL is, just change the PLAYLISTID to suit your needs before embedding to website.

<iframe width="560" height="315" src="http://www.youtube.com/embed/videoseries?list=PLAYLISTID&hl=en_US" frameborder="0" allowfullscreen></iframe>

Using Old Code to Embed YouTube Playlist

While the IFRAME embed method is simple, some browsers and services don't support this tag. This case, you have to switch to the old embed code.

Since it has not provided by YouTube, you could copy the code below and change the "PlaylistID" to your need. Also change the width and height parameters if necessary.

<object width="560" height="315">
<param name="movie" value="http://www.youtube.com/p/PlaylistID"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/p/PlaylistID" width="560" height="315"
type="application/x-shockwave-flash" allowscriptaccess="always"
allowfullscreen="true"></embed></object>

Tips: The Difference Between 2 Methods

The IFRAME embed code supports both Flash and HTML5 video, while the older style of embed code begins with "<object..." and only support Flash playback. By the way, the "<embed..." is for Internet Explorer.

How to Embed YouTube Video Playlists in Web Pages

How to Embed YouTube Video Playlists in Web Pages

If you are planning to embed multiple YouTube videos on a web page, you may even consider putting all these videos into a single YouTube playlist and then embed the playlist into your page. This offers two advantages:
1. You can squeeze in more video content in the same amount of (visual) space.
2. A video playlist will reduce the (byte) size of your web page considerably because, technically, you now have to embed the YouTube Flash video player only once on your page.

How to Embed YouTube Video Playlists

The default embed code for any YouTube video playlist looks something like this (remember to replace the word “ID” with the actual YouTube playlist ID) :

<object width="480" height="385"> 
 <param name="movie" value="http://www.youtube.com/p/ID"></param> 
 <param name="allowFullScreen" value="true"></param> 
 <param name="allowscriptaccess" value="always"></param>
 <embed src="http://www.youtube.com/p/ID" width="480" height="385" 
 type="application/x-shockwave-flash" allowscriptaccess="always" 
 allowfullscreen="true"></embed></object>

If you find the above code confusing, there a much simpler way as well.
YouTube offers an IFRAME option for embedding individual videos and the same code can be extended to embed video playlists as well.

<iframe src="http://www.youtube.com/embed/videoseries?list=ID" 
width="100%" height="500" frameborder="0"></iframe>

You may have to modify the value of height and width attributes to make the video player fit your page.

What’s the advantage? The code looks clean and, going forward, Google could make these playlists HTML5 ready. Then your existing video playlist will play on browsers that don’t have the Flash plugin without you having to change the embed code.

Here’s a sample YouTube playlist embedded using the new IFRAME style.

2 Ways to Embed YouTube Playlists to Website

Nov 28,2011 2:59 am / Posted by Christine Smith to Video and Audio
Follow @Christi64545571

Using IFRAME Code to Embed YouTube Playlist

Using Old Code to Embed YouTube Playlist

Monday, 3 September 2012

How to Add Picasa Albums to Blogspot | Chron.com

by Gabriele Sturmer, Demand Media

Picasa's photo management software lets you upload photos to your Blogger – previously known as "Blogspot" – page. You may upload all photos from an album to one blog post if the album contains 20 or fewer pictures, or you can upload photos to multiple blog posts if your album has more than 20 pictures. Blogger provides options for selecting a layout for your images and offers different image sizes. You may also type information about your photos within the blog post's body and choose a name for the post.

Make Your Own Photo album

You Create Your Own Stunning Album Our Software is Free to Download

www.albumworks.com.au

Step 1

Open the Picasa software and click a photo album's name in the left pane. Hold down the "Shift" key and click up to 20 pictures in the album.

Step 2

Click "BlogThis!" in the list of icons at the bottom of the window. This opens a Web browser window. Type the email address and password associated with your Blogger account and click "Sign In."

Step 3

Click the "Select a Blog" drop-down list and select your blog's name. Click one of the picture layout options below "Choose a Layout," including "None," "Left," "Center" and "Right." Select "Small," "Medium" or "Large" under "Image Size." Click "Continue."

Step 4

Type a title for your blog post and type any text in the body if desired. Click "Publish Post" to upload the images to your Blogger blog.

Tips

If your album has more than 20 photos, shift-click the remaining photos and click "BlogThis!" to upload them to a new blog post.
Although the Blogger post won't show any photo captions added in Picasa, you can type captions below each picture within the blog post's body.

Saturday, 1 September 2012

Hiding pages from Google search results - Matt Thommes

Matt Thommes / Hiding pages from search results

Matt Thommes

Personal weblog. Written and developed since 2001.

Hiding pages from search results

September 11, 2007 / Filed under: Google, Tips, Web Development

Sometimes it's wise to hide certain pages from search engine crawlers. A good example is having your resume posted on your web site. On one hand, it's helpful to have a direct link to your resume, where anyone can view it upon request. On the other hand, a resume usually contains personal information, as well as company-specific job duties that probably shouldn't be showing up in a random Google or Yahoo search.

Thankfully, Google provides two simple ways to ensure private pages remain hidden from search engines:

robots.txt file
Meta tags

robots.txt

By creating a robots.txt file and placing it in your root directory of your web site, you are providing instructions to "Googlebot" (Google's site crawler) on which pages or directories you'd like hidden from search results.

If your resume is located at /resume.html on your domain, you can stop Googlebot from indexing that page by including this text in the robots.txt file:

User-agent: Googlebot
Disallow: /resume.html

That's it! Include as many rules as you'd like - each on a separate line. Google will ignore these pages or directories, preventing them from showing up in search results.

Meta tags

Although using the robots.txt file to block pages is quick and easy, there's another way that provides an added level of security.

By using meta tags, you provide more specific, page-level instructions.
Simply include this <meta> tag in your HTML document:

<html>
<head>
<meta name="googlebot" content="noindex">
...

Is it working properly?

To test whether Google is properly acknowledging your instructions, you can log into Google Webmaster Tools, choose your domain, and analyze the robots.txt file.

Screenshot of Google Webmaster tools

Other resources

Official Google Blog: Controlling how search engines access and index your website.
Official Google Blog: The Robots Exclusion Protocol.
Official Google Blog: Robots Exclusion Protocol: now with even more flexibility.

anti anti Frame Busting « coderrr

anti anti Frame Busting

Filed under: javascript, security — Tags: javascript, security — coderrr @ 4:21 pm

In this post I presented a way to prevent a site you were (i)framing from frame busting out. Jeff Atwood recently contacted me to see if I knew a way to get around the prevention (to prevent sites from framing stackoverflow.com), which of course I didn’t, but I told him I’d think about it and see if I could come up with something. A week later I had come up with a few ideas but none actually worked.

See updates below for latest/best solution

But, due to some extra motivation from his post today (which links to my original post), I may have just come up with something.

1if (top != self) {
2  top.location.replace(document.location)
3  alert('busting you out, please wait...')
4}  

It’s so stupid simple, but it seems to actually work. If you present an alert() box immediately after changing top.location you prevent the browser from running any more JS, either from your framed site or from the framing site. But you don’t prevent the browser from loading the new page. So as long as the alert box stays up for a few seconds until the browser has loaded enough of the new page to stop running scripts on the old page, then the anti frame busting code never runs and you successfully are busted out once the user clicks OK on the alert.

I’ve just done a preliminary test of this in FF3 and IE7 and it worked in both. So I’m calling it, anti-anti-frame-busting is here!

Update: Jason brought up in a comment the issue of a user clicking OK before the page finished loading in which case the anti-frame-bust will still prevent you from busting. One thing you can do to make sure that the page loads extremely quickly so that no user will be able to click OK before that is to (pre-)cache it. Here’s an example:

01<!-- this is the page being framed -->
02  <script>
03    function bust() {
04      if (top != self) {
05        // this page is now cached and will load immediately
06        top.location.replace("http://page-with-expires-headers.com/")
07        alert('busting you out, please wait...');
08      }
09    }
10  </script>
11  <!-- cache it! -->
12  

You should have these headers on the page to bust out with.

1Expires: Sun, 19 Aug 2012 14:10:44 GMT    <-- far enough in the future
2Last-modified: Fri, 19 Jun 2009 04:24:20 GMT    <-- now

First the framed page will do the initial load of the cached page in an iframe (which you can make hidden). Now that page will be cached and the next time you visit it the browser should make no network requests, loading the page completely from its local cache.

For this technique to work you’ll probly want to use it with a blank page which contains only a javascript/meta redirect to the actual page that was being framed. For example:

1<html><body>
2  redirecting...
3  <script> if (self == top) top.location='http://site-to-redirect-to.com/'; </script>
4</body></html>

Update: On IE7 this caching technique alone is good enough to prevent anti-frame-busting. Meaning no alert() is required after the top.location change. At least this is true for a simple page which only consists of a javascript redirect:

1<html>
2  <body>
3    we've busted out!  redirecting...
4    <script>
5      // only redirect if we're busted out
6      if (top == self)  top.location = "http://original-page.com";
7    </script>
8  </body>
9</html>

Update: The holy grail of anti-anti-frame-busting: This code, along with the caching technique described above, works in both FF3 and IE7 and has no negative user-experience (ie. alert boxes or frozen browsers):

1<script>
2  function bust() {
3    if (top != self)
4      setInterval("top.location.replace('http://cached-bust-out-page.com/with/redirect')",1);
5   }
6</script>
7<!-- cache it! -->

Be the first to like this.

Comments (26)

26 Comments »

Wish I had the time and/or resources to test this, but I am intrigued. Having some blocking code run on the framed page, while the framing page finishes loading…
But you are saying that the user has to wait a few moments before clicking “ok” for it to work? What about using a confirm() instead of an alert? That way we would have somewhat of a better mechanical turk, because perhaps users would be too quick to click “Ok.” Or maybe add a lot of text that they have to read first?
Hmmm, interesting stuff. Perhaps when I come off of the cold medications I am on I will play with this stuff…
Thanks for the info!
Comment by Jason Bunting — June 18, 2009 @ 11:03 pm
Reply
Thanks for the comment Jason, I updated the post with a technique which will mitigate this problem.
I think using the caching technique we may even be able to get away with no alert and possibly just a blocking while loop or something. I need to do some more testing.
Comment by coderrr — June 19, 2009 @ 4:28 am
Reply
- A synchronized XMLHTTP request (blocking) to a page that sleep()s should do the trick.
  Comment by Godfrey Chan — June 19, 2009 @ 10:09 am
  Reply
  - yes! I think that’s just what I was looking for, awesome! will test this in a second
    Comment by coderrr — June 19, 2009 @ 10:25 am
  - doh… doesn’t look like synchronous xmlhttprequests actually block timers (on FF, presumably IE as well) :/
    what’s next?
    Comment by coderrr — June 19, 2009 @ 10:47 am
  - ok so for IE (IE7 at least) you are correct, that did the trick and is just as effective as an alert, great find!
    Comment by coderrr — June 21, 2009 @ 11:08 am
Nice. Again, I only partly know about this stuff, I was actually online at SO the moment Jeff originally posted his question and even gave it a few tries myself before giving up because I was already up late and needed to be done for the day. Hadn’t thought much about it until I saw Jeff’s blog entry about it.
Funny, I thought about a while loop too…
Hope this proves to be a solution, I look forward to the conclusion…
:)
Comment by Jason Bunting — June 19, 2009 @ 6:44 am
Reply
[...] by Anti anti frame busting « coderrr — June 18, 2009 @ 4:22 pm [...]
Pingback by Preventing Frame Busting and Click Jacking (UI Redressing) « coderrr — June 19, 2009 @ 7:46 am
Reply
[...] @ 7:25 pm In my quest to find something which acts similar to an alert() box in Firefox 3 (for anti-anti-frame-busting), but without the annoying user-experience, I discovered a few things that I thought I should [...]
Pingback by Firefox 3 internals, blocking alerts and XMLHttpRequests « coderrr — June 22, 2009 @ 7:25 pm
Reply
First off I’d like to thank you for posting this. I originally read about this issue on Jeff’s site. At that time I thought that I’d book mark this link in case I’d ever run into this issue, although at the time I thought I would never need it. Turns out that one of our clients decided to frame our site so that he would have his logo on the page. That turned out to be a big no-no for compliance issues.
Anyhow, I have a couple of questions about the holy grail method. I tried implementing this technique in .NET 3.5 with C#. The log-in page for the app contains an iframe that points to the log-in page. The src tag for the iframe contains a query string param that lets the log-in page in the iframe know that it should set the headers as specified so the page will not cache. I also have the version of the log-in page in the iframe contain no frame busting code.
I would think that it this would allow me to not use a redirect page. The theory goes that the log-in page in the iframe is immediately cached by the browser. The parent log-in frame then contains the busting code as shown above.
Anyhow, my attempt does not work. In IE 7/8 you can hear the navigation sound as the page tries to break out but the frame maintains the upper hand.
My questions are this: What purpose does the redirect serve? It seems like the only reason you are using it is that it is cached and would load very, very quickly. Secondly, do you know of any server based attacks that would prevent the holy grail code? I can not find any script on the client’s frames. If there were script I could analyze what it’s doing and see if I could provide more info or perhaps a solution.
Thanks,
Mike
Comment by Mike — July 22, 2009 @ 11:37 am
Reply
- Hey Mike,
  You said “set the headers as specified so the page will not cache.”, did you mean to say so the page WILL cache?
  Yes, the only reason for the redirect is so you can bust with a page which loads extremely fast so that the parent page doesn’t have time to stop the bust.
  Even if you have the login page cached, if it has to load/render images, stylesheets, javascripts, etc. You would have to make sure all of those are cahced as well, and even then there will be time to render the page. It might be too slow.
  I’d say try it with a very simple redirect page. Also I’d be interested to see the site which is framing you.
  Comment by coderrr — July 23, 2009 @ 4:23 pm
  Reply
  - Hey,
    Thanks for the reply. I kind of gave up on the whole thing for a bit because there was (and is) a bunch of stuff that we’re working on.
    I was making some compliance updates and SEO enhancements to our main website (the one listed). After I relisted with all the major search engines I saw that we had a bunch of backlinks that were all framed. I decided to revisit the issue and saw that I created a flaw in my code.
    I revisited my code and cleaned it up, saw the flaw and moved it our main site. It works like a charm. Thanks so much!
    Mike G.
    Comment by Mike — September 4, 2009 @ 4:31 pm
Here’s my question is there a method where I can use the anti-frame buster code and put some type of javascript to trigger an event/submit inside of the said iframe?
Comment by AC — March 24, 2010 @ 5:24 am
Reply
[...] [...]
Pingback by Common Security Mistakes in Web Applications - Smashing Magazine — October 18, 2010 @ 12:46 pm
Reply
[...] Anti-anti frame-busting [...]
Pingback by Common Security Mistakes in Web Applications — October 18, 2010 @ 5:38 pm
Reply
[...] Anti-anti frame-busting [...]
Pingback by Design and Digital Media » Blog Archive » Common Security Mistakes in Web Applications — October 18, 2010 @ 8:22 pm
Reply
[...] Anti-anti frame-busting [...]
Pingback by Common Security Mistakes in Web Applications | LionWebMedia.com — October 19, 2010 @ 8:53 am
Reply
[...] Anti-anti frame-busting [...]
Pingback by Common Security Mistakes in Web Applications | Web Design Course Brisbane: Next Course Wed 20th Oct 2010 — October 20, 2010 @ 7:46 am
Reply
[...] Anti-anti frame-busting [...]
Pingback by Best and Cheap Solutions - Common Security Mistakes in Web Applications — October 27, 2010 @ 7:33 pm
Reply
[...] Anti-anti frame-busting [...]
Pingback by Common Security Mistakes in Web Applications « I.T News & Stuff — December 3, 2010 @ 4:47 am
Reply
can u describe how u implement it on the site, i dont really get it.
how is the file structure and which code where. Do i need to triger bust function ?
Comment by Confuzed — May 6, 2011 @ 1:01 pm
Reply
Can you please mail me the code source with .html extension in one folder.? I’m kinda confused.
Comment by Mezzeric — May 24, 2011 @ 1:49 pm
Reply
i have a solution that really works for anti frame break code if you want do me an offer for the code to the email netbizpt@gmail.com
Comment by filipe — July 16, 2011 @ 5:20 pm
Reply
- show me it in action!
  Comment by DemonTed1 — December 15, 2011 @ 6:03 am
  Reply
I found a much simpler way. Have the iframe on the top page call for a dummy page on your site. Then have the dummy page have another iframe calling for the site you want which is brekaking out. It will indeed break out of the dummy page, but because your dummy page is on your site, it will not break out of the first iframe. voilla
Comment by Larry Holmes — January 5, 2012 @ 4:33 am
Reply
- Tried it and does not work
  Comment by gerdnaschenweng — February 10, 2012 @ 2:07 pm
  Reply