diff --git a/lib/ReactViews/Story/StoryPanel/StoryBody.tsx b/lib/ReactViews/Story/StoryPanel/StoryBody.tsx index e199ed082fd..cd721b7dbe5 100644 --- 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 index 8870e871a94..99ce0dba7f4 100644 --- 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. ' + text: 'Story with video. ' }; 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. ' + text: 'Story with video. ' }; act(() => {