Content-Security-Policy HTTP Header

There’s yet another new means to ‘help’ client User-Agents with preventing XSS on your websites.

In it’s simplest form you can simply use the following HTTP Header(s), the second one is for earlier versions of Webkit (Chrome/Safari):

Content-Security-Policy: default-src 'self'
Webkit-CSP: default-src 'self'

You can also add to the above to permit assets to load from other sources.
For example, if you were to permit javascript files from example.com you could include:

Content-Security-Policy: default-src 'self'; script-src http://example.com

Additionally, while failures are noted in the client’s browser console (that most users are not aware of), you can have them sent back to your server by adding a ‘report-uri’ attribute with an appropriate handler:

Content-Security-Policy: default-src 'self'; report-uri http://example.com/csp-report.php

REFERENCES:

HTML5 speech input

Adding speech input to your webapp is much easier than it might first seem.
This is part of the proposed HTML5 enhancements to FORMS and is already implmented in some browsers.

Google Chrome (WebKit 534.24) added this in version 11 in April 2011.

XHTML compatible example:
<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" value="" />

NOTE:
In this example, ‘x-webkit-speech’ is the proprietary attribute used by Google Chrome (WebKit). ‘speech’ is the expected HTML5 attribute when it is finalized.

REFERENCES:

Defining word-break and word-wrap in CSS

I recently found a case where WebKit (Chromium, and Safari) was acting as if ‘overflow-x:visible;‘ was set in cases where text could not be wrapped inside a DIV due to a lack of spaces or hyphenation as it was a java stack trace. In this case I had to explicitly set the ‘word-wrap:break-word;‘ attribute for the problematic DIV.


.breakword { word-wrap: break-word; }

Also, for Unicode languages where there are other rules to complex to describe here…

.wordbreak { word-break: keep-all; }

Prevent resizing of HTML textarea in browser

Newer versions of Webkit based browsers (Safari & Chrome) as well as Firefox now allow users to resize HTML <textarea> elements by default. This can have unpredictable results on your user interfaces. Thankfully, you need only add a simple CSS attribute to prevent this newly default behavior.

textarea {resize:none;}

REFERENCES:

Making HTML text unselectable with CSS

There are often circumstances where you do not want users to select certain text on your page in order to maintain a facade… rounded buttons for example.

In most browsers, this can be achieved using CSS (much of it proprietary below), For IE and Opera, you will need to use the unselectable expando property of the element you wish to be unselectable.

You can set this using an attribute in HTML:
<div id="foo" unselectable="on" class="unselectable">...</div>
<style type="text/css">
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
</style>

Sadly this property isn’t inherited, meaning you have to put an attribute in the start tag of every element inside the

. If this is a problem, you could instead use JavaScript to do this recursively for an element’s descendants:

function makeUnselectable(node) {
if (node.nodeType == 1) {
node.unselectable = true;
}
var child = node.firstChild;
while (child) {
makeUnselectable(child);
child = child.nextSibling;
}
}
makeUnselectable(document.getElementById("foo"));

REFERENCES:

Safari/WebKit background flash on page load

I was recently working on a website that had a black/dark background and while the typical suite of browsers that I test with seemed fine, Safari showed an annoying white flash when the page was loading.

Some research into this lead to a startling discovery as I personally consider this a bug in the Safari browser’s rendering. It’s often referred to as FOUC (Flash of Unstyled Content). There are several methods that I’ve seen, most employ JavaScript or ordering of CSS files to hide the <body> prior to the page completely loading.

The simplest fix, while not elegant, is to an explicit ‘style’ attribute on the <html> tag.

<html style=”background-color:black;”>

Reference:

Browser Rendering Engines

This is knowledge that is generally “tribal” by nature, reserved to only the nerdiest web developers, recently I was asked to name these and failed. Here’s the bounty of my research.

Gecko is generally considered to be the second most-popular layout engine on the Web, after Trident (used by Internet Explorer for Windows since version 4), and followed by WebCore (used by Safari) and Presto (used by Opera).

Gecko is the open source, free software web browser layout engine used in all Mozilla-branded software and its derivatives, including later Netscape browser releases. Written in C++ and licensed under MPL/GPL/LGPL triple license, Gecko is designed to support open Internet standards. Originally created by Netscape Communications Corporation, its development is now overseen by the Mozilla Foundation.

Trident (also known as MSHTML) is the name of the layout engine for the Microsoft Windows version of Internet Explorer. It was first introduced with the release of Internet Explorer version 4 in October 1997, has been steadily upgraded and remains in use today. For version 7 of Internet Explorer, Microsoft made significant changes to the Trident layout engine to improve compliance with web standards and add support for new technologies. Despite these changes, Trident remains significantly less compliant than competing layout engines Gecko, Presto and WebCore.

Presto is the name of the current (Opera 9 series) layout engine for the Opera web browser developed by Opera Software. It was first released (following several public betas and technical previews) on January 28, 2003 in Opera 7.0 for Windows. Presto replaced the Elektra engine used in versions 4–6 of Opera. Presto differs from Elektra in that it is dynamic: the page or parts of it can be re-rendered in response to DOM and script events. The Presto layout engine is only available as a part of Opera browser or related products. The source or binary (DLL) forms of the engine are not publicly available. Subsequent releases have seen a number of bugs fixed and optimizations to improve the speed of the ECMAScript (“JavaScript“) engine.

Tasman is the name of the layout engine introduced with version 5 of Internet Explorer for Mac. Tasman was an attempt to improve support for web standards, as defined by the World Wide Web Consortium. At the time of its release, Tasman was seen as the layout engine with the best support for web standards such as HTML and CSS. Unfortunately, MSIE for Mac is no longer supported, but newer versions of Tasman are incorporated in some other current Microsoft products.

Cheers!