Table of Contents for
Security and Frontend Performance

Version ebook / Retour

Cover image for bash Cookbook, 2nd Edition Security and Frontend Performance by Sabrina Burney Published by O'Reilly Media, Inc., 2017
  1. nav
  2. Cover
  3. Free ebooks and reports
  4. Security and Frontend Performance
  5. Security and Frontend Performance
  6. 1. Understanding the Problem
  7. 2. HTTP Strict-Transport-Security
  8. 3. iFrame and Content‑Security‑Policy
  9. 4. Web Linking
  10. 5. Obfuscation
  11. 6. Service Workers: An Introduction
  12. 7. Service Workers: Analytics Monitoring
  13. 8. Service Workers: Control Third Party Content
  14. 9. Service Workers: Other Applications
  15. 10. Summary
  16. About the Authors

Chapter 4. Web Linking

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 Example 4-1, 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 4-1. <link> tag and header
<link rel="prefetch" href="/dir/common.js">
Link: </dir/common.js>; rel=prefetch

The preload technique, as shown in Example 4-2, 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 4-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 Example 4-3 along with the Content-Security-Policy technique in Example 4-4.

Example 4-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 4-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.