"undefined" randomly appended in 1% of requested urls on my website since 12 june 2012

Question

Since 12 june 2012 11:20 TU, I see very weirds errors in my varnish/apache logs.

Sometimes, when an user has requested one page, several seconds later I see a similar request but the all string after the last / in the url has been replaced by "undefined".

Example: http://example.com/foo/bar triggers a http://example.com/foo/undefined request.

Of course theses "undefined" pages does not exist and my 404 page is returned instead (which is a custom page with a standard layout, not a classic apache 404)

• This happens with any pages (from the homepage to the deepest)
• with various browsers, (mostly Chrome 19, but also firefox 3.5 to 12, IE 8/9...) but only 1% of the trafic.
• The headers sent by these request are classic headers (and there is no ajax headers).
• For a given ip, this seems occur randomly: sometimes at the first page visited, sometimes on a random page during the visit, sometimes several pages during the visit...

Of course it looks like a javascript problem (I'm using jquery 1.7.2 hosted by google), but I've absolutely nothing changed in the js/html or the server configuration since several days and I never saw this kind of error before. And of course, there is no such links in the html.

I also noticed some interesting facts:

• the undefined requests are never found as referer of another pages, but instead the "real" pages were used as referer for the following request of the same IP (the user has the ability to use the classic menu on the 404 page)
• I did not see any trace of these pages in Google Analytics, so I assume no javascript has been executed (tracker exists on all pages including 404)
• nobody has contacted us about this, even when I invoked the problem in the social networks of the website
• most of the users continue the visit after that

All theses facts make me think the problem occurs silently in the browers, probably triggered by a buggy add-on, antivirus, a browser bar or a crappy manufacturer soft integrated in browsers updated yesterday (but I didn't find any add-on released yesterday for chrome, firefox and IE).

Is anyone here has noticed the same issue, or have a more complete explanation?

Answer 1

There is no simple straight answer.

You are going to have to debug this and it is probably JavaScript due to the 'undefined' word in the URL. However it doesn't have to be AJAX, it could be JavaScript creating any URL that is automatically resolved by the browser (e.g. JavaScript that sets the src attribute on an image tag, setting a css-image attribute, etc). I use Firefox with Firebug installed most of the time, so my directions will be with that in mind.

Firebug Initial Setup

Skip this if you already know how to use Firebug.

After the installs and restarting Firefox for Firebug, you are going to have to enable most of Firebug's 'panels'. To open Firebug there will be a little fire bug/insect looking thing in the top right corner of your browser or you can press F12. Click through the Firebug tabs 'Console', 'Script', 'Net' and enable them by opening them up and reading the panel's information. You might have to refresh the page to get them working properly.

Debugging User Interaction

Navigate to one of the pages that has the issue with Firebug open and the Net panel active. In the Net panel there will be a few options: 'Clear', 'Persist', 'All', 'Html', etc. Make sure ALL is selected. Don't do anything on the page and try not to mouse over anything on it. Look through the requests. The request for the invalid URL will be red and probably have a status of 404 Not Found (or similar).

See it on load? Skip to the next part.

Don't see it on initial load? Start using your page and continue here.

Start clicking on every feature, mouse over everything, etc. Keep your eyes on the Net panel and watch for a requests that fail. You might have to be creative, but continue using your application till you see your browser make an invalid request. If the page makes many requests, feel free to hit the 'Clear' button on the top left of the Net panel to clear it up a bit.

If you submit the page and see a failed request go out really quick but then lose it because the next page loads, enable persistence by clicking 'Persist' in the top left of the Net panel.

Once it does, and it should, consider what you did to make that happen. See if you can make it happen again. After you figure out what user interaction is making it happen, dive into that code and start looking for things that are making invalid requests.

You can use the Script tab to setup breakpoints in your JavaScript and step through them. Investigate event handlers done via $(elemment).bind/click/focus/etc or from old school event attributes like onclick=""/onfocus="" etc.

If the request is happening as soon as the page loads

This is going to be a little harder to peg down. You will need to go to the Script tab and start adding break points to every script that runs on load. You do this by clicking on the left side of the line of JavaScript.

Reload your page and your break points should stop the browser from loading the page. Press the 'Continue' button on the script panel. Go to your net panel and see if your request was made, continue till it is found. You can use this to narrow down where the request is being made from by slowly adding more and more break points and then stepping into and out of functions.

What you are looking for in your code

Something that is similar to the following:

var url = workingUrl + someObject['someProperty'];

var url = workingUrl + someObject.someProperty;

Keep in mind that someObject might be an object {}, an array [], or any of the internal browser types. The point is that a property will be accessed that doesn't exist.

I don't see any 404/red requests

Then whatever is causing it isn't being triggered by your tests. Try using more things. The point is you should be able to make the request happen somehow. You just don't know yet. It has to show up in the Net panel. The only time it won't is when you aren't doing whatever triggers it.

Conclusion

There is no super easy way to peg down what exactly is going on. However using the methods I outlined you should be at least be able to get close. It is probably something you aren't even considering.

Answer 2

Based on this post, I reverse-engineered the "Complitly" Chrome Plugin/malware, and found that this extension is injecting an "improved autocomplete" feature that was throwing "undefined" requests at every site that has a input text field with NAME or ID of "search", "q" and many others.

I found also that the enable.js file (one of complitly files) were checking a global variable called "suggestmeyes_loaded" to see if it's already loaded (like a Singleton). So, setting this variable to false disables the plugin.

To disable the malware and stop "undefined" requests, apply this to every page with a search field on your site:

<script type="text/javascript">
    window.suggestmeyes_loaded = true;
</script>

This malware also redirects your users to a "searchcompletion.com" site, sometimes showing competitors ADS. So, it should be taken seriously.

Answer 3

You have correctly established that the undefined relates to a JavaScript problem and if your site users haven't complained about seeing error pages, you could check the following.

If JavaScript is used to set or change image locations, it sometimes happens that an undefined makes its way into the URI.

When that happens, the browser will happily try to load the image (no AJAX headers), but it will leave hints: it sets a particular Accept: header; instead of text/html, text/xml, ... it will use image/jpeg, image/png, ....

Once such a header is confirmed, you have narrowed down the problem to images only. Finding the root cause will possibly take some time though :)

Update

To help debugging you could override $.fn.attr() and invoke the debugger when something is being assigned to undefined. Something like this:

​(function($, undefined) {
    var $attr = $.fn.attr;

    $.fn.attr = function(attributeName, value) {
        var v = attributeName === 'src' ? value : attributeName.src;

        if (v === 'undefined') {
            alert("Setting src to undefined");
        }

        return $attr(attributeName, value);
    }
}(jQuery));