Use sandbox on App iframe (#1893)

* Use sandbox, handle external redirect

* Add allow-same-origin flag

* Update translations

locale/defaultMessages.json

@@ -623,6 +623,9 @@
     "context": "section header",
     "string": "About this app"
   },
+  "src_dot_apps_dot_components_dot_AppFrame_dot_29277312": {
+    "string": "You are about to leave the Dashboard. Do you want to continue?"
+  },
   "src_dot_apps_dot_components_dot_AppInProgressDeleteDialog_dot_1462011531": {
     "context": "dialog header",
     "string": "Delete App"

src/apps/components/AppFrame/AppFrame.tsx

@@ -54,6 +54,7 @@ export const AppFrame: React.FC<Props> = ({
       onError={onError}
       onLoad={handleLoad}
       className={classes.iframe}
+      sandbox="allow-same-origin allow-forms allow-scripts"
     />
   );
 };

src/apps/components/AppFrame/useAppActions.ts

@@ -1,6 +1,7 @@
 import { Actions, DispatchResponseEvent, Events } from "@saleor/app-bridge";
 import useNavigator from "@saleor/hooks/useNavigator";
 import React from "react";
+import { useIntl } from "react-intl";
 
 import { useExternalApp } from "../ExternalAppContext";
 
@@ -21,6 +22,7 @@ export const useAppActions = (
 ) => {
   const navigate = useNavigator();
   const { closeApp } = useExternalApp();
+  const intl = useIntl();
 
   const actionReducer = (
     action: Actions | undefined
@@ -29,16 +31,36 @@ export const useAppActions = (
       case "redirect": {
         const { to, newContext, actionId } = action.payload;
 
+        let success = true;
+
+        try {
           if (newContext) {
             window.open(to);
           } else if (to.startsWith("/")) {
             navigate(to);
             closeApp();
           } else {
-          window.location.href = to;
+            const isExternalDomain =
+              new URL(to).hostname !== window.location.hostname;
+
+            if (isExternalDomain) {
+              success = window.confirm(
+                intl.formatMessage({
+                  defaultMessage:
+                    "You are about to leave the Dashboard. Do you want to continue?"
+                })
+              );
             }
 
-        return sendResponseStatus(actionId, true);
+            if (success) {
+              window.location.href = to;
+            }
+          }
+        } catch (e) {
+          success = false;
+        }
+
+        return sendResponseStatus(actionId, success);
       }
       default: {
         return sendResponseStatus(action?.payload?.actionId, false);