1. Home
  2. Knowledge Base
  3. Ghostlab: Troubleshooting
  4. JavaScript Rewriting

JavaScript Rewriting

In Ghostlab 2.1.0, we’ve introduced a new JavaScript rewriting engine. It lets you fine-tune how Ghostlab handles your JavaScript code.

Hey, I’m not that technical!
If you don’t want to get into the technical details of JavaScript rewriting, here’s a fast track to explain when this setting is relevant.In short, it may be possible that your website has JavaScript code that works with URLs (e.g. to load data or navigate). If left untouched by Ghostlab, this may lead to troublesome behavior. If you encounter any of the following situations, you may be able to fix it by increasing the JavaScript rewriting level. To do so, use the fancy slider in the site settings.

  • Clients “navigate away” and thus lose the connection to the Ghostlab server
  • Clients end up in an endless redirect loop
  • Things that are supposed to happen on your page simply don’t happen, without any obvious errors displayed
  • Your website displays JavaScript errors in the console that don’t occur when you don’t view it via Ghostlab, leading to incorrect behavior

Imagine you use JavaScript to point the browser to a new URL when a certain event occurs. When you run a site via Ghostlab, the URL in your browser may look something like http://192.168.1.1:8005/one. When you click on a link on the website, it may change to something like http://192.168.1.1:8005/two. Now imagine that in your JavaScript code, you send the browser to a different URL if a certain event occurs. If the code is not changed by Ghostlab, your browser will maybe end up at the original URL (e.g. http://mydomain.com/three). This means it loses the connection to the Ghostlab sever, and the clients are no longer in sync.

To avoid this, Ghostlab can rewrite your JavaScript code and make sure that any URLs that are used to send your browser to a different location, asynchronously load data or resources, etc. are always pointing to the Ghostlab server.

There are several levels of rewriting. Higher levels are more likely to detect all possible uses of URLs in your JavaScript code, but also require Ghostlab to do more rewriting and thus result in a performance penalty. You can use the slider in the site settings to adjust the level.
jsrewriting1

In case your website does not contain any JavaScript code that works with URLs, set the level to zero. If you handle URLs in your JavaScript code, usually level two or three are sufficient.
Please note that MSIE 8 is not well supported for levels higher than 1.

Find a more detailed description of the levels below:

Level 0

No client-side rewriting is done at runtime.
This setting is perfect for pages that use no JavaScript or use JavaScript only for visual effects.
Your JavaScript code isn’t modified.

Level 1

Ghostlab monitors the DOM for manipulations.
This ensures that URL attributes in elements, which are created or modified at runtime, like links and forms are rewritten at runtime so that the synchronized browsing experience isn’t lost.
Your JavaScript code isn’t modified.

Level 2

Ghostlab rewrites any accesses to static properties in your JavaScript code that are known to deal with URLs.
Ghostlab’s server analyzes your JavaScript code and modifies property accesses and function calls to properties and functions that can be determined at compile time, but ignores computed properties.

This will work:

// "href", "cookie", and any other properties dealing with URLs are handled if they can be determined at compile time
location.href = 'https://www.vanamco.com';
document['cookie'] = 'name=John Doe; domain=vanamco.com';

// "postMessage" (and any other functions dealing with URLs) are known and will be rewritten if the name is static
postMessage(data, 'https://www.vanamco.com');

This won’t work (i.e., you’ll lose the connection to Ghostlab):

// properties that are resolved only at compile time won't be handled
var h = 'href';
location[h] = 'https://www.vanamco.com';

// code in "eval"s won't be rewritten
eval('location.href = "https://www.vanamco.com"');

Level 3

Ghostlab rewrites all property accesses in your JavaScript code that could possibly deal with URLs.
In addition to rewriting all static properties that deal with URLs, any computed properties are rewritten.

This will work:

 

// if the property name can't be resolved at compile time, it will be rewritten and checked at runtime
var h = 'href';
location[h] = 'https://www.vanamco.com';

This won’t work:

// code in "eval"s won't be rewritten
eval('location.href = "https://www.vanamco.com"');

// dynamically injected scripts require "eval"
jQuery.getScript('https://www.vanamco.com/my-lazily-loaded-script.js');

Level 4

Ghostlab enables checking any code executed via the eval function.
Code evaluated at runtime via “eval”, “new Function”, “setTimeout”, or “setInterval” is intercepted and rewritten at runtime.
Note that dynamically injected scripts won’t be evaluated automatically by the browser, but need an eval, so if you’re using something like jQuery.getScript(), Level 4 is required.

This will work:

 

// code in "eval", function constructors, "setTimeout", and "setInterval" is analyzed and rewritten at runtime on the client
eval('location.href = "https://www.vanamco.com"');

// JavaScript code inlined in HTML will be analyzed and rewritten
document.write('<script>location.href = "https://www.vanamco.com"</script>');

// HTML in other document contexts will be handled
var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
iframe.contentDocument.write('<html><head><script>document.write(location.href);\x3c/script></head><body></body></html>');
iframe.contentDocument.close();

This won’t work if worker.js does stuff with URLs:

// JavaScript rewriting is enabled only for the document and its containing documents, but not for JavaScript files that don't have access to the document
var worker = new Worker('worker.js');

Level 5

The rewriting code is injected into all JavaScript files.
In case a JavaScript file is used by a WebWorker, it also contains the rewriting functionality.

This will work:

// the rewriting code is injected into every JavaScript file
var worker = new Worker('worker.js');

Was this article helpful?

Related Articles