Replacing target=”_blank” for Strict XHTML using JQuery (redux)

Some time ago, I provided a simple JQuery solution for replacing target="_blank" when writing Strict XHTML. However, one commenter recently pointed out that my solution does not work if the rel attribute contains more than one value e.g. rel="external nofollow"

Well, JQuery to the rescue again. A very slight modification to the Attribute Filter fixes this issue. The code now reads:

$(function() {
	$('a[rel*=external]').click( function() {
		window.open(this.href);
		return false;
	});
});

Notice the asterisk. This matches attributes that contain a certain value, as explained in the JQuery docs.

However, this isn’t the full redux. Thanks to the power of JQuery, we can identify external links without the need for the rel="external" attribute at all.

Assuming that all internal links are relative e.g. href="/contact", we can simply search for all hyperlinks whose anchor contains a fully qualified url, or more precisely starts with http e.g. href="http://some.site.com".

The final code now looks like this:

$(function() {
	$('a[href^=http]').click( function() {
		window.open(this.href);
		return false;
	});
});

And that’s the power of JQuery

Tags: ,

13 Comments

Woody Gilk commented on March 3rd, 2009 at 7:55 pm

There is one potential pitfall here, and that is if you site generates complete URLs, or if you use a complete URL to switch to HTTPS/HTTP. My only other recommendation would be to use “*=://” instead, as that would capture non-http(s) links as well. However, that be _less_ correct than your method, depending on what other types of resources you link to (RSS, for example).

Alun commented on March 5th, 2009 at 2:37 pm

forgive my ignorance but what does rel external do? Am I right to assume that it signals that the link is to an external site but does that mean that the browser is supposed to respect the links and open in a new window. I’m guessing not. So if a customer wants those links to open in a new window this javascript will allow that. How do you cater for people without javascript? Or is this just something that you cannot implement for non js users if you adhere to the strict DTD?

badlyDrawnToy commented on March 5th, 2009 at 4:32 pm

@Alun, A few good questions there. Without javascript, or web browser preferences, Strict DTDs do not allow links to be opened in a new window, as this is seen as an event i.e. not part of the document structure.

rel=”external” doesn’t actually do anything. The rel attribute defines the ‘link type’. According to the W3C Spec:

‘User agents, search engines, etc. may interpret these link types in a variety of ways. For example, user agents may provide access to linked documents through a navigation bar.’

There is a list of recognised link types, such as stylesheet. ‘external’ is not a recognised link type.

http://www.w3.org/TR/REC-html40/types.html#type-links

I bet some of the new browsers will soon offer the facility to identify such links though.

[...] second solution I came across fixed some of the issues of the first by re‐writing the regex to account for [...]

zmpl commented on July 7th, 2009 at 3:11 am

Another possible attribute name is

xlink:show=”new”

from the XLink spec.

Justin Scheetz commented on August 21st, 2009 at 2:04 pm

This will search your entire page for external links and make them open in a new window. Try it out!

$(function() {
$(“a[href*='http://']:not([href*='"+location.hostname+"'])”).click( function() {
window.open(this.href);
return false;
});
});

Keith commented on April 16th, 2010 at 1:28 am

Man, that is sweet. Thanks!

Evan Carroll commented on May 6th, 2010 at 5:33 pm

This is my favorite solution to this problem, because it uses JQuery, and doesn’t assume the XHTML capable browser has implemented HTML4 “target” attribute on links.

Frank commented on June 15th, 2010 at 3:13 pm

Remember – if you happen to generate an external link or two dynamically after the page loads, the new link won’t “pop” into a new window – unless you bind the click event to the external links with live().

$(‘a[rel*=external]‘).live(‘click’, function(){
window.open($(this).attr(‘href’));
return false;
});

This ensures that any new elements are bound to the modified click event, too.

Andrew commented on July 5th, 2010 at 2:47 pm

I find this nice way to do it:

$(“a[rel*=external]“).attr( “target”, “_blank” );

It’s valid, since target is still an attribute in the DOM definition.

Brendan commented on September 3rd, 2010 at 4:45 pm

If you don’t want to use _target at all (cause it is kinda cheating, isn’t it?), this is what I did:

$(“a.pdf”).mouseover(function() {
pdfLink = this.href;
$(this).attr(“href”,”#”);
});

$(“a.pdf”).click(function() { window.open(pdfLink); });

$(“a.pdf”).mouseout(function() {
$(this).attr(“href”,pdfLink);
pdfLink = “”;
});

You pick your target (for me, it was things that linked out to PDFs, so I had a class called ‘pdf’). On mouseover, you put the href into a variable, you strip the href from the tag so that the link doesn’t open in the parent window as well. On click, you open that variable in the new window. On mouseout, put the variable back in the href.

Since we’re using JavaScript anyways, it’s a solution that avoids _target completely, and it allows for a functioning link if the user has JavaScript turned off.

Hope it helps someone!

Cheers,
Brendan

firebug commented on January 11th, 2011 at 2:41 pm

$(document).ready(function(){
$(‘a[rel*=external]‘).click(function(){
this.target= “_blank”;
});

Leonid Sharlandzhiev commented on April 21st, 2011 at 1:44 pm

@ Frank

The live() method has some flaws so you might need to use delegate() when working with arrays of elements like this:

$(‘.storycontent’).delegate(“a[href*='http://']:not([href*='"+location.hostname+"'])”, ‘click’, function() {
window.open($(this).attr(‘href’));
return false;
});

WordPress spam – is open source software a risk to your business?

I spent several hours last week rescuing two WordPress blogs (this blog and GastroGrrl) that had both been exploited, and had become victims of nefarious spam links.

h2. WordPress Exploit

The exploit was remarkably clever. Only when Google’s search engine spider (googlebot) visited the site, did it include spam links at the footer of the page. The links were only visible when looking at the text-only version of the cached copy in google’s index. The reason I’d found the spam, was because the keywords showed up in the Google Analytics application, and GastroGrrl was no longer appearing in google’s index.

The exploits were a couple of files found on the web server – disguised as jpg and png image files – that were in fact malicious PHP scripts. The scripts went as far as adding a new user to the database.

I had no alternative except to completely reinstall both the WordPress application, and also the database. Twice. Not much fun.

The installs were up to date, though a few months ago, I was late in updating the software. Yesterday, WordPress announced another security update to version 2.6.5.

Along with the release, was a note that the version number had skipped from 2.6.3 to 2.6.5 due to a malicious, fake version of a 2.6.4 release existing online. Several months ago, an official WordPress download was hacked on the official servers, and exploits were widely distributed.

h2. Open Source Risk

Keeping open source weblog applications, like WordPress, up-to-date, can become quite an administrative overhead for those that manage client blogs. As weblogs have moved into the business/PR/marketing domain, many of those managing the blogs are not fully-fledged system administrators with the knowledge on how to secure their database or unix file permissions. This is a potential risk to the customer.

The problem is not limited to WordPress. OSCommerce, Drupal, Joomla – all popular open source applications – have all had exploit issues. This is not so much because the applications are poorly coded; it’s the nature of open source – anyone can examine the code. The more popular the application, the more likely it will be exploited.

In my work with Stan, when we discuss client requirements, we consider 3rd party open source solutions versus bespoke development. Much of the decision is based on the specific requirements, but increasingly, we also consider the security risk, and maintenance overhead.

A simple example is the ubiquitous CAPTCHA utilities found on web forms. They are an obvious target for spammers, who want to leave spam comments on weblogs etc. Open source CAPTCHA’s became a popular way to thwart such spam, and have become increasingly complex as they face a continuing battle with the spammers. In my opinion, this problem has now gone full circle. When applying a CAPTCHA solution to a web form, I choose *not* to implement a standard, open-source solution, opting instead for my own, less complex, easier to exploit, implementation. It may be easier to exploit, but who is going to bother?

Open source is great. My day-to-day development utilises numerous open-source applications. However, when a customer’s reputation is at stake, and indeed our client relationship, one has to ask the question – is open source software a risk to your business?

Tags: , , ,

3 Comments

Simon Rumble commented on November 27th, 2008 at 8:55 pm

Erm, what has “open source” got to do with this? The bad guys target the biggest player, no matter where that comes from. If the most popular blog platform was Microsoft BlogPublish 2008, you can be sure it’d have just as many exploits and they would take longer to be patched.

PS: Remember you asked why I don’t have comments on my blog?

Howie commented on November 27th, 2008 at 11:28 pm

Simon. Yes you’re right. The biggest players are always going to be the main target. But when the biggest target also happens to publish it’s code to the world, it becomes a) easier to find an exploit b) easier to distribute exploited code and c) harder to address the issue afterwards

Of course, conversely, open source code can be scrutinised by legitimate users, and potential exploits removed. This tends to happen with code libraries more than applications.

The reality is that the majority of web applications and frameworks are open source, and it’s getting easier to deploy and integrate them without fully appreciating the consequences.

Ollie commented on March 9th, 2009 at 4:16 am

I think the both of you are right Simon & Howie. In my work as a software developer, i know how easy it is to exploit a piece of custom software once you have the code!

Yahoo Pipes and JQuery : Goodbye Same Origin Policy

I was chatting yesterday with my friend Simon about my somewhat late discovery of Yahoo! Pipes. I knew about it, I’d just never played with it. Pipes is ideal if you’re looking to create a mash-up from RSS feeds. Simon asked if Pipes were constrained by the Same Origin Policy whereby XHR requests are restricted to the domain serving the original page. I said I’d look into it.
more »

Tags: , , , , ,

Comments are closed.

Colophon

badlyDrawnToy is the blog of Howie Weiner, a freelance web developer, based in Manchester.

Howie specialises in Django, PHP and Java web application development.

This site is no longer updated. You can now follow Howie at howieweiner.co.uk

View Howie Weiner's profile on LinkedIn
View Howie's twitter feed

Tags