Showing posts with label javascript. Show all posts
Showing posts with label javascript. Show all posts

Sunday, January 12, 2025

Bypassing Google "URL Swapping" in Firefox on Mac

Problem: Users on my wifi network can't click on ad links in Google Search results because those links redirect to the ad.doubleclick.net domain, which is blocked by my Pi-hole. The user ends up on a page with this error message:

Unable to connect. An error occurred during a connection to ad.doubleclick.net. 

Unable to connect. An error occurred during a connection to ad.doubleclick.net.

This happens on Firefox (as of the time of this post, January 2025) because Google is doing something a little bit sneaky: If you mouse over a hyperlink in a sponsored ad in a set of Google search results, it appears to be a normal hyperlink. However, as soon as you click on that link, Google swaps out the target of that link to be a different one than the one that was displayed -- and that's where the link ends up taking you.

(In more technical terms: Google appears to be using JavaScript's onClick event to cancel the navigation to the original href; then replaces the original href with the new href; and then proceeds to navigate to that new destination.)

For example, one of the results when I searched Google just now for "new wireless service" was https://www.verizon.com/plans/unlimited. However, clicking on that link actually navigated me to an URL starting with https://ad.doubleclick.net/searchads/link/click?lid=... . 

You can actually see the swapped-in hyperlink by using the browser's back button to return to the Google search results page, and mousing over the clicked hyperlink again. You'll see that preview of the destination URL for that same link has now changed! (The same happens if you right-click on the target link, then cancel the right-click context menu, and hover over the link again.)

My family members from time to time actually want to click on a sponsored Google search result, and have the navigation work properly. However, I don't want to whitelist the entire "ad.doubleclick.net" domain at my Pi-hole, since that would likely result in a lot more distracting ads being rendered as we use the web. 

I searched for a Firefox add-on which would prevent hyperlink URL destinations being changed from the preview URL that was shown prior to clicking on them, but couldn't find one that seemed trustworthy. 

(I do already run EFF's Privacy Badger add-on, which purports to include this particular functionality; but for whatever reason, it isn't working for me in Firefox as of the time of this post. Possibly Google has recently updated the mechanism that they use to perform their URL-swapping in Firefox; and Privacy Badger hasn't yet been correspondingly updated.)

Workaround / Solution

To my surprise, Google doesn't seem to perform their URL replacement when the search link is activated by the Return key, instead of by a click! Therefore, a crude-but-effective workaround is as follows, when looking at a page of Google search results:

  1. Hit the Tab key until the desired link has the focus. 
    • (Alternatively, double-click a word of text near the target link to select it; then press Tab and/or Shift-Tab from there until the desired link has the focus.)
  2. Press Return to activate the link.

This workaround does have the advantage of not needing any browser add-on to work!

When doing this, Google (apparently) doesn't have any JavaScript in place to hijack the link destination; the client browser navigates directly to the actual URL shown in the browser's preview, without being redirected through ad.doubleclick.net (or any other domain).

Monday, December 24, 2007

C#/Java/C++: Combining a variable assignment and evaluation

Pop Quiz! C#/Java/C++/Javascript/(probably others, too!) programmers, off the top of your head, what's the result of evaluating a variable assignment? In other words, to take a specific example, what is the output of this Java code snippet:

int n;
System.out.println(n = 50);
(Feel free to substitute in Console.Out.WriteLine (C#) or good old printf (C++) for the System.out.println in that snippet, depending on your language of choice.)

The answer is: 50. In Java and the other languages mentioned, the result of the evaluation of a variable assignment is the value being assigned.

I just came across this construct myself for the first time while I recently was doing a code review of a colleague's Java code. Somehow, prior to that code review, I had managed to go for over a decade of developing in these various languages without running across this!

The reason I hasn't run across this before may have to do with code readability. Doing two different things at once (in this case, a combined variable assignment and evaluation) often isn't very good for code readability (and therefore for ease of maintainability); in the general case, then, it probably makes the most sense for the variable assignment and evaluation to just be separated into two separate lines of code.

However, as my colleague's code demonstrated, combining an assignment with an evaluation can be useful when setting up a loop where the same statement is executed to assign a value to the loop variable both before the loop starts, and on each subsequent iteration of the loop. For example, here's a Java example of reading data from an input file a line at a time, using a java.io.BufferedReader:

String inputLine;
while ((inputLine = bufferedReader.readLine()) != null)
{
    // Do something with inputLine...
}

The while statement in this case combines the assignment of the variable inputLine to the line of text read from the BufferedReader, with the check to stop looping when inputLine is null.

In the past, I've written the same logic in this manner:

String inputLine = bufferedReader.readLine();
while (inputLine != null)
{
    // Do something with inputLine...

    inputLine = bufferedReader.readLine();
}

I had always been kind of annoyed over the need to repeat the assignment (inputLine = bufferedReader.readLine()) in two different places.

For writing loops like this in the future, I'll have to think more about whether the gain in code brevity (and debatably, in elegance) from using the former approach (the combined assignment/evaluation in the while statement) is worth the potential cost for future maintainers in the readability of the code.

Sunday, September 09, 2007

Schneider's Eleven - New skin for Windows Media Player

Over the past week, I've created a new skin (theme) for Windows Media Player. I call it "Schneider's Eleven" -- more on that below.

For a while now, I've wanted a skin for Windows Media Player that meets the following two criteria:

  1. Unobtrusive. I wanted something that I could leave visible in a corner of the screen all the time which wouldn't draw my eye with scrolling text or other graphical animations while I'm concentrating on other tasks.
  2. Informative. Many "minimal" skins do not display the album, artist, and track name of the currently playing track, or alternate between displaying those values; I wanted a skin where all of those values would be visible at a glance.

None of the default skins included with Windows Media Player meet these criteria, nor does the main Windows Media Player 11 interface in its "compact mode". I'd poked around on several occasions for such a skin, but I couldn't find one on Microsoft's official skins site or elsewhere.

I did a little reading about Windows Media Player skins, and found that WMP skin files -- files with a .wmz extension located in the Program Files\Windows Media Player\Skins folder -- are actually just renamed .zip files. This means that it is possible to inspect the implementation of any existing skin by uncompressing and looking at the files in the skin's archive.

I had previously assumed that skin files were created using some difficult-to-learn proprietary language, but as I found by looking at existing skins on my system, I found that the layout and behavior of WMP skins are defined in standard XML and Javascript code. Once I discovered that, I set out to create my own skin that would have the design and behavior that I wanted.

I was able to implement the new skin by learning by example from the skins already on my system. Between inspection of the source code of the Microsoft skin "9SeriesDefault" (internally named "Corona") and a skin I had previously downloaded in my earlier search for a suitable skin named Basic6, I was able to write 95% of the implementation for my new skin; the remainder I was able to get from Microsoft's skinning reference at MSDN.

The UI layout of the new skin was inspired by the TrackInfo pane of the Basic 6 skin, written by Richard Kohut, which featured display of all of the information I wanted (album, artist, track name), plus display of the album art for the album, a cool touch. For the play controls of the UI, I created a reduced-size version of the standard Windows Media Player 11 interface -- thus the name for the new skin, "Schneider's Eleven".

Schneider's Eleven UI

To my surprise, the technique for displaying the album art in the skin doesn't appear to be documented anywhere in the MSDN online documentation -- or anywhere else on the WWW that I could find! The key is setting the background image property of a subview element in the skin to the constant string value "WMPImage_AlbumArtSmall". At the time of this writing there is only a single result returned in a Google search for WMPImage_AlbumArtSmall (and that result is a long discussion thread in Japanese which I can't read)! As I mentioned, I find this really surprising -- is there another way to put album art into a skin; or else maybe the technique for putting album art in a WMP skin is still little-known, or maybe there just isn't a lot of discussion of WMP skinning out there? I'm not sure at this point. In any event, if you are a skinner looking to put album art into your skin, by all means download a copy of Schneider's Eleven and take a look at the source to see how I did it.

Doing the same search in Google News currently returns 4 results, one of which is a post to microsoft.public.windowsmedia.player.skins by "Stevie BM" describing a technique to work around an issue with album art not being sized properly when displayed in a skin, which I took advantage of in my skin. Thanks Stevie! It's always very cool when someone, having found a solution to a tricky problem, takes the time to follow up and let the community know about the solution, rather than just silently implementing the solution without letting anyone else know about it.

If you'd like to download a copy of the Schneider's Eleven skin, follow that link to my web site for the download link. Feedback on the skin would be welcome!

Friday, September 29, 2006

Browser window relative screen position

This morning, I noticed an issue with a particular popup browser window that my development team's browser-based application opens. With the application running in an Internet Explorer instance in the right monitor on my dual-monitor dev system, when the popup window was opened, it appeared in the center of the left monitor.

I decided to change this behavior to have the new popup window appear on top of the parent window, to make the appearance of the new window more obvious. I knew that the location of the new window could be specified relative to the screen in parameter 3 of the Javascript window.open(URL, windowName, windowFeatures) call in IE using the top and left attributes, like:

window.open('http://localhost/', 'newWindow', 'top=200,left=300')

What I wanted to do was supply top and left attribute values based on an offset of the screen position of the parent browser window. However, it wasn't clear to me how to get the parent window position.

Google searches such as javascript window screen position weren't much help -- no obvious solutions to my question among the first several pages returned. Searching on "location" instead of "position" was even less help, since the results included a lot of keyword collisions with the location (URL) property of the window object.

Eventually I did come up with a quirksmode.org page with the answer I was looking for by searching on "screenX", the attribute used with window.open on Navigator/Mozilla/Firefox to specify the horizontal position of a new window. The solution: In IE, the screenLeft and screenTop properties give you the horizontal and vertical positions of the browser window relative to the screen, respectively. (screenX and screenY are apparentely the equivalent properties in Mozilla, although I haven't tested this myself.)

On a page with frames, self.screenLeft will return the horizontal position of the current frame relative to the screen, whereas self.screenleft will give you the position of the browser window relative to the screen.

Interestingly, support for the screenLeft and screenTop properties apparently was first introduced in Internet Explorer 5. (This is why my copy of The Flamingo was no help in finding the solution -- my old copy is only current through IE 4.) This seems to indicate that in IE 4, you could set the position of a window (either initially in the window.open() call, or later via the window.moveTo() method), but there was no way to get the position of the window!

In any case, I was able to solve my original problem of the IE popup window appearing in the wrong place by getting the screen coordinates of the parent window using calls to top.screenLeft and top.screenTop, then adding a delta to each of those values and using the adjusted values in the call to window.open().