Add sandbox attribute to YouTube and Vimeo IFRAME video player (#4567)

compulim · web-flow · commit 40124b954a37 · 2022-12-16T00:09:41.000-08:00
* Add sandbox attribute

* Add tests
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#4558](https://github.com/microsoft/BotFramework-WebChat/issues/4558). In high contrast mode, "Retry" link button should use link color as defined by [CSS System Colors](https://w3c.github.io/csswg-drafts/css-color/#css-system-colors), by [@beyackle2](https://github.com/beyackle2) in PR [#4537](https://github.com/microsoft/BotFramework-WebChat/pull/4537)
+-  Fixes [#4566](https://github.com/microsoft/BotFramework-WebChat/issues/4566). For YouTube and Vimeo `<iframe>`, add `sandbox="allow-same-origin allow-scripts"`, by [@compulim](https://github.com/compulim) in PR [#4567](https://github.com/microsoft/BotFramework-WebChat/pull/4567)
 
 ### Changed
 
diff --git a/__tests__/html/video.vimeo.sandbox.html b/__tests__/html/video.vimeo.sandbox.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [{
+            contentType: 'video/*',
+            contentUrl: 'https://vimeo.com/269316124'
+          }],
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        await pageConditions.became('iframe has loaded', () => document.getElementsByTagName('iframe').length, 5000);
+
+        const sandboxAttributeValue = document.getElementsByTagName('iframe')[0].getAttribute('sandbox')
+
+        expect(sandboxAttributeValue).toBeTruthy();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/video.vimeo.sandbox.js b/__tests__/html/video.vimeo.sandbox.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('Vimeo video player', () => {
+  test('should have "sandbox" attribute set', () => runHTML('video.youtube.sandbox.html'));
+});
diff --git a/__tests__/html/video.youtube.sandbox.html b/__tests__/html/video.youtube.sandbox.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en-US">
+  <head>
+    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
+    <script crossorigin="anonymous" src="/test-harness.js"></script>
+    <script crossorigin="anonymous" src="/test-page-object.js"></script>
+    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
+  </head>
+  <body>
+    <div id="webchat"></div>
+    <script>
+      run(async function () {
+        const store = testHelpers.createStore();
+
+        const directLine = testHelpers.createDirectLineEmulator(store);
+
+        WebChat.renderWebChat({ directLine, store }, document.getElementById('webchat'));
+
+        await pageConditions.uiConnected();
+
+        await directLine.emulateIncomingActivity({
+          attachments: [{
+            contentType: 'video/*',
+            contentUrl: 'https://youtu.be/rIJRFHDr1QE'
+          }],
+          type: 'message'
+        });
+
+        await pageConditions.numActivitiesShown(1);
+
+        await pageConditions.became('iframe has loaded', () => document.getElementsByTagName('iframe').length, 5000);
+
+        const sandboxAttributeValue = document.getElementsByTagName('iframe')[0].getAttribute('sandbox')
+
+        expect(sandboxAttributeValue).toBeTruthy();
+      });
+    </script>
+  </body>
+</html>
diff --git a/__tests__/html/video.youtube.sandbox.js b/__tests__/html/video.youtube.sandbox.js
@@ -0,0 +1,5 @@
+/** @jest-environment ./packages/test/harness/src/host/jest/WebDriverEnvironment.js */
+
+describe('YouTube video player', () => {
+  test('should have "sandbox" attribute set', () => runHTML('video.youtube.sandbox.html'));
+});
diff --git a/packages/component/src/Attachment/VimeoContent.tsx b/packages/component/src/Attachment/VimeoContent.tsx
@@ -27,6 +27,7 @@ const VimeoContent: FC<VimeoContentProps> = ({ alt, autoPlay, embedID, loop }) =
       allowFullScreen={true}
       aria-label={alt}
       className={vimeoContentStyleSet}
+      sandbox="allow-same-origin allow-scripts"
       src={`https://player.vimeo.com/video/${encodeURI(embedID)}?${search}`}
     />
   );
diff --git a/packages/component/src/Attachment/YouTubeContent.tsx b/packages/component/src/Attachment/YouTubeContent.tsx
@@ -25,6 +25,7 @@ const YouTubeContent: FC<YouTubeContentProps> = ({ alt, autoPlay, embedID, loop
       allowFullScreen={true}
       aria-label={alt}
       className={youTubeContentStyleSet}
+      sandbox="allow-same-origin allow-scripts"
       src={`https://youtube.com/embed/${embedID}?${search}`}
     />
   );
