Add two more video sources and restrict iframe attributes.

TerriaJS · Sep 13, 2023 · dd2796f · dd2796f
1 parent d181dda
commit dd2796f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 8 deletions.
diff --git a/lib/ReactViews/Story/StoryPanel/StoryBody.tsx b/lib/ReactViews/Story/StoryPanel/StoryBody.tsx
@@ -52,7 +52,13 @@ function shouldAddIframeTag(story: Story) {
   if (iframes.length < 1) return false;
   let result = true;
   for (let iframe of iframes) {
-    if (!iframe.src?.startsWith("https://www.youtube.com/embed/")) {
+    if (
+      !(
+        iframe.src?.startsWith("https://www.youtube.com/embed/") ||
+        iframe.src?.startsWith("https://www.youtube-nocookie.com/embed/") ||
+        iframe.src?.startsWith("https://player.vimeo.com/video/")
+      )
+    ) {
       result = false;
       break;
     }
@@ -67,7 +73,8 @@ function sourceBasedParse(story: Story) {
       { showExternalLinkWarning: true },
       false,
       {
-        ADD_TAGS: ["iframe"]
+        ADD_TAGS: ["iframe"],
+        ALLOWED_ATTR: ["src", "width", "height"]
       }
     );
   } else {

diff --git a/test/ReactViews/Story/StoryPanel/StoryBodySpec.tsx b/test/ReactViews/Story/StoryPanel/StoryBodySpec.tsx
@@ -10,12 +10,11 @@ import {
 describe("StoryBody", function () {
   let testRenderer: ReactTestRenderer;
 
-  it("should include embedded media using iframe tag with allowed source", function () {
-    // Story editor will only save embedded video with source, width and height.
+  it("should include embedded media using iframe tag with allowed sources and attributes", function () {
     const theStory = {
       id: "some id",
       title: "test",
-      text: 'Story with video. <iframe src="https://www.youtube.com/embed/1234" width="560" height="315"></iframe>'
+      text: 'Story with video. <iframe src="https://www.youtube.com/embed/1234" title="Should be omitted" referrerpolicy="unsafe-url" width="560" height="315" allow="autoplay; fullscreen"></iframe><iframe src="https://www.youtube-nocookie.com/embed/1234" title="Should be omitted" referrerpolicy="unsafe-url" width="560" height="315" allow="autoplay; fullscreen"></iframe><iframe src="https://player.vimeo.com/video/1234" title="Should be omitted" referrerpolicy="unsafe-url" width="560" height="315" allow="autoplay; fullscreen"></iframe>'
     };
 
     act(() => {
@@ -32,24 +31,43 @@ describe("StoryBody", function () {
       ).children[0] as ReactTestInstance
     ).children[0] as ReactTestInstance;
 
-    expect(theInstance.children.length === 2);
+    expect(theInstance.children.length === 4);
 
     expect(theInstance.children[0] as string).toEqual("Story with video. ");
 
-    const theIframeInstance = theInstance.children[1] as ReactTestInstance;
+    let theIframeInstance = theInstance.children[1] as ReactTestInstance;
     expect(theIframeInstance.type).toBe("iframe");
+    expect(Object.keys(theIframeInstance.props).length).toBe(3);
     expect(theIframeInstance.props.src).toBe(
       "https://www.youtube.com/embed/1234"
     );
     expect(theIframeInstance.props.width).toBe("560");
     expect(theIframeInstance.props.height).toBe("315");
+
+    theIframeInstance = theInstance.children[2] as ReactTestInstance;
+    expect(theIframeInstance.type).toBe("iframe");
+    expect(Object.keys(theIframeInstance.props).length).toBe(3);
+    expect(theIframeInstance.props.src).toBe(
+      "https://www.youtube-nocookie.com/embed/1234"
+    );
+    expect(theIframeInstance.props.width).toBe("560");
+    expect(theIframeInstance.props.height).toBe("315");
+
+    theIframeInstance = theInstance.children[3] as ReactTestInstance;
+    expect(theIframeInstance.type).toBe("iframe");
+    expect(Object.keys(theIframeInstance.props).length).toBe(3);
+    expect(theIframeInstance.props.src).toBe(
+      "https://player.vimeo.com/video/1234"
+    );
+    expect(theIframeInstance.props.width).toBe("560");
+    expect(theIframeInstance.props.height).toBe("315");
   });
 
   it("should exclude embedded media using iframe tag with any forbidden sources", function () {
     const theStory = {
       id: "some id",
       title: "test",
-      text: 'Story with video. <iframe src="https://www.youtube.com/embed/1234" width="560" height="315"></iframe><iframe src="https://some.video.link" width="560" height="315"></iframe>'
+      text: 'Story with video. <iframe src="https://www.youtube.com/embed/1234" width="560" height="315"></iframe><iframe src="https://any.forbidden.video.source" width="560" height="315"></iframe>'
     };
 
     act(() => {