[MOB-8515]: allow-popups-to-escape-sandbox (#380)

* allow-popups-to-escape-sandbox

* config for allowing popups js execution

* eol

* remove console statement

* update check

* [DOCS-4682] Information about allow-popups-to-escape-sandbox (#388)

* Information about allow-popups-to-escape-sandbox

* SDK version information

* Update README.md

* Update README.md

---------

Co-authored-by: Mitch Prewitt <[email protected]>

---------

Co-authored-by: mitch prewitt <[email protected]>
Co-authored-by: Brad Umbaugh <[email protected]>

Author: mprew97

.env.example

@@ -10,3 +10,5 @@
 
 # Toggle this to true if you would need to hit our EU APIs.
 # IS_EU_ITERABLE_SERVICE=false
+
+# DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION=false

README.md

@@ -931,6 +931,24 @@ const SomeComponent = () => {
 };
 ```
 
+## Safari: Allowing JavaScript execution in tabs opened by in-app message link clicks
+
+To display an in-app message, Iterable's Web SDK uses an `iframe` on which the `sandbox` attribute is set to `allow-same-origin allow-popups allow-top-navigation`.  On Safari, this configuration blocks JavaScript execution in tabs that open because of link clicks in the `iframe`.
+
+To allow JavaScript to run in these new tabs: 
+
+- On your web server, set the `DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION` environment variable to `true`. This adds `allow-popups-to-escape-sandbox` to the `iframe`'s `sandbox` attribute, which allows new tabs to open with a clean browsing context.
+- However, use caution. Allowing JavaScript to run in new tabs opens the door to the possibility of malicious code execution.
+
+SDK version support: 
+
+- Versions [`1.0.10+`](https://github.com/Iterable/iterable-web-sdk/releases/tag/v1.0.10) of Iterable's Web SDK support the `DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION` environment variable.
+
+For more information, see:
+
+- [MDN docs for `allow-popups-to-escape-sandbox`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe#allow-popups-to-escape-sandbox)
+- [Can I Use? `allow-popups-to-escape-sandbox`](https://caniuse.com/mdn-html_elements_iframe_sandbox_allow-popups-to-escape-sandbox)
+
 # TypeScript
 
 The Iterable Web SDK includes TypeScript definitions out of the box. All SDK methods

react-example/.env.example

@@ -8,3 +8,6 @@
 
 # Convenience variable to automatically set the login email during testing.
 # [email protected]
+
+# IS_EU_ITERABLE_SERVICE=false
+# DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION=false

src/constants.ts

@@ -7,6 +7,9 @@ export const RETRY_USER_ATTEMPTS = 0;
 const IS_EU_ITERABLE_SERVICE =
   process.env.IS_EU_ITERABLE_SERVICE === 'true' ? true : false;
 
+export const dangerouslyAllowJsPopupExecution =
+  process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION === 'true' ? true : false;
+
 const US_ITERABLE_DOMAIN = 'api.iterable.com';
 
 const EU_ITERABLE_DOMAIN = 'api.eu.iterable.com';

src/inapp/utils.ts

@@ -1,6 +1,7 @@
 import { by } from '@pabra/sortby';
 import {
   ANIMATION_DURATION,
+  dangerouslyAllowJsPopupExecution,
   DEFAULT_CLOSE_BUTTON_OFFSET_PERCENTAGE
 } from 'src/constants';
 import { WebInAppDisplaySettings } from 'src/inapp';
@@ -286,7 +287,9 @@ const generateSecuredIFrame = () => {
   // event handlers on elements in it preventing our custom link handling
   iframe.setAttribute(
     'sandbox',
-    'allow-same-origin allow-popups allow-top-navigation'
+    `allow-same-origin allow-popups allow-top-navigation ${
+      dangerouslyAllowJsPopupExecution ? 'allow-popups-to-escape-sandbox' : ''
+    }`
   );
   /*
     _display: none_ would remove the ability to set event handlers on elements

webpack.config.js

@@ -9,6 +9,8 @@ function getParsedEnv() {
       ...env.parsed,
       VERSION: version,
       IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
+      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
+        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
     };
   }
 

webpack.dev.config.js

@@ -9,6 +9,8 @@ function getParsedEnv() {
       ...env.parsed,
       VERSION: version,
       IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
+      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
+        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
     };
   }
 

webpack.node.config.js

@@ -9,6 +9,8 @@ function getParsedEnv() {
       ...env.parsed,
       VERSION: version,
       IS_EU_ITERABLE_SERVICE: process.env.IS_EU_ITERABLE_SERVICE || false,
+      DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION:
+        process.env.DANGEROUSLY_ALLOW_JS_POPUP_EXECUTION || false
     };
   }