Fix/vulnerabilities 02

README.md

@@ -24,7 +24,8 @@ Install in Chrome Web Store directly: [link](https://chromewebstore.google.com/d
 ## Release
 | Version | Description | PR | Note |
 | ------ | ------ | ------ | ------ |
-| v1.3.1 | fixed some security issue | https://github.com/hj24/bookmark-search/pull/19 ||
+| v1.3.2 | fixed some security issues & clear input bug | https://github.com/hj24/bookmark-search/pull/20 ||
+| v1.3.1 | fixed some security issues | https://github.com/hj24/bookmark-search/pull/19 ||
 | v1.3.0 | auto focus input after initial load | https://github.com/hj24/bookmark-search/pull/17 ||
 | v1.2.2 | optmize doc | https://github.com/hj24/bookmark-search/pull/16 ||
 | v1.2.1 | fix bug, filter folder correctly for imported bookmarks | https://github.com/hj24/bookmark-search/pull/15 | Issue: https://github.com/hj24/bookmark-search/issues/9 |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bookmark-search",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "dependencies": {
     "@craco/craco": "^7.1.0",

public/manifest.json

@@ -1,8 +1,8 @@
 {
   "name": "bookmark-search",
   "description": "Find the bookmark you want",
-  "version": "1.3.1",
-  "version_name": "1.3.1+build.2",
+  "version": "1.3.2",
+  "version_name": "1.3.2+build.3",
   "manifest_version": 3,
   "permissions": [
     "bookmarks"

src/pages/popup/search.test.tsx

@@ -0,0 +1,174 @@
+import React, {useEffect} from 'react';
+import {act, fireEvent, render, screen, waitFor} from '@testing-library/react';
+import Search from './search';
+
+jest.mock('@douyinfe/semi-icons', () => ({
+    IconChevronDownStroked: () => <span />,
+    IconSearch: () => <span />,
+}));
+
+jest.mock('../../utils/log', () => ({
+    Logger: jest.fn().mockImplementation(() => ({
+        debug: jest.fn(),
+        error: jest.fn(),
+        info: jest.fn(),
+        warning: jest.fn(),
+    })),
+}));
+
+jest.mock('@douyinfe/semi-ui', () => ({
+    Button: ({children, onClick}: any) => <button onClick={onClick}>{children}</button>,
+    Divider: ({children}: any) => <div>{children}</div>,
+    Input: React.forwardRef(function MockInput(
+        {onChange, onClear, onEnterPress, showClear, value = ''}: any,
+        ref: any,
+    ) {
+        return (
+            <div>
+                <input
+                    aria-label="bookmark-search-input"
+                    ref={ref}
+                    value={value}
+                    onChange={e => onChange?.(e.target.value, e)}
+                    onKeyDown={e => {
+                        if (e.key === 'Enter') {
+                            onEnterPress?.(e);
+                        }
+                    }}
+                />
+                {showClear && value ? (
+                    <button
+                        aria-label="clear search"
+                        onMouseDown={e => {
+                            onChange?.('', e);
+                            onClear?.(e);
+                        }}>
+                        clear
+                    </button>
+                ) : null}
+            </div>
+        );
+    }),
+    List: ({dataSource, renderItem, emptyContent}: any) => (
+        <div>
+            {dataSource.length === 0 ? (
+                <div>{emptyContent}</div>
+            ) : (
+                dataSource.map((item: any, index: number) => (
+                    <React.Fragment key={item.id ?? index}>{renderItem(item, index)}</React.Fragment>
+                ))
+            )}
+        </div>
+    ),
+    Spin: () => <div>loading</div>,
+    Toast: {
+        error: jest.fn(),
+        warning: jest.fn(),
+    },
+}));
+
+jest.mock('react-infinite-scroller', () => ({
+    __esModule: true,
+    default: function MockInfiniteScroll({children, hasMore, loadMore}: any) {
+        useEffect(() => {
+            if (hasMore) {
+                loadMore();
+            }
+        }, [hasMore, loadMore]);
+
+        return <div>{children}</div>;
+    },
+}));
+
+jest.mock('../../components/thread/item', () => ({
+    ThreadItem: ({item}: any) => <div>{item.title}</div>,
+}));
+
+const recentBookmarks = [
+    {
+        id: 'recent-1',
+        parentId: 'root',
+        title: 'Recent One',
+        url: 'https://recent.example',
+    },
+];
+
+const searchBookmarks = [
+    {
+        id: 'search-1',
+        parentId: 'root',
+        title: 'Search One',
+        url: 'https://search.example',
+    },
+];
+
+const mockChromeBookmarks = (searchImpl: jest.Mock) => {
+    (global as any).chrome = {
+        bookmarks: {
+            getRecent: jest.fn((_count, callback) => callback(recentBookmarks)),
+            remove: jest.fn(),
+            search: searchImpl,
+            update: jest.fn(),
+        },
+    };
+};
+
+describe('Search clear behavior', () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+
+    test('clicking showClear resets the current search back to Recent Added', async () => {
+        mockChromeBookmarks(jest.fn((_query, callback) => callback(searchBookmarks)));
+
+        render(<Search />);
+
+        const input = screen.getByLabelText('bookmark-search-input');
+        await screen.findByText('Recent One');
+
+        fireEvent.change(input, {target: {value: 'abc'}});
+
+        await screen.findByText('Search One');
+        expect(screen.getByText('Search Results')).toBeInTheDocument();
+
+        fireEvent.mouseDown(screen.getByLabelText('clear search'));
+
+        await waitFor(() => expect(input).toHaveValue(''));
+        expect(screen.getByText('Recent Added')).toBeInTheDocument();
+        expect(screen.getByText('Recent One')).toBeInTheDocument();
+        expect(screen.queryByText('Search One')).not.toBeInTheDocument();
+        expect((global as any).chrome.bookmarks.getRecent).toHaveBeenCalledTimes(1);
+    });
+
+    test('late search results are ignored after showClear resets to Recent Added', async () => {
+        let resolveSearch: ((items: typeof searchBookmarks) => void) | undefined;
+        mockChromeBookmarks(
+            jest.fn((_query, callback) => {
+                resolveSearch = callback;
+            }),
+        );
+
+        render(<Search />);
+
+        const input = screen.getByLabelText('bookmark-search-input');
+        await screen.findByText('Recent One');
+
+        fireEvent.change(input, {target: {value: 'abc'}});
+
+        await waitFor(() =>
+            expect((global as any).chrome.bookmarks.search).toHaveBeenCalledWith('abc', expect.any(Function)),
+        );
+        fireEvent.mouseDown(screen.getByLabelText('clear search'));
+
+        await waitFor(() => expect(screen.getByText('Recent Added')).toBeInTheDocument());
+
+        act(() => {
+            resolveSearch?.(searchBookmarks);
+        });
+
+        await waitFor(() => expect(screen.queryByText('Search One')).not.toBeInTheDocument());
+        expect(input).toHaveValue('');
+        expect(screen.getByText('Recent Added')).toBeInTheDocument();
+        expect(screen.getByText('Recent One')).toBeInTheDocument();
+    });
+});

src/pages/popup/search.tsx

@@ -18,9 +18,9 @@ const Search: React.FC = () => {
     // 输入相关
     const [query, setQuery] = useState('');
     const inputRef = useRef<HTMLInputElement>(null);
+    const latestQueryRef = useRef('');
     // 搜索结果相关
     const [recent, setRecent] = useState<Bookmark[]>([]);
-    const [search, setSearch] = useState<Bookmark[]>([]);
     // thread 相关
     const [threadSource, setThreadSource] = useState<Bookmark[]>([]);
     const [thread, setThread] = useState<Bookmark[]>([]);
@@ -36,7 +36,7 @@ const Search: React.FC = () => {
             try {
                 chrome.bookmarks.getRecent(DEFAULT_PAGE_NUMBER, (res: chrome.bookmarks.BookmarkTreeNode[]) => {
                     const recentAdded: Bookmark[] = [];
-                    res.forEach((val, ...args) => {
+                    res.forEach(val => {
                         // NOTE: 最近添加结果过滤 folder
                         if (isFolder(val)) {
                             return;
@@ -78,13 +78,14 @@ const Search: React.FC = () => {
         loadInitialData();
 
         return () => {
-            clearThread(true, true);
+            clearThread(true);
         };
     }, []);
 
     // NOTE: onChange 输入为空时，正常 setQuery 但不进行搜索，在按回车时清空降级处理
-    const onChange = async (val: string, e: React.ChangeEvent<HTMLInputElement>) => {
+    const onChange = async (val: string) => {
         setQuery(val);
+        latestQueryRef.current = val;
 
         logger.info(`on input change: ${val}`);
 
@@ -99,28 +100,34 @@ const Search: React.FC = () => {
         postSearch();
     };
 
-    const clearThread = (clearRecent: boolean, clearSearch: boolean) => {
+    const clearThread = (clearRecent: boolean) => {
         if (clearRecent) {
             setRecent([]);
         }
-        if (clearSearch) {
-            setSearch([]);
-        }
         setThread([]);
         setThreadCursor(0);
         setThreadSource([]);
         setThreadLoading(false);
         setThreadFetchCnt(0);
     };
 
+    const resetToRecentAdded = () => {
+        latestQueryRef.current = '';
+        setQuery('');
+        setThreadContext(CTX_RECENT_ADDED);
+        clearThread(false);
+        setThreadHint(HINT_RECENT_ADDED);
+        setThreadSource(recent);
+    };
+
     // NOTE 搜索前置步骤:
     // 1. 开启 loading
     // 2. 清空除了 recent 外的其他数据
     // 3. 更新 thread hint
     const preSearch = () => {
         logger.info('pre search start');
         setThreadContext(CTX_SEARCH);
-        clearThread(false, true);
+        clearThread(false);
         setThreadHint(HINT_SEARCH_RESULTS);
         logger.info('pre search completed');
     };
@@ -134,11 +141,17 @@ const Search: React.FC = () => {
     };
 
     const promiseSearch = (query: string) => {
+        const normalizedQuery = query.trim();
         return new Promise((resolve, reject) => {
             try {
-                chrome.bookmarks.search(query.trim(), (res: chrome.bookmarks.BookmarkTreeNode[]) => {
+                chrome.bookmarks.search(normalizedQuery, (res: chrome.bookmarks.BookmarkTreeNode[]) => {
+                    if (latestQueryRef.current.trim() !== normalizedQuery) {
+                        logger.info(`ignore stale search results: ${normalizedQuery}`);
+                        resolve([]);
+                        return;
+                    }
                     const searchResults: Bookmark[] = [];
-                    res.forEach((val, ...args) => {
+                    res.forEach(val => {
                         // NOTE: 搜索结果过滤 folder
                         if (isFolder(val)) {
                             return;
@@ -150,7 +163,6 @@ const Search: React.FC = () => {
                             url: val.url ? val.url : '',
                         });
                     });
-                    setSearch(searchResults);
                     setThreadSource(searchResults);
                     logger.debug('promiseSearch results: ', searchResults);
                     resolve(searchResults);
@@ -166,22 +178,19 @@ const Search: React.FC = () => {
         });
     };
 
-    const onEnterPress = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    const onEnterPress = async () => {
         logger.info(`on input enter press: ${query}`);
 
         preSearch();
 
         // NOTE: 输入为空，并且按回车搜索时，清空输入并降级为展示最近添加
         if (query.trim() === '') {
-            logger.warning('empty search content');
+            logger.info('empty search content');
             Toast.warning({
                 content: 'Empty input',
                 duration: 3,
             });
-            setQuery('');
-            setThreadContext(CTX_RECENT_ADDED);
-            setThreadHint(HINT_RECENT_ADDED);
-            setThreadSource(recent);
+            resetToRecentAdded();
             postSearch();
             return;
         }
@@ -304,6 +313,11 @@ const Search: React.FC = () => {
         return <ThreadItem item={item} localId={ind} deleteCallback={deleteBookmark} updateCallback={updateBookmark} />;
     };
 
+    const onClear = () => {
+        logger.info('clear search input');
+        resetToRecentAdded();
+    };
+
     return (
         <div className="search flex flex-col">
             <div className="search-input">
@@ -314,6 +328,7 @@ const Search: React.FC = () => {
                     showClear
                     value={query}
                     onChange={onChange}
+                    onClear={onClear}
                     onEnterPress={onEnterPress}></Input>
             </div>
             <Divider margin="12px" align="center">