“Referrer-Policy” HTTP Header

A relatively new HTTP Header that is supported by most modern browsers (except MSIE) is the “Referrer-Policy” header. There have been previous attempts to implement similar protections through use of the ‘rel’ (or ‘rev’) attributes on links to external websites. The latest approach takes a different approach and prevents leaking of internal URLs, and in some cases parameters, to external websites. This is important from a security perspective as you might maintain some sensitive information in your page urls, that would otherwise be inadvertently shared with an external website.

Clearly, you’ll need to determine your own level of security based upon your needs. Example: ‘no-referrer’ would be the most strict and would prevent the browser from sending the ‘Referer'(sic) header even to your own websites pages.

Example header values:

Referrer-Policy: no-referrer
Referrer-Policy: no-referrer-when-downgrade
Referrer-Policy: origin
Referrer-Policy: origin-when-cross-origin
Referrer-Policy: same-origin
Referrer-Policy: strict-origin
Referrer-Policy: strict-origin-when-cross-origin
Referrer-Policy: unsafe-url

Implementation can be accomplished in many ways, the most simple being and addition to your HTTP server configuration similar to the one shown below for Apache 2.x:

Header always set Referrer-Policy strict-origin

REFERENCES:

HTML5 Link Prefetching

Link prefetching is used to identify a resource that might be required by the next navigation, and that the user agent SHOULD fetch, such that the user agent can deliver a faster response once the resource is requested in the future.


<link rel="prefetch" href="http://www.example.com/images/sprite.png" />

<link rel="prefetch" href="/images/sprite.png" />

Supported in:

  • MSIE 11+/Edge
  • Firefox 3.5+ (for HTTPS)
  • Chrome
  • Opera

REFERENCES:

HTML5 preconnect

In addition to dns-prefetch, you can take browser performance one step further by actually creating a new connection to a resource.

By initiating an early connection, which includes the DNS lookup, TCP handshake, and optional TLS negotiation, you allow the user agent to mask the high latency costs of establishing a connection.

Supported in:

  • Firefox 39+ (Firefox 41 for crossorigin)
  • Chrome 46+
  • Opera


<link rel="preconnect" href="//example.com" />
<link rel="preconnect" href="//cdn.example.com" crossorigin />

REFERENCES:

HTML5 DNS prefetch

I often get into some fringe areas of micro-optimizations of website performance, DNS prefetching is another one of those topics.

To understand how this can help, you must first understand the underlying concepts that are used within the communications used to build your web page.

The first of these is a “DNS Lookup”, where the domain name (www.example.com) is converted into a numerical address, the IP address of the server that contains the file(s).

In many websites, content is included from other domains for performance or security purposes.

When the domain names are known in advance, this approach can save time on the connection as the lookup can fetched in advance, before it is required on the page to retrieve assets.

This can be particularly useful for users with slow connections, such as those on mobile browsers.


<link rel="dns-prefetch" href="//www.example.com" />

Supported in:

  • MSIE9+ (MSIE10+ as dns-prefetch)/Edge
  • Firefox
  • Chrome
  • Safari
  • Opera

REFERENCES:

Website testing with SortSite

SortSite is a popular desktop software for testing of web applications for broken links, browser compatibility, accessibility and common spelling errors. It is also available as a web application known as “OnDemand“.

You can generate a free sample test of your website at:
http://try.powermapper.com/Demo/SortSite

REFERENCES:

Preventing Blackberry browser from messing up your UI

I’ve previously given steps to prevent phone numbers (and other elements) from being automatically reformatted by Skype Toolbar and IOS Safari, there is still a small segment of the user population that uses Blackberry devices that can similarly benefit from a little code.

The following stops auto detection and formatting of phone and email addresses on devices with the BlackBerry Browser.

HTML:

<meta http-equiv="x-rim-auto-match" content="none" />

WML:

<meta name="x-rim-auto-match" http-equiv="x-rim-auto-match" forua="true" content="none" />

REFERENCES:

opensearchdescription.xml

OpenSearch is a relatively obscure topic that I’ve only crossed a few times, here is the premise.

A simple tag can be added to your content, in this case HTML, but a feed can also contain this element.

<link rel="search" href="http://www.giantgeek.com/opensearchdescription.xml" type="application/opensearchdescription+xml" title="giantgeek.com" />

That link refers to a file that resembles the one below, in it you can specify the URL to the search facilities on a website, or as in the case below, use the parameters for a Google search of your website.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE OpenSearchDescription>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>GiantGeek.com</ShortName>
<Description>Use Google to search our web site.</Description>
<InputEncoding>UTF-8</InputEncoding>
<Tags>giantgeek skotfred</Tags>
<Contact>[email protected]</Contact>
<Image width="16" height="16" type="image/x-icon">http://www.giantgeek.com/favicon.ico</Image>
<!-- NOTE: this uses Google, you can give your own search url instead -->
<Url type="text/html" method="GET" template="http://www.google.com/search?q=site:giantgeek.com {searchTerms}"/>
<Url type="application/opensearchdescription+xml" rel="self" template="http://www.giantgeek.com/opensearchdescription.xml"/>
</OpenSearchDescription>

Many modern browsers that provide a ‘search box’ in the browser interface, can then add the capability to perform a search of your website even when the user is not there already.

REFERENCES and Additional Reading:

Conditional Comments cause CSS to block

Here’s an odd one…. I’ve found that if you use the common method of using Conditional Comments to separate MSIE specific CSS, you’ve likely added a performance problem without knowing it… that is, in addition to the network connection and time required for the different CSS files.

It turns out that the standard use of this approach blocks the other downloads until the main CSS is loaded.

The solution is both simple and painless to implement…. a quick solution to this is to add an empty conditional comment early on, that is, before the main content (CSS) is loaded.. This works for all approaches, such as those where comments surround the <body> or various <link>, <style> or <script> tags.

UPDATE:
Personally, I like to do this immediately after the DOCTYPE and before the <html> tag. Additionally, since IE10 dropped support for this technique, I’ll just target IE 9 and below for any developer that comes after me.


<!DOCTYPE html>
<!--[if lte IE 9]><![endif]-->
<html lang="en">
...

REFERENCES:

XFN (XHTML Friends Network)

A big part of Web 2.0 (over the last decade) has been a move toward the semantic internet, whereas each page is representative of data and it’s relationship… we are, in essence, “training” the internet itself.

XFN markup allows you to identify your relationships to other individuals on the links of your website or blog.

HTML4:
<head profile="http://gmpg.org/xfn/11">

HTML5: (removes the ‘profile’ attribute on <head> as such the updated convention is:
<link rel="profile" href="http://gmpg.org/xfn/11" />

Use in content:
<a href="http://www.skotfred.com/" rel="me">My other site</a>

REFERENCES:

REF:

http://reference.sitepoint.com/html/xfn

DNS Prefetching

DNS is much like a phone book for the internet. For each domain name (or subdomain like ‘www’), there is an IP address that resembles a phone number. Getting the matching number for each domain can take some time and make your site appear slow, particularly on mobile connections. Fortunately, you can pre-request this information and speed up your site in most cases.

To enable a domains DNS lookup to be performed in advance of the request, you can add a single line to the <head> section of your page.

<link rel="dns-prefetch" href="//giantgeek.com" />

If you want to explicitly turn on (or off) this behavior, you can add one of the following, or their HTTP Header equivalents:

<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="x-dns-prefetch-control" content="off" />

This is supported in all modern browsers:

  • Firefox 3.5+
  • Safari 5.0+
  • MSIE 9.0+

If should be noted that a similar method can be used to prefetch as page, but I will save that for a different article:
<link rel="prefetch" href="http://www.skotfred.com/" />

REFERENCES: