Merge commit from fork
Add mimetype checks to stickers, image and video messages
This commit is contained in:
Michael Telatynski
GitHub
commit
a00c343435
6 changed files with 264 additions and 70 deletions
|
|
@ -38,7 +38,7 @@ const config: Config = {
|
|||
"recorderWorkletFactory": "<rootDir>/__mocks__/empty.js",
|
||||
"^fetch-mock$": "<rootDir>/node_modules/fetch-mock",
|
||||
},
|
||||
transformIgnorePatterns: ["/node_modules/(?!matrix-js-sdk).+$"],
|
||||
transformIgnorePatterns: ["/node_modules/(?!(mime|matrix-js-sdk)).+$"],
|
||||
collectCoverageFrom: [
|
||||
"<rootDir>/src/**/*.{js,ts,tsx}",
|
||||
// getSessionLock is piped into a different JS context via stringification, and the coverage functionality is
|
||||
|
|
|
|||
|
|
@ -129,6 +129,7 @@
|
|||
"matrix-js-sdk": "34.10.0",
|
||||
"matrix-widget-api": "^1.9.0",
|
||||
"memoize-one": "^6.0.0",
|
||||
"mime": "^4.0.4",
|
||||
"oidc-client-ts": "^3.0.1",
|
||||
"opus-recorder": "^8.0.3",
|
||||
"pako": "^2.0.3",
|
||||
|
|
|
|||
|
|
@ -6,16 +6,22 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import * as fs from "node:fs";
|
||||
|
||||
import type { Page } from "@playwright/test";
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
import { Credentials } from "../../plugins/homeserver";
|
||||
|
||||
const STICKER_PICKER_WIDGET_ID = "fake-sticker-picker";
|
||||
const STICKER_PICKER_WIDGET_NAME = "Fake Stickers";
|
||||
const STICKER_NAME = "Test Sticker";
|
||||
const ROOM_NAME_1 = "Sticker Test";
|
||||
const ROOM_NAME_2 = "Sticker Test Two";
|
||||
const STICKER_MESSAGE = JSON.stringify({
|
||||
const STICKER_IMAGE = fs.readFileSync("playwright/sample-files/riot.png");
|
||||
|
||||
function getStickerMessage(contentUri: string, mimetype: string): string {
|
||||
return JSON.stringify({
|
||||
action: "m.sticker",
|
||||
api: "fromWidget",
|
||||
data: {
|
||||
|
|
@ -24,14 +30,24 @@ const STICKER_MESSAGE = JSON.stringify({
|
|||
file: "test.png",
|
||||
content: {
|
||||
body: STICKER_NAME,
|
||||
info: {
|
||||
h: 480,
|
||||
mimetype: mimetype,
|
||||
size: 13818,
|
||||
w: 480,
|
||||
},
|
||||
msgtype: "m.sticker",
|
||||
url: "mxc://localhost/somewhere",
|
||||
url: contentUri,
|
||||
},
|
||||
},
|
||||
requestId: "1",
|
||||
widgetId: STICKER_PICKER_WIDGET_ID,
|
||||
});
|
||||
const WIDGET_HTML = `
|
||||
}
|
||||
|
||||
function getWidgetHtml(contentUri: string, mimetype: string) {
|
||||
const stickerMessage = getStickerMessage(contentUri, mimetype);
|
||||
return `
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Fake Sticker Picker</title>
|
||||
|
|
@ -51,13 +67,13 @@ const WIDGET_HTML = `
|
|||
<button name="Send" id="sendsticker">Press for sticker</button>
|
||||
<script>
|
||||
document.getElementById('sendsticker').onclick = () => {
|
||||
window.parent.postMessage(${STICKER_MESSAGE}, '*')
|
||||
window.parent.postMessage(${stickerMessage}, '*')
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
`;
|
||||
|
||||
}
|
||||
async function openStickerPicker(app: ElementAppPage) {
|
||||
const options = await app.openMessageComposerOptions();
|
||||
await options.getByRole("menuitem", { name: "Sticker" }).click();
|
||||
|
|
@ -71,7 +87,8 @@ async function sendStickerFromPicker(page: Page) {
|
|||
await expect(page.locator(".mx_AppTileFullWidth#stickers")).not.toBeVisible();
|
||||
}
|
||||
|
||||
async function expectTimelineSticker(page: Page, roomId: string) {
|
||||
async function expectTimelineSticker(page: Page, roomId: string, contentUri: string) {
|
||||
const contentId = contentUri.split("/").slice(-1)[0];
|
||||
// Make sure it's in the right room
|
||||
await expect(page.locator(".mx_EventTile_sticker > a")).toHaveAttribute("href", new RegExp(`/${roomId}/`));
|
||||
|
||||
|
|
@ -80,13 +97,43 @@ async function expectTimelineSticker(page: Page, roomId: string) {
|
|||
// download URL.
|
||||
await expect(page.locator(`img[alt="${STICKER_NAME}"]`)).toHaveAttribute(
|
||||
"src",
|
||||
new RegExp("/download/localhost/somewhere"),
|
||||
new RegExp(`/localhost/${contentId}`),
|
||||
);
|
||||
}
|
||||
|
||||
async function expectFileTile(page: Page, roomId: string, contentUri: string) {
|
||||
await expect(page.locator(".mx_MFileBody_info_filename")).toContainText(STICKER_NAME);
|
||||
}
|
||||
|
||||
async function setWidgetAccountData(
|
||||
app: ElementAppPage,
|
||||
user: Credentials,
|
||||
stickerPickerUrl: string,
|
||||
provideCreatorUserId: boolean = true,
|
||||
) {
|
||||
await app.client.setAccountData("m.widgets", {
|
||||
[STICKER_PICKER_WIDGET_ID]: {
|
||||
content: {
|
||||
type: "m.stickerpicker",
|
||||
name: STICKER_PICKER_WIDGET_NAME,
|
||||
url: stickerPickerUrl,
|
||||
creatorUserId: provideCreatorUserId ? user.userId : undefined,
|
||||
},
|
||||
sender: user.userId,
|
||||
state_key: STICKER_PICKER_WIDGET_ID,
|
||||
type: "m.widget",
|
||||
id: STICKER_PICKER_WIDGET_ID,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
test.describe("Stickers", () => {
|
||||
test.use({
|
||||
displayName: "Sally",
|
||||
room: async ({ app }, use) => {
|
||||
const roomId = await app.client.createRoom({ name: ROOM_NAME_1 });
|
||||
await use({ roomId });
|
||||
},
|
||||
});
|
||||
|
||||
// We spin up a web server for the sticker picker so that we're not testing to see if
|
||||
|
|
@ -96,34 +143,19 @@ test.describe("Stickers", () => {
|
|||
//
|
||||
// See sendStickerFromPicker() for more detail on iframe comms.
|
||||
let stickerPickerUrl: string;
|
||||
test.beforeEach(async ({ webserver }) => {
|
||||
stickerPickerUrl = webserver.start(WIDGET_HTML);
|
||||
});
|
||||
|
||||
test("should send a sticker to multiple rooms", async ({ page, app, user }) => {
|
||||
const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
|
||||
test("should send a sticker to multiple rooms", async ({ webserver, page, app, user, room }) => {
|
||||
const roomId2 = await app.client.createRoom({ name: ROOM_NAME_2 });
|
||||
|
||||
await app.client.setAccountData("m.widgets", {
|
||||
[STICKER_PICKER_WIDGET_ID]: {
|
||||
content: {
|
||||
type: "m.stickerpicker",
|
||||
name: STICKER_PICKER_WIDGET_NAME,
|
||||
url: stickerPickerUrl,
|
||||
creatorUserId: user.userId,
|
||||
},
|
||||
sender: user.userId,
|
||||
state_key: STICKER_PICKER_WIDGET_ID,
|
||||
type: "m.widget",
|
||||
id: STICKER_PICKER_WIDGET_ID,
|
||||
},
|
||||
});
|
||||
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
|
||||
const widgetHtml = getWidgetHtml(contentUri, "image/png");
|
||||
stickerPickerUrl = webserver.start(widgetHtml);
|
||||
setWidgetAccountData(app, user, stickerPickerUrl);
|
||||
|
||||
await app.viewRoomByName(ROOM_NAME_1);
|
||||
await expect(page).toHaveURL(`/#/room/${roomId1}`);
|
||||
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
|
||||
await openStickerPicker(app);
|
||||
await sendStickerFromPicker(page);
|
||||
await expectTimelineSticker(page, roomId1);
|
||||
await expectTimelineSticker(page, room.roomId, contentUri);
|
||||
|
||||
// Ensure that when we switch to a different room that the sticker
|
||||
// goes to the right place
|
||||
|
|
@ -131,31 +163,40 @@ test.describe("Stickers", () => {
|
|||
await expect(page).toHaveURL(`/#/room/${roomId2}`);
|
||||
await openStickerPicker(app);
|
||||
await sendStickerFromPicker(page);
|
||||
await expectTimelineSticker(page, roomId2);
|
||||
await expectTimelineSticker(page, roomId2, contentUri);
|
||||
});
|
||||
|
||||
test("should handle a sticker picker widget missing creatorUserId", async ({ page, app, user }) => {
|
||||
const roomId1 = await app.client.createRoom({ name: ROOM_NAME_1 });
|
||||
|
||||
await app.client.setAccountData("m.widgets", {
|
||||
[STICKER_PICKER_WIDGET_ID]: {
|
||||
content: {
|
||||
type: "m.stickerpicker",
|
||||
name: STICKER_PICKER_WIDGET_NAME,
|
||||
url: stickerPickerUrl,
|
||||
// No creatorUserId
|
||||
},
|
||||
sender: user.userId,
|
||||
state_key: STICKER_PICKER_WIDGET_ID,
|
||||
type: "m.widget",
|
||||
id: STICKER_PICKER_WIDGET_ID,
|
||||
},
|
||||
});
|
||||
test("should handle a sticker picker widget missing creatorUserId", async ({
|
||||
webserver,
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
room,
|
||||
}) => {
|
||||
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, { type: "image/png" });
|
||||
const widgetHtml = getWidgetHtml(contentUri, "image/png");
|
||||
stickerPickerUrl = webserver.start(widgetHtml);
|
||||
setWidgetAccountData(app, user, stickerPickerUrl, false);
|
||||
|
||||
await app.viewRoomByName(ROOM_NAME_1);
|
||||
await expect(page).toHaveURL(`/#/room/${roomId1}`);
|
||||
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
|
||||
await openStickerPicker(app);
|
||||
await sendStickerFromPicker(page);
|
||||
await expectTimelineSticker(page, roomId1);
|
||||
await expectTimelineSticker(page, room.roomId, contentUri);
|
||||
});
|
||||
|
||||
test("should render invalid mimetype as a file", async ({ webserver, page, app, user, room }) => {
|
||||
const { content_uri: contentUri } = await app.client.uploadContent(STICKER_IMAGE, {
|
||||
type: "application/octet-stream",
|
||||
});
|
||||
const widgetHtml = getWidgetHtml(contentUri, "application/octet-stream");
|
||||
stickerPickerUrl = webserver.start(widgetHtml);
|
||||
setWidgetAccountData(app, user, stickerPickerUrl);
|
||||
|
||||
await app.viewRoomByName(ROOM_NAME_1);
|
||||
await expect(page).toHaveURL(`/#/room/${room.roomId}`);
|
||||
await openStickerPicker(app);
|
||||
await sendStickerFromPicker(page);
|
||||
await expectFileTile(page, room.roomId, contentUri);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -6,7 +6,9 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only
|
|||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import mime from "mime";
|
||||
import React, { createRef } from "react";
|
||||
import { logger } from "matrix-js-sdk/src/logger";
|
||||
import {
|
||||
EventType,
|
||||
MsgType,
|
||||
|
|
@ -15,6 +17,7 @@ import {
|
|||
M_LOCATION,
|
||||
M_POLL_END,
|
||||
M_POLL_START,
|
||||
IContent,
|
||||
} from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import SettingsStore from "../../../settings/SettingsStore";
|
||||
|
|
@ -144,6 +147,103 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
|
|||
this.forceUpdate();
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates that the filename extension and advertised mimetype
|
||||
* of the supplied image/file message content match and are actuallly video/image content.
|
||||
* For image/video messages with a thumbnail it also validates the mimetype is an image.
|
||||
* @param content The mxEvent content of the message
|
||||
* @returns A boolean indicating whether the validation passed
|
||||
*/
|
||||
private validateImageOrVideoMimetype = (content: IContent): boolean => {
|
||||
// As per the spec if filename is not present the body represents the filename
|
||||
const filename = content.filename ?? content.body;
|
||||
if (!filename) {
|
||||
logger.log("Failed to validate image/video content, filename null");
|
||||
return false;
|
||||
}
|
||||
// Check mimetype of the thumbnail
|
||||
if (!this.validateThumbnailMimetype(content)) {
|
||||
logger.log("Failed to validate file/image thumbnail");
|
||||
return false;
|
||||
}
|
||||
|
||||
// if there is no mimetype from the extesion or the mimetype is not image/video validation fails
|
||||
const typeFromExtension = mime.getType(filename) ?? undefined;
|
||||
const extensionMajorMimetype = this.parseMajorMimetype(typeFromExtension);
|
||||
if (!typeFromExtension || !this.validateAllowedMimetype(typeFromExtension, ["image", "video"])) {
|
||||
logger.log("Failed to validate image/video content, invalid or missing extension");
|
||||
return false;
|
||||
}
|
||||
|
||||
// if the content mimetype is set check it is an image/video and that it matches the extesion mimetype otherwise validation fails
|
||||
const contentMimetype = content.info?.mimetype;
|
||||
if (contentMimetype) {
|
||||
const contentMajorMimetype = this.parseMajorMimetype(contentMimetype);
|
||||
if (
|
||||
!this.validateAllowedMimetype(contentMimetype, ["image", "video"]) ||
|
||||
extensionMajorMimetype !== contentMajorMimetype
|
||||
) {
|
||||
logger.log("Failed to validate image/video content, invalid or missing mimetype");
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates that the advertised mimetype of the sticker content
|
||||
* is an image.
|
||||
* For stickers with a thumbnail it also validates the mimetype is an image.
|
||||
* @param content The mxEvent content of the message
|
||||
* @returns A boolean indicating whether the validation passed
|
||||
*/
|
||||
private validateStickerMimetype = (content: IContent): boolean => {
|
||||
// Validate mimetype of the thumbnail
|
||||
const thumbnailResult = this.validateThumbnailMimetype(content);
|
||||
if (!thumbnailResult) {
|
||||
logger.log("Failed to validate sticker thumbnail");
|
||||
return false;
|
||||
}
|
||||
// Validate mimetype of the content info is valid if it is set
|
||||
const contentMimetype = content.info?.mimetype;
|
||||
if (contentMimetype && !this.validateAllowedMimetype(contentMimetype, ["image"])) {
|
||||
logger.log("Failed to validate image/video content, invalid or missing mimetype/extensions");
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
/**
|
||||
* For image/video messages or stickers that have a thumnail mimetype specified,
|
||||
* validates that the major mimetime is image.
|
||||
* @param content The mxEvent content of the message
|
||||
* @returns A boolean indicating whether the validation passed
|
||||
*/
|
||||
private validateThumbnailMimetype = (content: IContent): boolean => {
|
||||
const thumbnailMimetype = content.info?.thumbnail_info?.mimetype;
|
||||
return !thumbnailMimetype || this.validateAllowedMimetype(thumbnailMimetype, ["image"]);
|
||||
};
|
||||
|
||||
/**
|
||||
* Validates that the major part of a mimetime from an allowed list.
|
||||
* @param mimetype The mimetype to validate
|
||||
* @param allowedMajorMimeTypes The list of allowed major mimetimes
|
||||
* @returns A boolean indicating whether the validation passed
|
||||
*/
|
||||
private validateAllowedMimetype = (mimetype: string, allowedMajorMimeTypes: string[]): boolean => {
|
||||
const majorMimetype = this.parseMajorMimetype(mimetype);
|
||||
return !!majorMimetype && allowedMajorMimeTypes.includes(majorMimetype);
|
||||
};
|
||||
|
||||
/**
|
||||
* Parses and returns the the major part of a mimetype(before the "/").
|
||||
* @param mimetype As optional mimetype string to parse
|
||||
* @returns The major part of the mimetype string or undefined
|
||||
*/
|
||||
private parseMajorMimetype(mimetype?: string): string | undefined {
|
||||
return mimetype?.split("/")[0];
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const content = this.props.mxEvent.getContent();
|
||||
const type = this.props.mxEvent.getType();
|
||||
|
|
@ -165,6 +265,13 @@ export default class MessageEvent extends React.Component<IProps> implements IMe
|
|||
BodyType = UnknownBody;
|
||||
}
|
||||
|
||||
if (
|
||||
((BodyType === MImageBody || BodyType == MVideoBody) && !this.validateImageOrVideoMimetype(content)) ||
|
||||
(BodyType === MStickerBody && !this.validateStickerMimetype(content))
|
||||
) {
|
||||
BodyType = this.bodyTypes.get(MsgType.File)!;
|
||||
}
|
||||
|
||||
// TODO: move to eventTypes when location sharing spec stabilises
|
||||
if (M_LOCATION.matches(type) || (type === EventType.RoomMessage && msgtype === MsgType.Location)) {
|
||||
BodyType = MLocationBody;
|
||||
|
|
|
|||
|
|
@ -33,6 +33,16 @@ jest.mock("../../../../../src/components/views/messages/MImageBody", () => ({
|
|||
default: () => <div data-testid="image-body" />,
|
||||
}));
|
||||
|
||||
jest.mock("../../../../../src/components/views/messages/MVideoBody", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="video-body" />,
|
||||
}));
|
||||
|
||||
jest.mock("../../../../../src/components/views/messages/MFileBody", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="file-body" />,
|
||||
}));
|
||||
|
||||
jest.mock("../../../../../src/components/views/messages/MImageReplyBody", () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="image-reply-body" />,
|
||||
|
|
@ -95,8 +105,8 @@ describe("MessageEvent", () => {
|
|||
describe("when an image with a caption is sent", () => {
|
||||
let result: RenderResult;
|
||||
|
||||
beforeEach(() => {
|
||||
event = mkEvent({
|
||||
function createEvent(mimetype: string, filename: string, msgtype: string) {
|
||||
return mkEvent({
|
||||
event: true,
|
||||
type: EventType.RoomMessage,
|
||||
user: client.getUserId()!,
|
||||
|
|
@ -105,19 +115,19 @@ describe("MessageEvent", () => {
|
|||
body: "caption for a test image",
|
||||
format: "org.matrix.custom.html",
|
||||
formatted_body: "<strong>caption for a test image</strong>",
|
||||
msgtype: MsgType.Image,
|
||||
filename: "image.webp",
|
||||
msgtype: msgtype,
|
||||
filename: filename,
|
||||
info: {
|
||||
w: 40,
|
||||
h: 50,
|
||||
mimetype: mimetype,
|
||||
},
|
||||
url: "mxc://server/image",
|
||||
},
|
||||
});
|
||||
result = renderMessageEvent();
|
||||
});
|
||||
}
|
||||
|
||||
it("should render a TextualBody and an ImageBody", () => {
|
||||
function mockMedia() {
|
||||
fetchMock.getOnce(
|
||||
"https://server/_matrix/media/v3/download/server/image",
|
||||
{
|
||||
|
|
@ -125,8 +135,38 @@ describe("MessageEvent", () => {
|
|||
},
|
||||
{ sendAsJson: false },
|
||||
);
|
||||
}
|
||||
|
||||
it("should render a TextualBody and an ImageBody", () => {
|
||||
event = createEvent("image/webp", "image.webp", MsgType.Image);
|
||||
result = renderMessageEvent();
|
||||
mockMedia();
|
||||
result.getByTestId("image-body");
|
||||
result.getByTestId("textual-body");
|
||||
});
|
||||
|
||||
it("should render a TextualBody and a FileBody for mismatched extension", () => {
|
||||
event = createEvent("image/webp", "image.exe", MsgType.Image);
|
||||
result = renderMessageEvent();
|
||||
mockMedia();
|
||||
result.getByTestId("file-body");
|
||||
result.getByTestId("textual-body");
|
||||
});
|
||||
|
||||
it("should render a TextualBody and an VideoBody", () => {
|
||||
event = createEvent("video/mp4", "video.mp4", MsgType.Video);
|
||||
result = renderMessageEvent();
|
||||
mockMedia();
|
||||
result.getByTestId("video-body");
|
||||
result.getByTestId("textual-body");
|
||||
});
|
||||
|
||||
it("should render a TextualBody and a FileBody for non-video mimetype", () => {
|
||||
event = createEvent("application/octet-stream", "video.mp4", MsgType.Video);
|
||||
result = renderMessageEvent();
|
||||
mockMedia();
|
||||
result.getByTestId("file-body");
|
||||
result.getByTestId("textual-body");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8411,6 +8411,11 @@ mime@1.6.0:
|
|||
resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
|
||||
integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
|
||||
|
||||
mime@^4.0.4:
|
||||
version "4.0.4"
|
||||
resolved "https://registry.yarnpkg.com/mime/-/mime-4.0.4.tgz#9f851b0fc3c289d063b20a7a8055b3014b25664b"
|
||||
integrity sha512-v8yqInVjhXyqP6+Kw4fV3ZzeMRqEW6FotRsKXjRS5VMTNIuXsdRoAvklpoRgSqXm6o9VNH4/C0mgedko9DdLsQ==
|
||||
|
||||
mimic-fn@^2.1.0:
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
|
||||
|
|
|
|||
Loading…
Reference in a new issue