Add HTTP Header speculation rules

Author: tunetheweb

dist/performance.js

@@ -3,6 +3,12 @@
 const response_bodies = $WPT_BODIES;
 const script_response_bodies = $WPT_BODIES.filter(body => body.type === 'Script');
 
+function fetchWithTimeout(url) {
+  var controller = new AbortController();
+  setTimeout(() => {controller.abort()}, 5000);
+  return fetch(url, {signal: controller.signal});
+}
+
 function getRawHtmlDocument() {
     let rawHtml;
     if (response_bodies.length > 0) {
@@ -324,17 +330,53 @@ function getLcpResponseObject(lcpUrl) {
     return responseObject;
 }
 
-function getSpeculationRules() {
-    return Array.from(document.querySelectorAll('script[type=speculationrules]')).map(script => {
-        try {
-            return JSON.parse(script.innerHTML);
-        } catch (error) {
-            return null;
-        }
-    });
+function getParameterCaseInsensitive(object, key) {
+  return object[Object.keys(object).find(k => k.toLowerCase() === key.toLowerCase())];
+}
+
+async function getSpeculationRules() {
+  // Get rules from the HTML
+  const htmlRules = Array.from(document.querySelectorAll('script[type=speculationrules]')).map(script => {
+      try {
+          return JSON.parse(script.innerHTML);
+      } catch (error) {
+          return null;
+      }
+  });
+
+  // Get rules from the HTTP requests
+  const documentRequests = [$WPT_REQUESTS.find( req => req.url === document.location.href)] || [];
+  const httpRules = await Promise.all(documentRequests.map(async request => {
+    try {
+      const speculationRulesHeaders = getParameterCaseInsensitive(request.response_headers, 'Speculation-Rules');
+      if (speculationRulesHeaders) {
+        return await Promise.all(speculationRulesHeaders.split(',').map(async (speculationRuleLocation) => {
+          try {
+            let url = decodeURI(speculationRuleLocation).slice(1, -1);
+            if (url.startsWith('/')) {
+              url = document.location.origin + url;
+            } else if (!url.startsWith('http')) {
+              url = document.location.href + url;
+            }
+            const response = await fetchWithTimeout(url);
+            const body = await response.text();
+            return {url: speculationRuleLocation, rule: JSON.parse(body)};
+          } catch(error) {
+            return {error};
+          }
+        }));
+      } else {
+        return [];
+      }
+    } catch(error) {
+      return {error};
+    };
+  }));
+
+  return {htmlRules: htmlRules, httpHeaderRules: httpRules};
 }
 
-return Promise.all([getLcpElement()]).then(([lcp_elem_stats]) => {
+return Promise.all([getLcpElement(), getSpeculationRules()]).then(([lcp_elem_stats, speculation_rules]) => {
     const lcpUrl = lcp_elem_stats.url;
     const rawDoc = getRawHtmlDocument();
     // Start out with true, only if LCP element is an external resource will we eval & potentially set to false.
@@ -366,7 +408,7 @@ return Promise.all([getLcpElement()]).then(([lcp_elem_stats]) => {
         lcp_preload: lcpPreload,
         web_vitals_js: getWebVitalsJS(),
         gaming_metrics: gamingMetrics,
-        speculation_rules: getSpeculationRules(),
+        speculation_rules: speculation_rules,
     };
 }).catch(error => {
     return {error};