use proctoring url for exam provisioning

templates/credentials/exam.html

@@ -14,6 +14,8 @@
 
   <section class="p-strip u-no-padding">
     <iframe title="Exam"
+            allow="microphone;camera;display-capture;geolocation;"
+            allowusermedia
             class="u-no-margin"
             id="exam-iframe"
             onload="setIframeHeight()"
@@ -23,31 +25,33 @@
   </section>
 
   <script>
+    const examUrl = "{{ exam_url }}";
     const setIframeHeight = () => {
       // TODO: Account for header height change
       const navHeight = document.getElementById("navigation").clientHeight;
       const container = document.getElementById("exam-iframe");
       container.style.height = `${window.innerHeight - navHeight - 32 - 4}px`;
-      console.log(`navHeight: ${navHeight}`);
-      console.log(`innerHeight: ${innerHeight}`);
-      console.log(`containerHeight: ${container.style.height}`);
-      console.log("container", container);
     }
 
-    // window.onresize = setIframeHeight;
+    window.onresize = setIframeHeight;
 
     const refocusIframe = () => {
-      const iframe = document.getElementById("exam-iframe");
-      const focused = document.activeElement;
-      if (focused && focused !== document.body) {
-        return;
+      const outerIframe = document.getElementById('exam-iframe');
+      const innerIframe = outerIframe.contentWindow.document.getElementById('lazy_loaded_iframe');
+      if (innerIframe) {
+        innerIframe.contentWindow.focus();
       }
+    }
 
-      iframe.contentWindow.focus();
+    const addEventListeners = () => {
+      const outerIframe = document.getElementById('exam-iframe');
+      if (outerIframe) {
+        outerIframe.addEventListener('load', refocusIframe);
+        outerIframe.addEventListener('click', refocusIframe);
+      }
     }
 
-    document.addEventListener('click', refocusIframe);
-    document.addEventListener('keydown', refocusIframe);
+    document.addEventListener("DOMContentLoaded", addEventListeners);
   </script>
 
 {% endblock content %}

webapp/handlers.py

@@ -54,6 +54,12 @@ def cache_headers(response):
         if flask.request.path.startswith("/certified"):
             response.headers["X-Frame-Options"] = "DENY"
 
+        # Add CSP headers for credentials/exam
+        if flask.request.path.startswith("/credentials/exam"):
+            response.headers[
+                "Content-Security-Policy"
+            ] = "frame-ancestors cloudesign.io *.cloudesign.io"
+
         return response
 
     # Error pages