Merge pull request #204 from edx/fix--POC--Long-term-fix-for-cross-origin-iFrames

fix: Long-term fix for cross-origin iFrames
Context: Our current LTI Component XBlock provides an option to "View resource in a New Window", which uses JS to launch a new window/tab. These capabilities were removed in Chrome v92. Here's some referances to those changes: TL;DR: there is a temporary cookie workaround, but this problem also started occurring on Safari 15.

README.rst

@@ -318,6 +318,12 @@ Please do not report security issues in public. Send security concerns via email
 Changelog
 =========
 
+3.0.2 - 2021-11-12
+-------------------
+
+* The modal to confirm information transfer on open of lti in new tab/window has been updated
+  because of a change in how browsers handle iframe permissions.
+
 3.0.1 - 2021-07-09
 -------------------
 

lti_consumer/static/js/xblock_lti_consumer.js

@@ -102,21 +102,58 @@ function LtiConsumerXBlock(runtime, element) {
 
         // Apply click handler to new window launch button
         $element.find('.btn-lti-new-window').click(function(){
-            var launch = true;
 
             // If this instance is configured to require username and/or email, ask user if it is okay to send them
             // Do not launch if it is not okay
+            var destination = $(this).data('target')
+
+            function confirmDialog(message) {
+                var def = $.Deferred();
+                $('<div></div>').appendTo('body') // TODO: this will need some cute styling. It looks like trash but it works.
+                  .html('<div><h6>' + message + '</h6></div>')
+                  .dialog({
+                    modal: true,
+                    title: 'Confirm',
+                    zIndex: 10000,
+                    autoOpen: true,
+                    width: 'auto',
+                    resizable: false,
+                    buttons: {
+                      OK: function() {
+                        $('body').append('<h1>Confirm Dialog Result: <i>Yes</i></h1>');
+                        def.resolve("OK");
+                        $(this).dialog("close");
+                      },
+                      Cancel: function() {
+                        $('body').append('<h1>Confirm Dialog Result: <i>No</i></h1>');
+                        def.resolve("Cancel");
+                        $(this).dialog("close");
+                      }
+                    },
+                    close: function(event, ui) {
+                      $(this).remove();
+                    }
+                  });
+
+                return def.promise();
+              };
+
             if(askToSendUsername && askToSendEmail) {
-                launch = confirm(gettext("Click OK to have your username and e-mail address sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information."));
+                msg = gettext("Click OK to have your username and e-mail address sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information.");
             } else if (askToSendUsername) {
-                launch = confirm(gettext("Click OK to have your username sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information."));
+                msg = gettext("Click OK to have your username sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information.");
             } else if (askToSendEmail) {
-                launch = confirm(gettext("Click OK to have your e-mail address sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information."));
-            }
-
-            if (launch) {
-                window.open($(this).data('target'));
+                msg = gettext("Click OK to have your e-mail address sent to a 3rd party application.\n\nClick Cancel to return to this page without sending your information.");
+            } else {
+                window.open(destination);
             }
+            $.when(confirmDialog(msg)).then(
+                function(status) {
+                    if (status == "OK") {
+                        window.open(destination);
+                    }
+                }
+            );
         });
     });
 }