Manual cherrypick #24622

components/channel_layout/center_channel/center_channel.tsx

@@ -11,6 +11,8 @@ import ChannelIdentifierRouter from 'components/channel_layout/channel_identifie
 import PlaybookRunner from 'components/channel_layout/playbook_runner';
 import {makeAsyncComponent} from 'components/async_load';
 
+import {IDENTIFIER_PATH_PATTERN, ID_PATH_PATTERN, TEAM_NAME_PATH_PATTERN} from 'utils/path';
+
 import type {OwnProps, PropsFromRedux} from './index';
 
 const LazyChannelHeaderMobile = makeAsyncComponent(
@@ -102,7 +104,7 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
  <div className='row main'>
  <Switch>
  <Route
- path={`${url}/pl/:postid`}
+ path={`${url}/pl/:postid(${ID_PATH_PATTERN})`}
  render={(props) => (
  <PermalinkView
  {...props}
@@ -111,27 +113,27 @@ export default class CenterChannel extends React.PureComponent<Props, State> {
  )}
  />
  <Route
- path='/:team/:path(channels|messages)/:identifier/:postid?'
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/:path(channels|messages)/:identifier(${IDENTIFIER_PATH_PATTERN})/:postid(${ID_PATH_PATTERN})?`}
  component={ChannelIdentifierRouter}
  />
  <Route
- path='/:team/_playbooks/:playbookId/run'
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/_playbooks/:playbookId(${ID_PATH_PATTERN})/run`}
  >
  <PlaybookRunner/>
  </Route>
  {isCollapsedThreadsEnabled ? (
  <Route
- path='/:team/threads/:threadIdentifier?'
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/threads/:threadIdentifier(${ID_PATH_PATTERN})?`}
  component={LazyGlobalThreads}
  />
  ) : null}
  <Route
- path='/:team/drafts'
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/drafts`}
  component={LazyDrafts}
  />
  {insightsAreEnabled ? (
  <Route
- path='/:team/activity-and-insights'
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/activity-and-insights`}
  component={LazyActivityAndInsights}
  />
  ) : null}

components/root/root.tsx

@@ -47,6 +47,7 @@ import BrowserStore from 'stores/browser_store';
 
 import Constants, {StoragePrefixes, WindowSizes} from 'utils/constants';
 import {EmojiIndicesByAlias} from 'utils/emoji';
+import {TEAM_NAME_PATH_PATTERN} from 'utils/path';
 import * as UserAgent from 'utils/user_agent';
 import * as Utils from 'utils/utils';
 
@@ -116,7 +117,7 @@ const OnBoardingTaskList = makeAsyncComponent('OnboardingTaskList', LazyOnBoardi
 
 type LoggedInRouteProps<T> = {
  component: React.ComponentType<T>;
- path: string;
+ path: string | string[];
  theme?: Theme; // the routes that send the theme are the ones that will actually need to show the onboarding tasklist
 };
 function LoggedInRoute<T>(props: LoggedInRouteProps<T>) {
@@ -691,7 +692,7 @@ export default class Root extends React.PureComponent<Props, State> {
  ))}
  <LoggedInRoute
  theme={this.props.theme}
- path={'/:team'}
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})`}
  component={TeamController}
  />
  <RootRedirect/>

components/team_controller/team_controller.tsx

@@ -12,6 +12,7 @@ import {reconnect} from 'actions/websocket_actions.jsx';
 import Constants from 'utils/constants';
 import {isIosSafari} from 'utils/user_agent';
 import {cmdOrCtrlPressed, isKeyPressed} from 'utils/utils';
+import {TEAM_NAME_PATH_PATTERN} from 'utils/path';
 
 import {makeAsyncComponent} from 'components/async_load';
 import ChannelController from 'components/channel_layout/channel_controller';
@@ -210,17 +211,17 @@ function TeamController(props: Props) {
  return (
  <Switch>
  <Route
- path={'/:team/integrations'}
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/integrations`}
  component={BackstageController}
  />
  <Route
- path={'/:team/emoji'}
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/emoji`}
  component={BackstageController}
  />
  {props.plugins?.map((plugin) => (
  <Route
  key={plugin.id}
- path={'/:team/' + (plugin as any).route}
+ path={`/:team(${TEAM_NAME_PATH_PATTERN})/` + (plugin as any).route}
  render={() => (
  <Pluggable
  pluggableName={'NeedsTeamComponent'}

utils/path.ts

@@ -0,0 +1,19 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+export const ID_PATH_PATTERN = '[a-z0-9]{26}';
+
+// This should cover:
+// - Team name (lowercase english characters, numbers or -)
+// - Two ids separated by __ (userID__userID)
+export const TEAM_NAME_PATH_PATTERN = '[a-z0-9\\-_]+';
+
+// This should cover:
+// - Channel name
+// - Channel ID
+// - Group Channel Name (40 length UID)
+// - DM Name (userID__userID)
+// - Username prefixed by a @
+// - User ID
+// - Email
+export const IDENTIFIER_PATH_PATTERN = '[@a-zA-Z\\-_0-9][@a-zA-Z\\-_0-9.]*';

utils/utils.tsx

@@ -1464,15 +1464,15 @@ export function isValidPassword(password: string, passwordConfig: ReturnType<typ
 }
 
 function isChannelOrPermalink(link: string) {
- let match = (/\/([^/]+)\/channels\/(\S+)/).exec(link);
+ let match = (/\/([a-z0-9\-_]+)\/channels\/([a-z0-9\-__][a-z0-9\-__.]+)/).exec(link);
  if (match) {
  return {
  type: 'channel',
  teamName: match[1],
  channelName: match[2],
  };
  }
- match = (/\/([^/]+)\/pl\/(\w+)/).exec(link);
+ match = (/\/([a-z0-9\-__]+)\/pl\/([a-z0-9]+)/).exec(link);
  if (match) {
  return {
  type: 'permalink',