Web linking for frontend security and speed
Techniques for securely improving page performance.
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
preload. While all of these techniques improve page load performance, we will focus on
Prefetch and Preload
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
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?
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
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
AS attribute provides a method to associate policies on a per-resource type basis.