Set Referer Header in Chrome 72+

app/scripts/background.js

@@ -1,11 +1,12 @@
-import {
-  YOUTUBE_EMBED_URL,
-  YOUTUBE_NOCOOKIE_EMBED_URL,
-} from "./helpers/constants";
 import { OnCommandEventHandler } from "./background/commands";
 import { InitMenus } from "./background/menus";
 import { OnInstalled, OnRuntimeMessage } from "./background/runtime";
-import { OnBeforeSendHeaders } from "./background/webRequest";
+import {
+  GetExtraInfoSpec,
+  GetFilter,
+  OnBeforeSendHeaders,
+  OnSendHeaders,
+} from "./background/webRequest";
 
 browser.browserAction.onClicked.addListener(() => {
   if (browser.runtime.openOptionsPage) {
@@ -27,10 +28,14 @@ browser.runtime.onMessage.addListener(OnRuntimeMessage);
 
 browser.webRequest.onBeforeSendHeaders.addListener(
   OnBeforeSendHeaders,
-  {
-    urls: [YOUTUBE_EMBED_URL + "*", YOUTUBE_NOCOOKIE_EMBED_URL + "*"],
-  },
-  ["blocking", "requestHeaders"]
+  GetFilter("onBeforeSendHeaders"),
+  GetExtraInfoSpec("onBeforeSendHeaders")
+);
+
+browser.webRequest.onSendHeaders.addListener(
+  OnSendHeaders,
+  GetFilter("onSendHeaders"),
+  GetExtraInfoSpec("onSendHeaders")
 );
 
 InitMenus();

app/scripts/background/webRequest.js

@@ -1,40 +1,130 @@
+import {
+  YOUTUBE_EMBED_URL,
+  YOUTUBE_NOCOOKIE_EMBED_URL,
+} from "../helpers/constants";
+
 /**
- * Modify requests to the YouTube Embedded Player to ensure the `Referer` header is set
- * The `Referer` header is required to avoid the "Video unavailable" error in the popout player
+ * Returns the `filter` object for the specified web request event
+ * @param {string} eventName name of the web request event
+ * @returns {object} the `filter` object
  */
-export const OnBeforeSendHeaders = (details) => {
-  console.log("[Background] OnBeforeSendHeaders()", details);
+export const GetFilter = (eventName) => {
+  console.log("[Background] GetFilters()", eventName);
 
-  // only if the request is for the popout player (identified by a custom GET parameter in the query string)
-  if (details.url.includes("popout=1")) {
-    console.log(
-      "[Background] OnBeforeSendHeaders() :: Request is for popout player",
-      details.url
-    );
+  const filter = {};
+
+  switch (eventName) {
+    default:
+      filter["urls"] = [
+        YOUTUBE_EMBED_URL + "*",
+        YOUTUBE_NOCOOKIE_EMBED_URL + "*",
+      ];
+      break;
+  }
+
+  console.log("[Background] GetFilters() :: Return", filter);
+  return filter;
+};
 
-    // only if the Referer header is not already set
+/**
+ * Returns the `extraInfoSpec` options for the specified web request event
+ * @param {string} eventName name of the web request event
+ * @returns {string[]} the `extraInfoSpec` options
+ */
+export const GetExtraInfoSpec = (eventName) => {
+  console.log("[Background] GetExtraInfoSpec()", eventName);
+
+  const extraInfoSpec = [];
+
+  /**
+   * Adds the `extraHeaders` option for browsers that need it to set certain headers
+   */
+  const _addExtraHeadersOption = () => {
     if (
-      !details.requestHeaders.some(
-        (header) => header.name.toLowerCase() === "referer"
+      Object.prototype.hasOwnProperty.call(
+        chrome?.webRequest?.OnBeforeSendHeadersOptions,
+        "EXTRA_HEADERS"
       )
     ) {
-      const referer = {
-        name: "Referer",
-        value: details.url,
-      };
+      extraInfoSpec.push("extraHeaders");
+    }
+  };
+
+  switch (eventName) {
+    case "onBeforeSendHeaders":
+      extraInfoSpec.push("blocking", "requestHeaders");
+      _addExtraHeadersOption();
+      break;
+
+    case "onSendHeaders":
+      extraInfoSpec.push("requestHeaders");
+      _addExtraHeadersOption();
+      break;
+  }
+
+  console.log("[Background] GetExtraInfoSpec() :: Return", extraInfoSpec);
+  return extraInfoSpec;
+};
+
+/**
+ * Modifies requests to the YouTube Embedded Player to ensure the necessary headers are set
+ * @param {object} details details of the request
+ */
+export const OnBeforeSendHeaders = (details) => {
+  console.log("[Background] OnBeforeSendHeaders()", details);
+
+  const url = new URL(details.url);
+  let { requestHeaders } = details;
+
+  const HasHeader = (name) =>
+    requestHeaders.some(
+      (header) => header.name.toLowerCase() === name.toLowerCase()
+    );
+
+  const AddHeader = (header) => {
+    if (!HasHeader(header.name)) {
       console.log(
-        '[Background] OnBeforeSendHeaders() :: Setting "Referer" header',
-        referer
+        `[Background] OnBeforeSendHeaders() :: Setting "${header.name}" header`,
+        header
       );
-      details.requestHeaders.push(referer);
+      requestHeaders.push(header);
     }
+  };
+
+  // only if the request is for the popout player (identified by a custom GET parameter in the query string)
+  if (parseInt(url.searchParams.get("popout"), 10) === 1) {
+    console.log(
+      "[Background] OnBeforeSendHeaders() :: Request is for popout player",
+      url
+    );
+
+    // the `Referer` header is required to avoid the "Video unavailable" error in the popout player
+    AddHeader({
+      name: "Referer",
+      value: url.origin + url.pathname,
+    });
+
+    // AddHeader({
+    //   name: "Host",
+    //   value: url.hostname,
+    // });
   }
 
-  console.log(
-    "[Background] OnBeforeSendHeaders() :: Return",
-    details.requestHeaders
-  );
+  console.group("[Background] OnBeforeSendHeaders() :: Return");
+  console.table(requestHeaders, ["name", "value"]);
+  console.groupEnd();
+
   return {
-    requestHeaders: details.requestHeaders,
+    requestHeaders,
   };
 };
+
+/**
+ * Logs the headers that are actually sent in the request (for debugging)
+ * @param {object} details details of the request
+ */
+export const OnSendHeaders = ({ requestHeaders }) => {
+  console.group("[Background] OnSendHeaders() :: Request Headers");
+  console.table(requestHeaders, ["name", "value"]);
+  console.groupEnd();
+};