feat: handle command injection optionally by khushal87 · Pull Request #1548 · GetStream/stream-chat-js

khushal87 · 2025-05-28T08:04:53Z

The goal of the PR is to handle command injection and apply the command settings to the text using middleware that the SDK or apps can plug in. The existing commands middleware will be responsible for setting the command state to the textComposer, which can be used by the other middleware.

SDKs can basically add something like this to support the commands UI on message input:

 messageComposer.compositionMiddlewareExecutor.insert({
    middleware: [createCommandInjectionMiddleware(messageComposer)],
    position: { after: 'stream-io/message-composer-middleware/attachments' },
  });

  messageComposer.draftCompositionMiddlewareExecutor.insert({
    middleware: [createDraftCommandInjectionMiddleware(messageComposer)],
    position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
  });

  messageComposer.textComposer.middlewareExecutor.insert({
    middleware: [createActiveCommandGuardMiddleware() as TextComposerMiddleware],
    position: { before: 'stream-io/text-composer/commands-middleware' },
  });

  messageComposer.textComposer.middlewareExecutor.insert({
    middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
    position: { after: 'stream-io/text-composer/commands-middleware' },
  });

github-actions · 2025-05-28T08:05:50Z

Size Change: +1.91 kB (+0.44%)

Total Size: 432 kB

Filename	Size	Change
`dist/cjs/index.browser.cjs`	125 kB	+635 B (+0.51%)
`dist/cjs/index.node.cjs`	169 kB	+671 B (+0.4%)
`dist/esm/index.js`	138 kB	+603 B (+0.44%)

_{compressed-size-action}

…dle-command-injection

src/messageComposer/middleware/textComposer/commands.ts

MartinCupela · 2025-06-03T15:09:27Z

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

  },
 });
+
+export const isTextMatched = (input: string, command: string): boolean => {


Isn't this a duplicate logic already present in another util function in this file?

Which utility are you talking about here?

src/messageComposer/middleware/textComposer/applyCommandSettings.ts

src/messageComposer/middleware/messageComposer/commandInjection.ts

src/messageComposer/middleware/textComposer/applyCommandSettings.ts

MartinCupela · 2025-06-12T14:09:46Z

I think this PR should also solve the scenario, when a user wants to cancel the command immediately after its selection - for example by pressing backspace - when there is no change event, but rather keyDown event.

…dle-command-injection

src/messageComposer/middleware/textComposer/commandStringExtraction.ts

…dle-command-injection

MartinCupela · 2025-06-19T08:26:06Z

src/messageComposer/middleware/textComposer/commands.ts

+
+        const commands = searchSource?.query(searchQuery).items;
+
+        const matchedCommand = commands?.find((command) =>


@khushal87 does it make sense to perform query(searchQuery) and then again commands.find()? Isn't it doing the same with the difference that commands.find in this case would just be commands[0] (as find returns on the first matched and the first matched is the at 0 index before query returns all the matches)?

I will simplify it. Makes sense

MartinCupela · 2025-06-19T08:27:59Z

src/messageComposer/middleware/textComposer/commands.ts


+        const query = triggerWithToken.slice(1);
+
+        const searchQuery = getFirstWordFromText(query);


Why is it necessary to get first word from query if the query itself is just a trigger followed by chars that are not white space?

Now, if you allow spaces, the user can paste anything let's say /giphy good morning, in that case,e the query will be giphy good morning but the search source cannot return anything as the pattern didn't match. That is why we get the first word from the query just for the command search.

MartinCupela · 2025-06-19T08:35:24Z

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

    new RegExp(
      isCommand
-        ? `^[${trigger}]${triggerNorWhitespace}$`
+        ? `^[${trigger}]${notTrigger}$`


why do we allow white space?

The problem is the function returns null for any text except the pattern /command which, we cannot rely on if we want to use it as an input for search later in the middleware. That is why I allowed it.

MartinCupela · 2025-06-19T08:49:13Z

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

+ * @param textToBeMatchedWith
+ * @returns
+ */
+export const startsWithTextAndSpace = (


I think we may not need this function. It is used in a single place and it actually removes white space that was kept previously due to allowing white space in getTriggerWithToken

Well, this function just checks if the query starts with the command name or not, and we are obviously allowing at least one or more spaces so that only then it would return true for a match, i.e. /unban will be a matched command and /unban would not for the onChange.

MartinCupela · 2025-06-19T08:51:38Z

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

+ * @param text - The input text from which to extract the first word.
+ * @returns The first word found in the text, or an empty string if no word is found.
+ */
+export const getFirstWordFromText = (text: string): string => {


Also this function exists only because we introduced this change:
https://github.com/GetStream/stream-chat-js/pull/1548/files#diff-3f1a5dd2e123452ae2ff28a98798ca79d3cf5fde3c8f1c82d3e406c95d7967e5R26

MartinCupela · 2025-06-19T08:54:27Z

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

+ * @param trigger - The trigger string to be removed from the start of the text.
+ * @returns The text with the trigger removed from the start.
+ */
+export const stripTriggerFromText = (text: string, trigger: string) =>


This does not strip trigger. In the single place where it is used it strips a trigger with command name. Trigger is for example "/" but not "/ban".
The function itself could also be renamed to stripTextFromText

How about stripTextFromStartOfTheText as it strips the text from the start of the text?

MartinCupela · 2025-06-19T08:58:32Z

src/messageComposer/textComposer.ts

  };

+  setCommand = (command: CommandResponse | null) => {
+    if (command === this.command) return;


This may not work if the objects have not the same memory reference, but their content refer to the same command. Maybe something like command.name === this.command.name would be more appropriate or to have a function that evaluates that two command objects are equal.

Fixed using the 1st way

…on in composer text (#1571)

## [9.8.0](v9.7.0...v9.8.0) (2025-06-19) ### Bug Fixes * allow to nullify reminder's remind_at value ([#1569](#1569)) ([c1c6cf4](c1c6cf4)) * propagate stopTimerRefreshBoundaryMs to all reminder timers on ReminderManager config update ([#1568](#1568)) ([944d1c2](944d1c2)) * run onChange middleware on TextComposer.insertText ([#1570](#1570)) ([3768007](3768007)) ### Features * handle command injection optionally ([#1548](#1548)) ([ea912f9](ea912f9)) ### Refactors * protect ReminderPaginator filters and sort properties ([#1567](#1567)) ([1a3f4c4](1a3f4c4))

stream-ci-bot · 2025-06-19T15:16:07Z

🎉 This PR is included in version 9.8.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

feat: handle command injection optionally

971ed00

khushal87 requested review from MartinCupela, arnautov-anton, myandrienko, oliverlaz, santhoshvai, szuperaz and vishalnarkhede as code owners May 28, 2025 08:04

khushal87 requested a review from isekovanic May 28, 2025 08:05

khushal87 added 6 commits May 28, 2025 13:38

test: fix broken test

318e03c

test: fix broken test

04988f0

test: fix broken test

780c52c

Merge branch 'master' of github.com:GetStream/stream-chat-js into han…

84d861a

…dle-command-injection

Merge branch 'master' of github.com:GetStream/stream-chat-js into han…

c095a38

…dle-command-injection

fix: add setCommand setter

0b3eccd