Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ feat: enter room #219

Merged
merged 2 commits into from
Jul 6, 2023
Merged

✨ feat: enter room #219

merged 2 commits into from
Jul 6, 2023

Conversation

JohnsonMao
Copy link
Contributor

Why need this change? / Root cause:

  • Enter room task in Spring 4

Changes made:

  • Refactor the EnterPrivateRoomModal component by extracting the logic for entering a room to the RoomListView container
  • Adjust the type of setPasswordValues in PasswordField to make it more generic
  • Implement enter room stories
  • Add paste password feature

Test Scope / Change impact:

  • mock rooms api

Issue

@JohnsonMao JohnsonMao force-pushed the feature/enter-room branch from 19dc6a6 to c2c268b Compare June 30, 2023 06:37
@JohnsonMao
Copy link
Contributor Author

@Parkerhiphop @ttpss930141011 @Yuwen-ctw 我有個小問題想請教一下
我嘗試將錯誤訊息顯示成中文

// 某個文件定義
export const roomEntryError: Record<RoomEntryError["message"], string> = {
  "room is full": "房間人數已滿!",
  "wrong password": "房間密碼錯誤!",
  "you can only join 1 room": "一人只能進入一間房!",
};

// 在需要 handle error 並轉成中文的 component 使用
  .catch((err: AxiosError<RoomEntryError>) => {
    const roomEnterErrorKey = err.response?.data.message;
    const errorMessage = roomEnterErrorKey
      ? roomEntryError[roomEnterErrorKey]
      : "error!";

    firePopup({ title: errorMessage });
  })

目前運行是可以呈現中文字,但在弱點掃描時
被檢測到硬編碼的疑慮
我該如何解決這個問題
還是先回退到後端回傳甚麼錯誤訊息就直接呈現

  .catch((err: AxiosError<RoomEntryError>) => {
    const errorMessage = err.response?.data.message || "error!";

    firePopup({ title: errorMessage  });
  })

@Yuwen-ctw
Copy link
Contributor

Hello @JohnsonMao
不好意思,我沒有任何資安相關的經驗,不過對於你提到的問題及其解方非常好奇,以下分享我會嘗試的解法。
再參考 sonarcloud的報告 後,它表示偵測到此 PR 有將敏感資訊硬寫入源碼的情形,而在 How can I fix it ? 的頁簽中有提到,建議的方法是將敏感資訊存到資料庫 (應該不是我們會考慮的解法),而再於頁籤最下方 Parameters 標題有提到 credentialWords:password, pwd, passwd等字眼 ,猜想它是透過偵測到源碼有前述關鍵字進行風險判斷的。

若上述假設為真,那疑問是,任何程式碼中以任何形式出現 'password' 都是不被允許的嗎?不管是包含 password 的字串、或名為 password 的變數與檔案名稱都不行? 但立即想到一個例外,就是 <input type="password" /> ,既然有例外,那我會再假設可能是根據特定程式碼結構進行判斷的,所以接著會進行的嘗試,是改變目前中英對照的方法,避免將 password 敏感字放到物件作為 key 值,可以改變的方法想了以下兩種:

  1. 將原本的 key & value 代表的意義抽為物件的屬性,並用陣列來存放以方便查找。
const roomEntryErrors = [
  { errMsg: 'room is full', errMsgCn: '房間人數已滿!' },
  { errMsg: 'wrong password', errMsgCn: '房間密碼錯誤!' },
  { errMsg: 'you can only join 1 room', errMsgCn: '一人只能進入一間房!' }
]
  1. 假如上述不行,就假設敏感字也不能放到物件的 value 作為字串,因此不用物件的方式儲存中英對照,而是改寫一個函式用 if-else 或 switch 來判斷 。

以上是我可能會嘗試的方向,供參考,謝謝。

@ttpss930141011
Copy link
Contributor

Hi @Yuwen-ctw & @JohnsonMao , 看起來它是判斷 value 耶
image
我偏好 後端回傳甚麼錯誤訊息就直接呈現 這個選項

  .catch((err: AxiosError<RoomEntryError>) => {
    const errorMessage = err.response?.data.message || "error!";

    firePopup({ title: errorMessage  });
  })

@Yuwen-ctw
Copy link
Contributor

Hello @ttpss930141011
個人對於報告中以紅色波浪標記之處,理解為其因為偵測到 key 含有 password 字串,因此將 value 中 實際敏感的資訊 標記起來,當使用者看到這串文字時,可以立即意識到此字串不應該被在源碼被看見。
因此猜測無論 value 中出現的是 "密碼" 或是 "12345678" 或其他任何字串,都會被紅色波浪註記。

@JohnsonMao JohnsonMao force-pushed the feature/enter-room branch from c2c268b to e997d05 Compare July 1, 2023 08:02
@JohnsonMao
Copy link
Contributor Author

恩,我後來看了一下,應該是弱點掃描誤以為那個是敏感資料的設定檔
理論上 @Yuwen-ctw 提供的方式應該可以解決

const roomEntryErrors = [
  { errMsg: 'room is full', errMsgCn: '房間人數已滿!' },
  { errMsg: 'wrong password', errMsgCn: '房間密碼錯誤!' },
  { errMsg: 'you can only join 1 room', errMsgCn: '一人只能進入一間房!' }
]

但我更偏好用 switchi18n 的方式解決
能顯示中文的話,我會更偏向顯示中文

@Parkerhiphop
Copy link
Contributor

@JohnsonMao @Yuwen-ctw @ttpss930141011 感謝討論!

我也是最近才開始摸 SonarCloud 和理解他的一些原則

"Hardcoded Credential" 是指直接把敏感資料直接寫在程式碼中的軟體實踐,像是 user IDs and passwords,也因此 Yuwen 在 SonarCloud 上才會查到說我們應該要把這些資料存在資料庫裡,像是存一個 User Table 那樣

在更改錯誤訊息格式後,也確實如同 Yuwen 所指出,應該是把 password 寫成 key-value pair 時被判斷成我們實作了 Hardcoded Credential,而單純把 password 當成 value 或一個 string 在寫的話應該就會沒問題。

回到這個 issue 的話,這就是一個假陽性 (False Positive) 的判斷,官方有建議這種情形可以標注一下他是假陽性就好

單純就這個判斷的處理方式,我認為改個 key name (像是 incorrect: "密碼錯誤" ),或是現在 Yuwen 提的那個方式都行。

不過在往上思考的話,這也要看後端是如何回傳錯誤訊息的,晚上我們來跟後端討論一下回傳的錯誤訊息,避免我們這邊做了很多結果都沒跟後端對上,因為也有團隊選擇是在後端做 i18n,讓前端的 Error handle 都只要單純 return error msg

@sonarqubecloud
Copy link

sonarqubecloud bot commented Jul 6, 2023

Kudos, SonarCloud Quality Gate passed!    Quality Gate passed

Bug A 0 Bugs
Vulnerability A 0 Vulnerabilities
Security Hotspot A 0 Security Hotspots
Code Smell A 1 Code Smell

No Coverage information No Coverage information
0.0% 0.0% Duplication

@GaaSBot
Copy link

GaaSBot commented Jul 6, 2023

Knip Scan Result for 0e25930

Unused files (8)
Unused files (8)
.bundlewatch.config.js
components/shared/Modal/index.tsx
components/shared/Modalow/Example.tsx
components/shared/Toast/CtxToastQueue.tsx
lighthouserc.js
reset.d.ts
scripts/knipScanReporter.js
scripts/lhciScanReporter.js
Unused dependencies (3)
Unused dependencies (3)
@svgr/webpack package.json
sharp package.json
swr package.json
Unused devDependencies (5)
Unused devDependencies (5)
@actions/github package.json
@octokit/core package.json
@storybook/blocks package.json
@storybook/testing-library package.json
@total-typescript/ts-reset package.json
Unused exports (3)
Unused exports (3)
RoomsListTitle components/rooms/RoomsList.tsx
setFlags components/shared/Modal/ModalManager/src/ModalManagerBase.tsx
createNicknameEndpoint requests/users/index.ts
Unused exports in namespaces (7)
Unused exports in namespaces (7)
dotSizeVariants components/shared/Badge/Badge.tsx
textSizeVariants components/shared/Badge/Badge.tsx
INITIAL_TOAST_POSITION components/shared/Toast/ToastQueueContext.tsx
MAX_TOAST_MOUNT_SIZE components/shared/Toast/ToastQueueContext.tsx
MAX_TOAST_QUEUE_SIZE components/shared/Toast/ToastQueueContext.tsx
TOAST_QUEUE_STATE components/shared/Toast/ToastQueueContext.tsx
ToastQueueContext components/shared/Toast/ToastQueueContext.tsx
Unused exported types (22)
Unused exported types (22)
GameListProp interface components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
GroupedGamesType type components/lobby/CreateRoomModal/GameListModal/GameList/index.tsx
RoomBreadcrumbType type components/rooms/RoomBreadcrumb.tsx
RoomButtonGroupProps type components/rooms/RoomButtonGroup.tsx
RoomChatroom type components/rooms/RoomChatroom/RoomChatroom.tsx
RoomUserCardListProps type components/rooms/RoomUserCardList/RoomUserCardList.tsx
DisabledUserCardProp interface components/rooms/RoomUserCardList/UserCard/UserCard.tsx
WatingUserCardProp interface components/rooms/RoomUserCardList/UserCard/UserCard.tsx
CarouselArrowButtonProps interface components/shared/Carousel/CarouselArrowButton.tsx
CarouselItemProps interface components/shared/Carousel/CarouselItem.tsx
CoverProps interface components/shared/Cover/index.tsx
IconProps type components/shared/Icon/Icon.tsx
BodyProps interface components/shared/Modalow/Body.tsx
FooterProps interface components/shared/Modalow/Footer.tsx
HeaderProps interface components/shared/Modalow/Header.tsx
MaskProps interface components/shared/Modalow/Mask.tsx
SOCKET_EVENT enum containers/provider/ChatroomProvider.tsx
WS_ReadyState enum containers/provider/ChatroomProvider.tsx
CookieKey enum hooks/useCookie.ts
Game type requests/rooms/index.ts
PageMeta type requests/rooms/index.ts
RoomEntry type requests/rooms/index.ts
Unused exported types in namespaces (33)
Unused exported types in namespaces (33)
AvatarButtonProps interface components/shared/Avatar/Avatar.tsx
AvatarImageProps interface components/shared/Avatar/Avatar.tsx
AvatarLinkProps interface components/shared/Avatar/Avatar.tsx
AvatarProps type components/shared/Avatar/Avatar.tsx
AvatarShape type components/shared/Avatar/Avatar.tsx
AvatarSizeType type components/shared/Avatar/Avatar.tsx
AvatarType type components/shared/Avatar/Avatar.tsx
BaseAvatarProps interface components/shared/Avatar/Avatar.tsx
BadgePositionVariant enum components/shared/Badge/Badge.tsx
BadgeProps interface components/shared/Badge/Badge.tsx
BadgeSizeVariant enum components/shared/Badge/Badge.tsx
BaseButtonProps interface components/shared/Button/Button.tsx
ButtonProps type components/shared/Button/Button.tsx
CarouselProps interface components/shared/Carousel/Carousel.tsx
InputProps interface components/shared/Input/Input.tsx
ModalSizeVariant enum components/shared/Modalow/Modalow.tsx
PortalProps interface components/shared/Portal/Portal.tsx
SearchBarProps interface components/shared/SearchBar/SearchBar.tsx
SubmitHandler type components/shared/SearchBar/SearchBar.tsx
TabProps interface components/shared/Tabs/Tab.tsx
TabSizeType type components/shared/Tabs/Tabs.tsx
TagProps interface components/shared/Tag/Tag.tsx
ToastPropLength type components/shared/Toast/Toast.tsx
ToastPropRounded type components/shared/Toast/Toast.tsx
ToastPropSize type components/shared/Toast/Toast.tsx
ToastPropState type components/shared/Toast/Toast.tsx
CtxToastQueueProviderProps interface components/shared/Toast/ToastQueueContext.tsx
CtxToastQueueValue interface components/shared/Toast/ToastQueueContext.tsx
ToastQueueMap type components/shared/Toast/ToastQueueContext.tsx
ToastQueueMapValue type components/shared/Toast/ToastQueueContext.tsx
ToastQueueState type components/shared/Toast/ToastQueueContext.tsx
ToastQueueValue type components/shared/Toast/ToastQueueContext.tsx
UseToast interface components/shared/Toast/useToast.tsx
Duplicate exports (10)
Duplicate exports (10)
RoomChatroom, default components/rooms/RoomChatroom/RoomChatroom.tsx
Badge, default components/shared/Badge/Badge.tsx
Button, default components/shared/Button/Button.tsx
Input, default components/shared/Input/Input.tsx
Body, default components/shared/Modalow/Body.tsx
Footer, default components/shared/Modalow/Footer.tsx
Header, default components/shared/Modalow/Header.tsx
Mask, default components/shared/Modalow/Mask.tsx
Modalow, default components/shared/Modalow/Modalow.tsx
SearchBar, default components/shared/SearchBar/SearchBar.tsx
Configuration issues (1)
Configuration issues (1)
Unused item in ignoreDependencies: @next/bundle-analyzer

@GaaSBot
Copy link

GaaSBot commented Jul 6, 2023

🤖 Lighthouse Scan Result for 0e25930

/rooms
Metric Value
Performance 70
Seo 80
Accessibility 78
HTML Report for LHCI Scan Report Link
/rooms/abc
Metric Value
Performance 76
Seo 80
Accessibility 67
HTML Report for LHCI Scan Report Link
/login
Metric Value
Performance 52
Seo 80
Accessibility 94
HTML Report for LHCI Scan Report Link

@Parkerhiphop Parkerhiphop merged commit e748c33 into main Jul 6, 2023
@Parkerhiphop Parkerhiphop deleted the feature/enter-room branch July 6, 2023 06:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Feature 使用者進入現有房間 - 3
5 participants