Chains
Chains (source: Unsplash)

Web linking is a technique aimed at improving the frontend user experience by delivering prioritized resources faster to the end user through the use of the Link header or <link> tag. The Link technique provides the rel attribute with various options including dns-prefetch, preconnect, prerender, prefetch, and preload. While all of these techniques improve page load performance, we will focus on prefetch and preload.

Prefetch and Preload

The prefetch technique, as shown in <link> tag and header, forces the browser to load low-priority resources that might be needed on the next page navigation. While this technique should be used with caution, we can see how the frontend user experience is improved with predetermined resource downloads and faster navigation page load.

Example 1-1. <link> tag and header
<link rel="prefetch" href="/dir/common.js">
Link: </dir/common.js>; rel=prefetch

The preload technique, as shown in <link> tag and header, forces the browser to load high-priority resources that are needed on current page navigation. This technique should be used for resources deemed critical (required for page render and major site functionality) to achieve an improved frontend user experience without degrading site performance.

Example 1-2. <link> tag and header
<link rel="preload" href="/dir/styles.css">
Link: </dir/styles.css>; rel=preload

By definition alone, these web linking techniques prove to be useful in improving overall page load from a frontend point of view.

Where Does Security Fit In?

The Link technique provides the AS attribute, which allows us to specify exactly what kind of resource the browser is loading:

AS
      media
      script
      style
      image
      worker
      embed
      object
      document
      font

The AS attribute provides a way to apply security policies on a per-resource type basis by using the Link technique in <link> tag and header along with the Content-Security-Policy technique in Content-Security-Policy header and tag.

Example 1-3. <link> tag and header
<link rel="preload" href="/dir/styles.css" as="style">
<link rel="prefetch" href="/dir/common.js" as="script">
Link: </dir/styles.css>; rel=preload; as=style
Link: </dir/common.js>; rel=prefetch; as=script
Example 1-4. Content-Security-Policy header and tag
<meta
      http-equiv="Content-Security-Policy" content="
      default-src 'self';
      style-src 'self' https://fonts.googleapis.com;
      script-src 'self' http://3rdparty.com"
>
Content-Security-Policy:
      default-src 'self’;
      style-src 'self' https://fonts.googleapis.com;
      script-src 'self' http://3rdparty.com

Last Thoughts

While pairing Link and Content-Security-Policy techniques, we are able to improve page delivery while applying distinct security measures to particular types of resources, such as JavaScript objects and stylesheet objects. All resources are not created equal so they should not be treated equal with a global security policy. Script type resources may require more security measures versus style type resources, and so, the AS attribute provides a method to associate policies on a per-resource type basis.

Article image: Chains (source: Unsplash).