Merge pull request #89 from mozilla/41-xframe

Fix #41: Modify framing headers when extracting prices in background

src/background/index.js

@@ -52,6 +52,21 @@ function handleExtractedProductData(extractedProduct, sender) {
   updateProductWithExtracted(extractedProduct);
 }
 
+/**
+ * Remove the x-frame-options header, so that the product page can load in the
+ * background page's iframe.
+ */
+function handleWebRequest(details) {
+  // only remove the header if this extension's background page made the request
+  if (details.documentUrl === window.location.href) {
+    const responseHeaders = details.responseHeaders.filter(
+      header => !header.name.toLowerCase().includes('x-frame-options'),
+    );
+    return {responseHeaders};
+  }
+  return {responseHeaders: details.responseHeaders};
+}
+
 (async function main() {
   // Set browser action default badge color, which can't be set via manifest
   browser.browserAction.setBadgeBackgroundColor({color: '#24ba20'});
@@ -88,6 +103,18 @@ function handleExtractedProductData(extractedProduct, sender) {
     }
   });
 
+  // Set up web request listener to modify framing headers for background updates
+  const webRequestFilter = {
+    urls: ['<all_urls>'],
+    types: ['sub_frame'],
+    tabId: browser.tabs.TAB_ID_NONE,
+  };
+  browser.webRequest.onHeadersReceived.addListener(
+    handleWebRequest,
+    webRequestFilter,
+    ['blocking', 'responseHeaders'],
+  );
+
   // Make sure the store is loaded before we check prices.
   await store.dispatch(loadStateFromStorage());
 

src/background/prices.js

@@ -12,7 +12,6 @@ import store from 'commerce/state';
 import {addPriceFromExtracted, getLatestPriceForProduct} from 'commerce/state/prices';
 import {getAllProducts, getProduct, getProductIdFromExtracted} from 'commerce/state/products';
 
-
 /**
  * Find products that are due for price updates and update them.
  */
@@ -41,12 +40,14 @@ function fetchLatestPrice(product) {
     return;
   }
 
-  // TODO(osmose): This method fails for domains that block framing. See #41.
   const iframe = document.createElement('iframe');
   const url = new URL(product.url);
   url.hash = 'moz-commerce-background';
   iframe.src = url.href;
   iframe.id = product.id;
+  // Desktop viewport dimensions (in px) on which Fathom proximity rules are based
+  iframe.width = 1680;
+  iframe.height = 950;
   iframe.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms');
   document.body.appendChild(iframe);
 

src/manifest.json

@@ -30,6 +30,8 @@
     "tabs",
     "storage",
     "unlimitedStorage",
-    "notifications"
+    "notifications",
+    "webRequest",
+    "webRequestBlocking"
   ]
 }