fix: href link should not starts with javascript scheme (#276)

ticket: [SECURE-626]

[SECURE-626]:
https://sendbird.atlassian.net/browse/SECURE-626?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

src/__tests__/utils/index.test.ts

@@ -0,0 +1,19 @@
+import { asSafeURL } from '../../utils';
+
+describe('asSafeURL', () => {
+  test('should return the same URL if it is already safe', () => {
+    expect(asSafeURL('http://example.com')).toBe('http://example.com');
+    expect(asSafeURL('https://example.com')).toBe('https://example.com');
+    expect(asSafeURL('mailto:[email protected]')).toBe('mailto:[email protected]');
+  });
+
+  test('should return a safe URL if it is not safe', () => {
+    expect(asSafeURL('javascript:alert(1)')).toBe('#');
+    expect(asSafeURL('javascript%3Aalert%281%29')).toBe('#');
+    expect(asSafeURL('data:text/html;base64,ABCDE==')).toBe('#');
+  });
+
+  test('should append a https:// protocol to the URL if it is missing', () => {
+    expect(asSafeURL('example.com')).toBe('https://example.com');
+  });
+});

src/components/TokensBody.tsx

@@ -5,7 +5,7 @@ import BotMessageBottom from './BotMessageBottom';
 import SourceContainer, { Source } from './SourceContainer';
 import { CodeBlock } from './ui/CodeBlock';
 import { useConstantState } from '../context/ConstantContext';
-import { replaceWithRegex, Token, TokenType } from '../utils';
+import { asSafeURL, replaceWithRegex, Token, TokenType } from '../utils';
 
 const urlRegex =
   /(?:https?:\/\/|www\.)?[-a-zA-Z0-9@:%._+~#=]{1,256}\.(xn--)?[a-z]{2,20}\b([-a-zA-Z0-9@:%_+[\],.~#?&/=]*[-a-zA-Z0-9@:%_+~#?&/=])*/g;
@@ -105,7 +105,7 @@ export default function TokensBody({ tokens, sources }: TokensBodyProps) {
                       <a
                         key={`${match}-${index}`}
                         className="sendbird-word__url"
-                        href={groups[2]}
+                        href={asSafeURL(groups[2])}
                         target="_blank"
                         rel="noreferrer"
                       >
@@ -121,7 +121,7 @@ export default function TokensBody({ tokens, sources }: TokensBodyProps) {
                       <a
                         key={`${match}-${index}`}
                         className="sendbird-word__url"
-                        href={match}
+                        href={asSafeURL(match)}
                         target="_blank"
                         rel="noreferrer"
                       >

src/utils/index.ts

@@ -350,3 +350,22 @@ export function isWordpress() {
   // @ts-expect-error
   return typeof window !== 'undefined' && !!window['wp'];
 }
+
+export function asSafeURL(url: string) {
+  let safeURL = decodeURIComponent(url);
+
+  try {
+    const { protocol } = new URL(safeURL);
+    if (['https:', 'http:'].some((it) => it === protocol.toLowerCase())) {
+      return safeURL;
+    } else {
+      return '#';
+    }
+  } catch (error) {
+    if (!safeURL.startsWith('http://') && !safeURL.startsWith('https://')) {
+      safeURL = 'https://' + safeURL;
+    }
+  }
+
+  return safeURL;
+}

vitest.config.ts

@@ -3,7 +3,8 @@ import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
   test: {
+    globals: true,
     environment: 'jsdom', // Use jsdom environment for browser-like testing
-    include: ['test/**/*.test.ts'], // Specify the test files pattern
+    include: ['src/**/*.test.ts'], // Specify the test files pattern
   },
 });