Web linking for frontend security and speed
Techniques for securely improving page performance.
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.
Learn faster. Dig deeper. See farther.
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.