From 35a9aaf421808f36db95154c953c04a3ae6a61d0 Mon Sep 17 00:00:00 2001
From: Bianca Danforth <biancadanforth@gmail.com>
Date: Thu, 30 Aug 2018 17:47:40 -0700
Subject: [PATCH 1/2] Fix #41: Modify framing headers when extracting prices in
 background
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Removes the prohibitive 'x-frame-options' header from product pages attempting to load in our background page's iframe, so that they load successfully and the price for the product can be extracted.

Also adds 'height' and 'width' to the background page iframes, so that their viewport sizes are comparable to that of a desktop computer for proximity-based Fathom rules.

--

I’m going to explain how to check that it works, since it was confusing for me; there is one partial check and one more complete check:

_Partial check: Demonstrates that the example page will not load as-is._
On [this page](https://www.amazon.com/KitchenAid-KL26M1XER-Professional-6-Qt-Bowl-Lift/dp/B01LYV1U30?smid=ATVPDKIKX0DER&pf_rd_p=0c7b792f-241a-4510-94f4-dd184a76f201&pf_rd_r=AZD7BGV3JZGTB23F30X3), for the `handleWebRequest` function in `./src/background/index.js`, if I just return `{responseHeaders: details.responseHeaders}` without modifying, I get the following errors:

```
Security Error: Content at https://www.amazon.com/KitchenAid-KL26M1XER-Professional-6-Qt-Bowl-Lift/dp/B01LYV1U30?smid=ATVPDKIKX0DER&pf_rd_p=0c7b792f-241a-4510-94f4-dd184a76f201&pf_rd_r=AZD7BGV3JZGTB23F30X3#moz-commerce-background may not load data from moz-extension://ccd17807-a1c5-9a4b-8e51-04ecfb6d7675/_generated_background_page.html.
Load denied by X-Frame-Options: https://www.amazon.com/KitchenAid-KL26M1XER-Professional-6-Qt-Bowl-Lift/dp/B01LYV1U30?smid=ATVPDKIKX0DER&pf_rd_p=0c7b792f-241a-4510-94f4-dd184a76f201&pf_rd_r=AZD7BGV3JZGTB23F30X3#moz-commerce-background does not permit cross-origin framing.
```

If I remove the `x-frame-options` header completely and return the remaining headers, I get no errors.

_Complete check: Demonstrates that two example pages load, one as-is (has no x-frame-options header) and one with modification (has an x-frame-options header)_
Also, I have verified that the `product_info.js` content script loads in the background <iframe> for both Osmose’s [fake product page](http://www.mkelly.me/fake-product-page/) (no `x-frame-options` header) and for an [Amazon product page](https://www.amazon.com/KitchenAid-KL26M1XER-Professional-6-Qt-Bowl-Lift/dp/B01LYV1U30?smid=ATVPDKIKX0DER&pf_rd_p=0c7b792f-241a-4510-94f4-dd184a76f201&pf_rd_r=AZD7BGV3JZGTB23F30X3) (with `x-frame-options` of `sameorigin`) by temporarily setting `PRICE_CHECK_TIMEOUT_INTERVAL` and `PRICE_CHECK_INTERVAL` in `config.js` to 15s and this line: `if (isBackgroundUpdate) console.log('PRODUCT_INFO', window.location.href);` into the `main` function of `product_info.js`.
---
 src/background/index.js  | 27 +++++++++++++++++++++++++++
 src/background/prices.js |  5 +++--
 src/manifest.json        |  4 +++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/src/background/index.js b/src/background/index.js
index 3a978e9..571cdef 100644
--- a/src/background/index.js
+++ b/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) {
+  const bgWindow = browser.extension.getBackgroundPage();
+  // only remove the header if this extension's background page made the request
+  if (details.documentUrl === bgWindow.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 filter = {
+    urls: ['<all_urls>'],
+    types: ['sub_frame'],
+    tabId: browser.tabs.TAB_ID_NONE,
+  };
+  browser.webRequest.onHeadersReceived.addListener(
+    handleWebRequest,
+    filter,
+    ['blocking', 'responseHeaders'],
+  );
+
   // Make sure the store is loaded before we check prices.
   await store.dispatch(loadStateFromStorage());
 
diff --git a/src/background/prices.js b/src/background/prices.js
index 33deff1..67b8644 100644
--- a/src/background/prices.js
+++ b/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);
 
diff --git a/src/manifest.json b/src/manifest.json
index d798d39..814956b 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -30,6 +30,8 @@
     "tabs",
     "storage",
     "unlimitedStorage",
-    "notifications"
+    "notifications",
+    "webRequest",
+    "webRequestBlocking"
   ]
 }

From 7a5661f24dc763451620f7ac5521f6da08add801 Mon Sep 17 00:00:00 2001
From: Bianca Danforth <biancadanforth@gmail.com>
Date: Thu, 6 Sep 2018 09:12:56 -0700
Subject: [PATCH 2/2] Incorporate feedback from Osmose.

---
 src/background/index.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/background/index.js b/src/background/index.js
index 571cdef..44e46f6 100644
--- a/src/background/index.js
+++ b/src/background/index.js
@@ -57,11 +57,11 @@ function handleExtractedProductData(extractedProduct, sender) {
  * background page's iframe.
  */
 function handleWebRequest(details) {
-  const bgWindow = browser.extension.getBackgroundPage();
   // only remove the header if this extension's background page made the request
-  if (details.documentUrl === bgWindow.location.href) {
-    const responseHeaders = details.responseHeaders
-      .filter(header => !header.name.toLowerCase().includes('x-frame-options'));
+  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};
@@ -104,14 +104,14 @@ function handleWebRequest(details) {
   });
 
   // Set up web request listener to modify framing headers for background updates
-  const filter = {
+  const webRequestFilter = {
     urls: ['<all_urls>'],
     types: ['sub_frame'],
     tabId: browser.tabs.TAB_ID_NONE,
   };
   browser.webRequest.onHeadersReceived.addListener(
     handleWebRequest,
-    filter,
+    webRequestFilter,
     ['blocking', 'responseHeaders'],
   );