fix: "about:" page(s) redirection issue on firefox

AXeL-dev · May 15, 2022 · 63fd366 · 63fd366
1 parent 242a981
commit 63fd366
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 27 deletions.
diff --git a/public/_locales/en/messages.json b/public/_locales/en/messages.json
@@ -450,5 +450,16 @@
   },
   "blockAccessToExtensionsPageWarning": {
     "message": "Please make sure to save your password in a safe place before enabling this feature"
+  },
+  "pasteBinTip": {
+    "message": "Copy the url above & paste it in your address bar then hit Enter. Please notice that the token will expire in $tokenExpireTime$ $unit$.",
+    "placeholders": {
+      "tokenExpireTime": {
+        "content": "$1"
+      },
+      "unit": {
+        "content": "$2"
+      }
+    }
   }
 }
diff --git a/public/_locales/fr/messages.json b/public/_locales/fr/messages.json
@@ -450,5 +450,16 @@
   },
   "blockAccessToExtensionsPageWarning": {
     "message": "Assurez-vous d'enregistrer votre mot de passe dans un endroit sûr avant d'activer cette fonctionnalité"
+  },
+  "pasteBinTip": {
+    "message": "Copiez l'URL ci-dessus et collez-la dans votre barre d'adresse, puis appuyez sur Entrée. Veuillez noter que le jeton expirera dans $tokenExpireTime$ $unit$.",
+    "placeholders": {
+      "tokenExpireTime": {
+        "content": "$1"
+      },
+      "unit": {
+        "content": "$2"
+      }
+    }
   }
 }
diff --git a/public/_locales/nl/messages.json b/public/_locales/nl/messages.json
@@ -450,5 +450,16 @@
   },
   "blockAccessToExtensionsPageWarning": {
     "message": "Zorg ervoor dat u uw wachtwoord op een veilige plaats opslaat voordat u deze functie inschakelt"
+  },
+  "pasteBinTip": {
+    "message": "Kopieer de url hierboven en plak deze in uw adresbalk en druk vervolgens op Enter. Houd er rekening mee dat het token verloopt over $tokenExpireTime$ $unit$.",
+    "placeholders": {
+      "tokenExpireTime": {
+        "content": "$1"
+      },
+      "unit": {
+        "content": "$2"
+      }
+    }
   }
 }
diff --git a/public/icons/copy.svg b/public/icons/copy.svg
diff --git a/src/App.jsx b/src/App.jsx
@@ -13,6 +13,7 @@ import {
   Blocked,
   PasswordPrompt,
   AddWebsitePrompt,
+  PasteBin,
 } from './components';
 import { PasswordProtectedRoute } from './routes';
 
@@ -79,6 +80,7 @@ export default class App extends Component {
                     <Route path="/background" component={Background} />
                     <Route path="/blocked" component={Blocked} />
                     <Route path="/addWebsitePrompt" component={AddWebsitePrompt} />
+                    <Route path="/pastebin" component={PasteBin} />
                     {isDevEnv || !this.state.accessAllowed ? (
                       <Route path="/pwd" component={PasswordPrompt} />
                     ) : null}

diff --git a/src/components/Background/index.jsx b/src/components/Background/index.jsx
@@ -7,6 +7,7 @@ import {
   sendNotification,
   openExtensionPage,
   getActiveTab,
+  isFirefox,
 } from 'helpers/webext';
 import {
   Mode,
@@ -434,7 +435,18 @@ export class Background extends Component {
             });
             const url = new URL(initialUrl);
             url.searchParams.set('token', token);
-            response = this.redirectTab(sender.tab.id, url.toString());
+            if (isFirefox && /^about:/i.test(url)) {
+              // Note: You must access about: protocol pages by typing them into the address bar.
+              // Attempts to navigate through window.location will throw error
+              // Error: Access to 'about:addons' from script denied.
+              // See: https://developer.mozilla.org/en-US/Firefox/The_about_protocol
+              response = this.redirectTab(
+                sender.tab.id,
+                `${indexUrl}#pastebin?url=${encodeURIComponent(url.toString())}`
+              );
+            } else {
+              response = this.redirectTab(sender.tab.id, url.toString());
+            }
           }
           break;
         // redirectSenderTab
@@ -778,6 +790,10 @@ export class Background extends Component {
   };
 
   handleTabEvent = (data, caller) => {
+    this.debug('tab event:', {
+      caller: caller,
+      data: data,
+    });
     // Handle access to extensions page
     if (
       this.blockAccessToExtensionsPage &&
@@ -805,7 +821,7 @@ export class Background extends Component {
   };
 
   onUpdatedHandler = (tabId, changeInfo, tab) => {
-    const url = changeInfo.url || tab.url;
+    const url = isFirefox ? changeInfo.url : changeInfo.url || tab.url;
     if (changeInfo.status === 'loading' && url && hasValidProtocol(url)) {
       this.checkTab(
         { ...changeInfo, url, tabId },

diff --git a/src/components/Blocked/index.jsx b/src/components/Blocked/index.jsx
@@ -1,5 +1,13 @@
 import React, { Component, Fragment } from 'react';
-import { Pane, Dialog, RadioGroup, Button, UnlockIcon, toaster } from 'evergreen-ui';
+import {
+  Pane,
+  Dialog,
+  RadioGroup,
+  Button,
+  UnlockIcon,
+  toaster,
+  DuplicateIcon,
+} from 'evergreen-ui';
 import { translate } from 'helpers/i18n';
 import { storage, sendMessage } from 'helpers/webext';
 import { debug, isDevEnv, isProdEnv } from 'helpers/debug';
@@ -13,7 +21,6 @@ import {
 import { NumberInput, PasswordPrompt } from 'components';
 import queryString from 'query-string';
 import copy from 'copy-to-clipboard';
-import { ReactComponent as CopyIcon } from '../../../public/icons/copy.svg';
 import './styles.scss';
 
 export class Blocked extends Component {
@@ -176,7 +183,7 @@ export class Blocked extends Component {
                         title={translate('copy')}
                         onClick={this.copyBlockedLink}
                       >
-                        <CopyIcon />
+                        <DuplicateIcon />
                       </button>
                     </span>
                   )}

diff --git a/src/components/Blocked/styles.scss b/src/components/Blocked/styles.scss
@@ -74,11 +74,11 @@ $textColor: white;
   > input {
     font-family: OpenSansFont !important;
     font-size: 14px;
-    color: $textColor;
+    color: white;
     background-color: transparent;
     border: 2px solid #db9d61;
     border-radius: 4px;
-    padding: 10px 48px 10px 20px;
+    padding: 10px 48px 10px 16px;
     width: 100%;
     &:hover,
     &:active,
@@ -103,8 +103,8 @@ $textColor: white;
       path {
         fill: #d0d0d0;
       }
-      width: 20px;
-      height: 20px;
+      width: 16px;
+      height: 16px;
     }
   }
 }

diff --git a/src/components/PasteBin/index.jsx b/src/components/PasteBin/index.jsx
@@ -0,0 +1,57 @@
+import React, { Component } from 'react';
+import { Pane, Paragraph, toaster, DuplicateIcon } from 'evergreen-ui';
+import { translate } from 'helpers/i18n';
+import { debug, isDevEnv } from 'helpers/debug';
+import { isUrl, getValidUrl } from 'helpers/url';
+import queryString from 'query-string';
+import copy from 'copy-to-clipboard';
+import './styles.scss';
+
+export class PasteBin extends Component {
+  constructor(props) {
+    super(props);
+    this.url = props.location ? queryString.parse(props.location.search).url : null;
+    if (this.url && isUrl(this.url)) {
+      this.url = decodeURIComponent(this.url);
+      this.url = getValidUrl(this.url);
+    }
+    if (isDevEnv && !this.url) {
+      this.url = 'https://www.example.com';
+    }
+    debug.log({ url: this.url, props });
+  }
+
+  copyUrl = () => {
+    if (copy(this.url)) {
+      toaster.success(translate('copiedToClipboard'), {
+        id: 'pastebin-toaster',
+      });
+    }
+  };
+
+  render() {
+    return (
+      <Pane
+        display="flex"
+        flex={1}
+        width="100%"
+        height="100%"
+        alignItems="center"
+        justifyContent="center"
+        backgroundColor="rgba(0, 0, 0, 0.9)"
+      >
+        <Pane display="flex" flexDirection="column" width="50%" maxWidth={800}>
+          <span className="bin">
+            <input type="text" value={this.url || ''} readOnly />
+            <button className="copy" title={translate('copy')} onClick={this.copyUrl}>
+              <DuplicateIcon />
+            </button>
+          </span>
+          <Paragraph size={300} color="muted" marginTop={16}>
+            {translate('pasteBinTip', [60, translate('seconds')])}
+          </Paragraph>
+        </Pane>
+      </Pane>
+    );
+  }
+}
diff --git a/src/components/PasteBin/styles.scss b/src/components/PasteBin/styles.scss
@@ -0,0 +1,43 @@
+.bin {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  > input {
+    font-size: 14px;
+    color: #d0d0d0;
+    background-color: transparent;
+    border: 2px solid #db9d61;
+    border-radius: 4px;
+    padding: 10px 48px 10px 16px;
+    width: 100%;
+    &:hover,
+    &:active,
+    &:focus {
+      outline: none;
+    }
+  }
+
+  > button.copy {
+    position: absolute;
+    // top: 10px;
+    right: 10px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    display: flex;
+    cursor: pointer;
+    opacity: 0.5;
+    &:hover {
+      opacity: 1;
+    }
+    svg {
+      path {
+        fill: #d0d0d0;
+      }
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
@@ -3,6 +3,7 @@ export * from './Blocked';
 export * from './Panel';
 export * from './PasswordPrompt';
 export * from './AddWebsitePrompt';
+export * from './PasteBin';
 export * from './Settings';
 export * from './Timer';
 export * from './Logs';