Home > Articles > Operating Systems, Server > Solaris

  • Print
  • + Share This
Like this article? We recommend

CASE Studies: How to Configure the Gateway to Rewrite a Web-Based JavaScript Navigation Bar

This section contains case studies that are intended to show different approaches to rewriting required for different complexities of JavaScript content created for the purpose of a Navigation Bar. It also underlines the importance of understanding the content that is passed through the gateway so that you know if it needs rewriting and how to create the rules appropriate for doing so.

Case 1: Simple Navigation Bar

In this case, a simple navigation bar is created by coding each image and URL associated with the image in a line-item fashion.

...
..
.
<A HREF="http://url1"><IMG SRC="../../images/IMG1.gif"></A>
<A HREF="http://url2"><IMG SRC="../../images/IMG2.gif"></A>
.
..
...

The gateway profile already has entries that automatically rewrite HTML tag attributes whose name is either SRC or HREF.

Prior to SP3 (or possibly SP2), URLs could reference directories higher than the document root and were rewritten accordingly. For instance, if the document root was http://server/dir1/dir2/dir3 and a URL referenced ../../, instead of stopping at the document root, the URL would be incorrectly rewritten to: http://server/dir1

Case 2: Navigation Bar Using a JavaScript MouseOver Event

In this case, a navigation bar is created by using a JavaScript MouseOver event so that the image changes, appearing to be depressed.

...
..
.
<A HREF="http://url1" NAME="ACTION1" 
onMouseOver=document.images[0].src="../../images/IMG1ON.gif"
onMouseOut=document.images[0].src="../../images/IMG1OFF.gif";>
<IMG ALIGN="MIDDLE" SRC="../../images/IMG1ON.gif" BORDER="0" ALT="ACTION1"></A>
<A HREF="http://url2" NAME="ACTION2" 
onMouseOver=document.images[1].src="../../images/IMG2ON.gif"
onMouseOut=document.images[1].src="../../images/IMG2OFF.gif";>
<IMG ALIGN="MIDDLE" SRC="../../images/IMG2ON.gif" BORDER="0" ALT="ACTION2"></A>
.
..
...

The JavaScript onHandlers are included in the gateway profile, out-of-box. As of SP3 Hot Patch 3, the URLs in JavaScript content can contain wildcards. Before that, and in SP4, the JavaScript rules can not contain array references for JavaScript document object arrays. With SP3 Hot Patch 3, a rule would have to be added to the Rewrite JavaScript Variables in URLs section of the gateway profile like: document.images*.src

Because document.images*.src and onMouseOver or onMouseOut are included in the gateway profile, there is the possibility of something being unintentionally rewritten, depending on how the JavaScript code is formed. If the image statement was instead changed to the following:

lnk = "http://nsx.red.iplanet.com/test_cases/foo;
document.write('<IMG ALIGN=\"MIDDLE\" SRC=\"' + lnk +
'../../images/IMG1ON.gif\" BORDER=\"0\" ALT=\"ACTION1\">');

then, lnk would be added to the gateway profile, and the SRC attribute would be automatically rewritten making the URL look like the following:

https://GWaddr/http://nsx.red.iplanet.com/images/IMG1ON.gif/
https://GWaddr/http://nsx.red.iplanet.com/images/IMG1ON.gif

There is a fix available for this limitation in the SP4 Hot Patch 1 release (see "How to Get Hot Patches" on page 80).

Case 3: Navigation Bar Using a JavaScript Function Call

In this case, a navigation bar is created by using a JavaScript function call with a mouse event handler:

<HTML>
<HEAD>
<SCRIPT>
<!--
 function depress(imgNum){
  if (imgNum == 1) {
   document.images["IMG"+imgNum].src = "../../img/Back_lit.gif";
   liftUp(2);
  }
  else if (imgNum == 2) {
   document.images["IMG"+imgNum].src = "../../img/Forward_lit.gif";
   liftUp(1);
  }
 }
  function liftUp(imgNum) {
  if (imgNum == 1) {
   document.images["IMG"+imgNum].src = "../../img/Back.gif";
}
  else if (imgNum == 2) {
   document.images["IMG"+imgNum].src = "../../img/Forward.gif";
  }
 }
//-->
</SCRIPT>
 
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
 
<A HREF="#" onClick="depress(1);"><IMG SRC="../../img/Back.gif" NAME="IMG1" BORDER="0"></A> 

<A HREF="#" onClick="depress(2);"><IMG SRC="../../img/Forward.gif" NAME="IMG2" BORDER="0"></A>
 
</BODY>
</HTML>

The same limitation applies with regard to the JavaScript document array. Having JavaScript functions can sometimes increase the flexibility of either a content-based or rule-based workaround. In this particular instance though, SP3 Hot Patch 3 or SP4 Hot Patch 1 release would have to be applied and a rule like document.images*.src would have to be added to the Rewrite JavaScript Variables in URLs section of the gateway profile.

You could create a variable called up2dir and initialize it to the prepended directory path for the images. Then, add up2dir to the gateway profile, and rewrite the relative content, as in the following example:

<SCRIPT>
 up2dir = "../../";
 .
 ..
 ...
 document.images["IMG"+imgNum].src = '"' + up2dir + 'img/Back.gif"';
 ...
 ..
 .
</SCRIPT>

Case 4: Navigation Bar Using Imported JavaScript Code

In this case, a navigation bar is created by using imported JavaScript code. The following is an example of the directory hierarchy:

  • ./scripts
  • ./scripts/nav.js
  • ./nav.html
  • ./images
  • ./images/nav.jpg

Consider the following HTML source:

<HTML>
<HEAD>
<SCRIPT SRC="scripts/nav.js">
 
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
...
..
..
...
</BODY>
</HTML>

The following is the corresponding SCRIPT source:

imgsrc = "images/nav.jpg";
document.write('<IMG ALIGN=\"MIDDLE\" SRC=\"' + imgsrc + '\" BORDER=\"0\" ALT=\"ACTION1\"
NAME=\"ACTION1\">');

By default, the Portal Server will rewrite this using the incorrect header information because a Referer is not supplied by the Netscape Navigator browser for imported JavaScript files. The SCRIPT SRC and the CSS SRC attributes were not rewritten prior to SP3.

The image src in this case would be rewritten as:

https://GWhost/http://ContentServer/scripts/images/nav.jpg

Instead of:

https://GWhost/http://ContentServer/images/nav.jpg

The SP4 Hot Patch 1 release rewrites this correctly for the Internet Explorer browser.

If the script is on the same server, you can either modify the SRC URL to contain the prepended path from the document root, or you can create a symbolic link in the scripts directory that will point to the images directory.

Case 5: Navigation Bar Using Arrays of URL Arrays

In this case, a navigation bar is created by using arrays of URL arrays.

.
..
...
var tabArray = new Array(); 
tabArray[0] = new Array();
tabArray[0][1] = 'Calander';
tabArray[0][2] = '../index_left.html';
tabArray[0][3] = 'none';
tabArray[0][4] = 'ics';
tabArray[0][5] = 'Calander calls:Calander bugs';
tabArray[0][6] = 'Home';
tabArray[0][7] = 'home';
.
...
...
var curLinkURL = top.tabArray[parseInt(top.curTab)][7].split(":");
...
..
.

Because the document object array occurs on the right side of the variable assignment, you cannot add curLinkURL to the gateway profile because the gateway will not understand that top.tabArray actually represents a URL of any sort. You cannot add curLinkURL to the Rewrite JavaScript Variables Function list because curLinkURL is actually an array, rather than a single value.

Again, in this case, you only want to rewrite tabArray[0][2], tabArray[0][4], and tabArray[0][7].

While tabArray[0][7] and tabArray[0][4] do not look like a URL at first, the JavaScript code that uses the array knows that it represents a relative URL that does not contain any prepended path information. In fact, it is a colon separated list of directories that are URLs. So, the rewriter would have to know that you want to rewrite the two dimensional array at index [0][7] after it has been parsed on the colon. Using the syntax alone on the existing JavaScript code, there is no way to have the rewriter do this.

You can insert code between where curLinkURL is initialized and where it is used to individually rewrite the array values.

The following is an example:

for (i=0; i<curLinkURL.length; i++) {
 tmpURL = curLinkURL[i];
 curLinkURL...
}

You could then add tmpURL to the Rewrite JavaScript Variables Function section of the gateway profile. tmpURL cannot be added to the Rewrite JavaScript Variables in URLs section of the gateway profile because the right side of the variable assignment is not clearly a raw URL, so a domain determination cannot be made. It would not be clear what the value of the right side would be until the code actually executed.

Case 6: Navigation Bar Using Dynamically Generated URLs

In this case, a navigation bar is created by using dynamically generated URLs.

for (var i=0; i<curLinkName.length; i++) {
.
..
...
document.writeln('<A HREF=\"' + curLinkDir + '/' + curLinkURL[i] + 
'/index.html\" TARGET=\"content\"');
document.writeln('onClick=\"self.location.href=
 \'index_left.html\'\;parent.curLink='+i+'\;');
...
..
.
}

How this would look after it is rewritten entirely depends on what curLinkDir is. Without knowing this, it is difficult to presume if any modification is necessary. In this particular case, curLinkDir is array element [0][4] from the previous step:

var curLinkDir = top.tabArray[parseInt(top.curTab)][4];

In this case, the gateway will look at the value of the HREF attribute that it sees as a single quote. As discussed previously, prior to SP4 Hot Patch 1, the entire fully qualified URL to the Referrer will be prepended, which would look like the following:

<A HREF="https://GW/http://ContentServer/' + curLinkDir + '/' + curLinkURL[0] + 'index.html\"
....

The above would be reduced to the following:

<A HREF="https://GW/http://ContentServer/ics/home/index.html 
TARGET="content"..

For the second statement to be rewritten correctly, self.location.href should be added to the gateway profile under Rewrite JavaScript in URLs or possibly Rewrite JavaScript Variables Function so that the second half of the A tag is rewritten correctly. curLink in this case is an integer, so you do not need to rewrite it.

Case 7: Navigation Bar Using JavaScript Code Obfuscation

In this case, a navigation bar is created by using JavaScript code obfuscation.

Bx+=Bm("browse", "Select file(s)");
...
..
.
..
....
function Bm(BD, altTag){var Bn=BD + "Image"; var Bo=BD + ".gif"; 
var Bp='width=22 height=22 align=absmiddle alt="' + altTag + '" 
buttonId="' + BD + '"'; var Bq='<td class="s-form-tool-cell">' + 
NH(Md() + "/iNotes/Forms5.nsf" + "/h_ResourcesByName/" + Bo + "/$FILE/" + 
Bo + "?OpenElement&MaxExpires&TimeStamp=" + haiku.sFormsTLM,Bn,Bp) + '</td>';
return Bq;}

Without having an intimate understanding of what this code does, it is difficult to tell what to rewrite or if anything needs to be rewritten at all. Further, because the variables do not seem to have unique names, it may be dangerous to create rewriting rules for them because they could have unforeseen side effects on other code coming through the gateway.

Additionally, this code incorporates everything previously stated at the other levels of complexity. This is code from a third party vendor that has been obfuscated for public consumption and is emitted on a single line, so disseminating it is quite difficult. Understanding it and writing rules for it is another challenge entirely.

  • + Share This
  • 🔖 Save To Your Account