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(() => {