Category Archives: browsers

Blogposts on blog.futtta.be about browsers (Firefox, Chrome, Safari, Opera and good ole Internet Explorer).

Thanks for reminding me about AdBlock Plus Google!

So Google removed AdBlock Plus from the Google Play Android store. That is their prerogative, off course, but it does confirm they’re not the cool technology-centric search engine everyone once thought they were. It’s kind of ironic that in December 2011 AdBlock Plus by default enabled the display of “acceptable” ads, a move that seemed to be an attempt to appease (or please) Google.

But whatever way you look at this, Google’s core business (as is Facebook’s) is displaying ads. Sure they try to do that in an intelligent manner. And sure, they have some cool technologies (App Engine, Android, Chrome, …). But at the end of the day they want us to see and click on ads. That makes Google a media company. But whereas traditional media have -at least the notion- of a wall between their editorial and advertising departments, editorial independence does not seem to exist over at Google.

I don’t like particularly like ads, I don’t like widgets snooping on my web-whereabouts and I definitively don’t like Google’s advertising department dictating what applications the editorial team in charge of Google Play should remove. So today I installed AdBlock Plus on all my devices. Maybe you should too?

Introduction to Adblock Plus

Watch this video on YouTube or on Easy Youtube.

Multi-lingual WordPress the Easy Way

Imagine you run WordPress with English as default language, but some posts are in another language. Dutch, maybe? Up until a couple of months ago, you wouldn’t really notice anything about that setup. Google might be slightly confused, but us bloggers aren’t really into SEO anyhow, no? But with the release Safari 5.1, Firefox 16 and especially Internet Explorer 10, support for CSS Hyphenation became (somewhat) widely available and if your theme (WordPress TwentyTwelve or its performance-optimized 2012.FFWD child theme for example) has support for in the CSS, your hyphenation would yield weird results because of the fact that the browser uses the language attribute in the HTML to decide which dictionary to use.

The solution, if your theme is HTML5, is to add the lang-attribute to the article-tag if you have something to check the language with. In my case I just had to copy TwentyTwelve’s content.php and change line 11 into:

<article id="post-<?php the_ID(); ?>" <?php if (in_category('lang:nl')) { ?>lang="nl" <?php } ?><?php post_class(); ?>>

A real simple hack indeed; I check if the article has category “lang:nl” attached to it (which I already used) and set the language-attribute with the correct value if it does. Hyphenation now works for Dutch blogposts and I guess Google will be happier as well that way?

Do background-images lazy-load with display:none?

So, do background-images lazy-load with display:none? I did a quick test by loading this testpage created by Steve Souders on webpagetest.org. These are the results:

Conclusion: don’t rely on setting display:none on background-images to have them lazy load.

CSP: doing unsafe-inline the Firefox-way

A couple of weeks ago I sobbed because of the lack of support for “unsafe-inline” in Firefox. There’s some Mozillians working on that (for CSS, at least), but given the release-train, that’ll probably only appear around Firefox 19. While perusing CSP-related tickets in Bugzilla however, I came across an interesting comment:

Firefox expects “options inline-script eval-script” instead of “script-src ‘unsafe-inline’ ‘unsafe-eval’” which it should be per spec. Also, Firefox expects “xhr-src” instead of “connect-src”.

Come again? So I can tell Firefox to execute inline script even without support for CSP 1.0 after all? I opened up my development-version of WP DoNotTrack to rework the “proof of concept”-code into this:

function wp_donottrack_csp() {
 global $listmode;
 if ($listmode==="1")
  $whitelist=wp_donottrack_getWhiteList(true);
  $csp="default-src 'self' 'unsafe-inline' ";

  if (is_array($whitelist)) {
   foreach ($whitelist as $white) {
    $csp.=" *.".$white;
   }
  }

 // old-style options inline-script for firefox
 $csp.="; options inline-script;";

 header("X-Content-Security-Policy: " . $csp);
 header("Content-Security-Policy: ". $csp);

 // needed for chrome, but safari 5 (latest version on windows) might be broken?!
 header("X-WebKit-CSP: " . $csp);
 }
}

Based on limited testing, it indeed seems to work great this way. So maybe -if this also turns out to work in IE10 and on Safari for Windows- a next version of WP DoNotTrack can ship with CSP-support after all?

Firefox Mobile 16 & 17: continuous improvements

I updated Firefox Mobile Beta on my Samsung Galaxy SII a couple of days ago to version 16 and out of curiosity I participated in the pissing-contest which is html5test.com. It scored a whopping 372 points, which apparently makes it the best mobile browser (for now).

More important, as it is an immediate and noticeable advantage: reader mode. Reader mode,  as seen in the screenshots on the right, allows me see articles on e.g. the chaotic, non-responsive dewereldmorgen.be in a non-crowded context which is optimal for reading the article.

I also installed the latest Firefox Mobile Aurora (version 17) and I’m pretty pleased to see support for iFrame sandboxing (which would up the html5test.com score to 377) and integration with a.o. the upcoming Firefox Marketplace (which will also be core to Firefox OS).

So yeah, for me Firefox Mobile remains the best mobile browser no-one uses.

Content Security Policy; Great! or Wait?

A couple of days ago I had another look at Content Security Policy, a technology that allows a site to tell a browser resources are allowed to be loaded to protect against XSS and some other types of web application vulnerabilities. CSP was originally devised by the Firefoxians, but is in the process of being standardized by the W3C with support in Firefox, Chrome, Safari and even the upcoming Internet Explorer 10.

Great!
The functionality offered by CSP (blocking requests that are not allowed) is pretty close to what WP DoNotTrack tries to do, so I decided I’d try to integrate CSP in my plugin, based on the following assumptions:

  • CSP-mode will only work for WP DoNotTrack if it is configured to use a whitelist
  • As most WordPress+plugins installations are bound to have pages with at least inline JavaScript and/or style, I have to add “unsafe-inline” to allow those to continue to work (which indeed limits the level of protection against XSS-attacks)
  • Given that a lot (most?) WordPress installations implement WP Super Cache of W3 Total Cache, it will -at least in a first stage- only kick in if WP  DoNotTrack is configured to filter unconditionally
  • Ideally the JavaScript-based component of WP DoNotTrack would “see” that CSP was activated and would not perform those nifty JavaScript AOP trickery

The “proof of concept”-quality code I ended up adding to wp-donottrack.php was pretty simple:

function wp_donottrack_csp() {
 global $listmode;
 if ($listmode==="1") {
  $whitelist=wp_donottrack_getWhiteList(true);
  $csp="default-src 'self' 'unsafe-inline'";

  if (is_array($whitelist)) {
   foreach ($whitelist as $white) {
    $csp.=" *.".$white;
   }
  }

  header("X-Content-Security-Policy: " . $csp); //FF & MSIE10
  header("Content-Security-Policy: ". $csp); //new standard
  header("X-WebKit-CSP: " . $csp); //chrome & safari
 }
}

add_action('init', 'wp_donottrack_csp', 10, 0);

Wait?
With this code on my testblog I started playing around in a couple of browsers. Based on that experience I found the following limitations:

So in this particular context (and specifically the absolute need for “unsafe-inline”), I’ve decided to hold off implementing CSP (I might implement iFrame sandboxing as support for that is coming with IE10 and will probably also land in Firefox 17). But if you have full control over a particular website or -application (meaning you can remove all inline JavaScript and CSS and all instances of evals in insourced JavaScript) and you want to harden your installation to stop cross-site scripting, you really should start thinking about implementing CSP (as Twitter seems to have done already)!

My failed Firefox Mobile Private Browsing AddOn experiment

Nope, there’s no Private Browsing in my favourite mobile browser (yet). But as I have Firefox Sync activated between my 3 Firefox instances (winXP@work, Ubuntu-netbook@home and on my SGS2), I very much want to avoid syncing some of my browsing history over to my work-laptop. Developing addons for Firefox has become very easy and the JavaScript API does include access to the Private Browsing features, I quickly wrote this little addon to switch between Private and Non-Private browsing via the context menu using the online addon-builder:

var pb = require("private-browsing");
var myItem = require("context-menu").Item({
label: "Start Private Browsing",
contentScript: 'self.on("click", self.postMessage);',
onMessage: function () {
 if (pb.isActive) {
  pb.deactivate();
  this.label = "Start Private Browsing";
 } else {
  pb.activate();
  this.label = "Exit Private Browsing";
 }
}
});

All seemed great on my desktop Firefox, but it doesn’t work on Firefox Mobile. I could have known, if only I had read the documentation a bit more carefully: the context-menu and private-browsing modules aren’t functional on Firefox Mobile yet. Guess we’ll have to be good boys (and girls) while browsing on synced Firefox Mobile. But instead we can play around with the online Firefox addon-builder, that’s (another kind of) fun as well!