URL Masking

There are numerous ways to mask a URL — meaning the URL in the browser's address bar is not the actual URL to the content.

The example code in this article assumes the actual content being published is at the same domain as the URL in the browser's address bar. With extra coding, and excepting the Apache rewrite method, the content can come from other domains.

(See Block Content Theft via URL Masking for ways to block unauthorized publishing of your content.)

Causing the browser's address bar to show a URL different than the actual URL of the web page being viewed is one definition of URL masking. A second definition is to cause a link URL to show in the browser's status bar different than the URL of the web page being linked to.

This article addresses the first definition of URL masking.

Three URL masking techniques are fairly easy to implement:

1. With an iframe tag —

   An iframe large enough to use up the entire browser window contains the content at a different URL.

2. With an Apache rewrite directive —

   The URL affected by the Apache rewrite is in the browser's address bar while the content in the browser window is from a different URL.

3. With web page retrieval software —

   A web page is retrieved from a different URL and inserted at the web page of the current URL.

Note: Another way to frame pages is with the frameset tag. The frameset tag is deprecated, not supported in HTML5, so I won't describe how to do URL masking with it. The iframe tag, however, I think will be around for a long time; there would be a hue and cry if the standards group tried to deprecate that one.

URL Masking with an Iframe Tag

When a web page with an iframe is loaded into the browser and then content loaded into the iframe, the browser's address bar doesn't change even though the content in the iframe is from a different URL. The frame's web page originally loaded into the browser and the web page retrieved from elsewhere may be on different domains.

The iframe dimensions can be large enough to use up the entire browser window. If the dimensions of the web page being flowed into the iframe are known, the iframe tag can be adjusted to accomodate the page. Otherwise:

• If the content displayed in the iframe is smaller than the iframe dimensions, the iframe will have a blank area.

• If the content displayed in the iframe is larger than the iframe dimensions, the iframe will either have scrollbars or part of the page will be hidden.

Here is an example iframe tag.

<iframe 
  src="/page.html" 
  frameborder="0" 
  width="800" 
  height="2500" 
  scrolling="no">
</iframe>

Change the src attribute's URL to the URL of the web page for inserting into the iframe tag. See the W3 Schools' "HTML iframe tag" page for information about how to change the iframe dimensions, how to allow or prevent scroll bars, and how to change other attributes.

When the URL of the web page in the iframe is at the same domain as the URL in the browser's address bar, JavaScript can be used to automatically adjust the iframe tag size according to the size of the web page within it. You know it's the same domain when the iframe tag's src attribute's URL is a relative URL.

A relative URL is an absolute URL minus the http and domain name parts. Examples:

To set up the automatic iframe dimension adjustment, do these two steps:

1. Put this JavaScript somewhere on the page with the iframe tag.

   <script type="text/javascript">
   function AdjustIframeSize(dimension)
   {
      document.getElementById("my-iframe-tag").style.width = parseInt(dimension[0]) + "px";
      document.getElementById("my-iframe-tag").style.height = parseInt(dimension[1]) + "px";
   }
   </script>
   
   

2. Put this JavaScript at the very bottom of the page that will be published within the iframe tag, below the closing </html> tag.

   <script type="text/javascript">
   var size = new Array();
   size[0] = Math.max( (document.width?document.width:0), (document.body.scrollWidth?document.body.scrollWidth:0), (document.documentElement.scrollWidth?document.documentElement.scrollWidth:0), (document.body.offsetWidth?document.body.offsetWidth:0), (document.documentElement.offsetWidth?document.documentElement.offsetWidth:0), (document.body.clientWidth?document.body.clientWidth:0), (document.documentElement.clientWidth?document.documentElement.clientWidth:0) );
   size[1] = Math.max( (document.height?document.height:0), (document.body.scrollHeight?document.body.scrollHeight:0), (document.documentElement.scrollHeight?document.documentElement.scrollHeight:0), (document.body.offsetHeight?document.body.offsetHeight:0), (document.documentElement.offsetHeight?document.documentElement.offsetHeight:0), (document.body.clientHeight?document.body.clientHeight:0), (document.documentElement.clientHeight?document.documentElement.clientHeight:0) );
   parent.AdjustIframeSize(size);
   </script>
   
   

When the JavaScript is in place, the web page loading into the iframe calls the parent page with its dimensions. The parent page (the page containing the iframe tag) then adjusts the iframe tag size to accomodate the web page loaded into it.

Browser security won't allow this to work when the page with the iframe tag is on a different domain than the content within the iframe tag.

URL Masking with Apache Rewrite

Rewriting URLs in a certain way with the .htaccess file can display web pages from a URL different than the URL in the browser's address bar. However, both the URL in the address bar and the web page being viewed must be located on the same domain as the .htaccess file.

Test with an .htaccess file in an otherwise unused subdirectory before going live. An incorrect .htaccess file can cause the server to respond with an error message when browsers request a web page. Test in a separate subdirectory to keep any errors in that subdirectory. See the URL Rewriting Guide for more information about rewriting with the .htaccess file.

The .htaccess file requires the relative URL of the page it's supposed to match and the URL of the page to display instead.

This .htaccess file will display /otherpage.html whenever the browser asks for /pagename.php

RewriteEngine on
RewriteCond %{REQUEST_URI} /pagename.php$
RewriteRule .* /otherpage.html [L]

When the relative URL /pagename.php is matched, then the content found at /otherpage.html is published.

Replace /pagename.php with the relative URL that the .htaccess directive is supposed to match. And replace /otherpage.html with the URL of the page to publish instead.

Note: If /otherpage.html is replaced with an http://... URL, then the URL in the browser's address bar will change accordingly. To keep the URL in the browser's address bar from changing, specify a relative URL.

URL Masking with Page Retrieval Software

Software can retrieve a web page and display it in a browser.

Here's example PHP code to accomplish that.

<?php echo file_get_contents("/page.html"); ?>

Replace /page.html in the above code with the page you want to pull in, then save it as a .php file. Upload the file to your server and enter the file's URL into your browser.

A caveat: When the web page being pulled in contains relative links, the links may break. Similarly, external files to pull into the page that have relative URLs — such as JavaScript, images, and style sheets — may be unsuccessful.

To circumvent that, the web page being pulled in can be coded with absolute URLs for links and external file locations.

There are ways to programmatically change the page being pulled in to resolve relative URLs of links and external files. Modifying pages being pulled in is outside the scope of this article.

URL Masking

Those are the easiest ways to display the content of one web page with the URL of another in the browser's address bar.

Block Content Theft via URL Masking is an article about how to protect your web pages from unauthorized URL masking.

Will Bontrager