Feat(extension, client): separate extension send token environment#319
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
WalkthroughGoogle OAuth 리다이렉트 URI 선택을 단순화(단일 Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 분 Possibly related PRs
Suggested labels
Suggested reviewers
시
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/client/src/pages/onBoarding/GoogleCallback.tsx (1)
49-57:⚠️ Potential issue | 🟠 Major
redirectUri누락 시 요청을 중단하는 가드가 필요합니다.Line 49 값을 검증하지 않고 Line 57에서
uri로 전송해, 환경 변수 누락 시undefined가 백엔드로 전달될 수 있습니다.handleGoogleLogin에는 같은 가드가 있으므로 여기에도 동일한 방어가 필요합니다.수정 제안
const redirectUri = import.meta.env.VITE_GOOGLE_REDIRECT_URI; const loginWithCode = async (code: string) => { + if (!redirectUri) { + alert('Google OAuth 설정이 누락되었습니다.'); + navigate('/onboarding?step=SOCIAL_LOGIN'); + return; + } + try { const res = await apiRequest.post( '/api/v3/auth/google', { code, uri: redirectUri, },🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/client/src/pages/onBoarding/GoogleCallback.tsx` around lines 49 - 57, loginWithCode currently uses redirectUri without validating it and may send undefined to the backend; add the same guard used in handleGoogleLogin to validate import.meta.env.VITE_GOOGLE_REDIRECT_URI (redirectUri) at the start of loginWithCode and abort early (return or throw) with a clear error if missing, before calling apiRequest.post('/api/v3/auth/google', { code, uri: redirectUri }); ensure the guard is placed in the loginWithCode function so the request never proceeds when redirectUri is falsy.
🧹 Nitpick comments (1)
turbo.json (1)
11-20:build:dev와build:prod태스크 설정이 동일합니다.두 태스크의
dependsOn,inputs,outputs설정이 완전히 동일합니다. 현재로서는 문제가 없지만, 향후 유지보수를 위해 공통 설정을 추출하는 것을 고려해볼 수 있습니다.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@turbo.json` around lines 11 - 20, The "build:dev" and "build:prod" entries in turbo.json duplicate the same "dependsOn", "inputs", and "outputs"; extract these shared settings into a single reusable pipeline entry (e.g., "build:base" or "build:common") and have "build:dev" and "build:prod" reference or extend that shared entry (or depend on it) to avoid duplication; update the "build:dev" and "build:prod" definitions to keep only environment-specific differences and point to the shared config so future changes to "dependsOn", "inputs", or "outputs" only need to be made in one place.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/extension/src/content.ts`:
- Around line 3-8: ALLOWED_ORIGINS being an empty array (when
VITE_ALLOWED_ORIGINS is unset) causes the origin check in the
window.addEventListener handler to always fail and silently drop messages;
change the ALLOWED_ORIGINS initialization/validation so that if
__ALLOWED_ORIGINS__ is missing/empty you either (a) default it to a safe runtime
value such as [window.origin] or a known client origin, or (b) log a clear
console.warn and bypass the includes check (treat empty as permissive) so
extensionBridge messages (setToken/logout) are not ignored; update the
origin-checking code in the window.addEventListener callback to account for this
fallback and emit a runtime warning when the env var is not provided.
In `@apps/extension/vite.config.ts`:
- Around line 19-23: The current define block sets __ALLOWED_ORIGINS__ to
JSON.stringify(env.VITE_ALLOWED_ORIGINS?.split(',') || []) which returns ['']
when VITE_ALLOWED_ORIGINS is the empty string; update the logic for
__ALLOWED_ORIGINS__ to treat an empty or whitespace-only VITE_ALLOWED_ORIGINS as
no origins by splitting, trimming, and filtering out empty entries (e.g., use
env.VITE_ALLOWED_ORIGINS ?
env.VITE_ALLOWED_ORIGINS.split(',').map(...).filter(Boolean) : []), ensuring the
result passed to JSON.stringify contains no empty strings.
---
Outside diff comments:
In `@apps/client/src/pages/onBoarding/GoogleCallback.tsx`:
- Around line 49-57: loginWithCode currently uses redirectUri without validating
it and may send undefined to the backend; add the same guard used in
handleGoogleLogin to validate import.meta.env.VITE_GOOGLE_REDIRECT_URI
(redirectUri) at the start of loginWithCode and abort early (return or throw)
with a clear error if missing, before calling
apiRequest.post('/api/v3/auth/google', { code, uri: redirectUri }); ensure the
guard is placed in the loginWithCode function so the request never proceeds when
redirectUri is falsy.
---
Nitpick comments:
In `@turbo.json`:
- Around line 11-20: The "build:dev" and "build:prod" entries in turbo.json
duplicate the same "dependsOn", "inputs", and "outputs"; extract these shared
settings into a single reusable pipeline entry (e.g., "build:base" or
"build:common") and have "build:dev" and "build:prod" reference or extend that
shared entry (or depend on it) to avoid duplication; update the "build:dev" and
"build:prod" definitions to keep only environment-specific differences and point
to the shared config so future changes to "dependsOn", "inputs", or "outputs"
only need to be made in one place.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: be0e47d2-f34b-4c0c-b970-7ef103054f1f
📒 Files selected for processing (12)
apps/client/src/pages/onBoarding/GoogleCallback.tsxapps/client/src/shared/utils/handleGoogleLogin.tsapps/extension/.gitignoreapps/extension/manifest.jsonapps/extension/package.jsonapps/extension/src/background.tsapps/extension/src/content.tsapps/extension/src/pages/LogOutPop.tsxapps/extension/src/vite-env.d.tsapps/extension/vite.config.tspackage.jsonturbo.json
jjangminii
left a comment
jjangminii
left a comment
There was a problem hiding this comment.
환경 변수 주입과 통신 플로우가 복잡하다고 생각했는데 각 환경에 맞게 깔끔하게 정리해주셨네요,, 확실히 확장프로그램도 dev와 prod 둘다 띄어두고 작업할 수 있는게 너무 기대되네요 -! 수고하셨습니다-!!
| "dev": "vite", | ||
| "build": "tsc -b && vite build", | ||
| "dev": "vite --mode development", | ||
| "build": "pnpm build:prod", |
There was a problem hiding this comment.
build가 10 번쨰 줄 build:prod와 다를게 없는거 같은데 중복되어 있는 이유가 있나요?
2 participants
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
1. 왜 "환경별 물리적 격리(앱 분리)" 방식을 선택했는가?
처음에는 하나의 확장 프로그램 내에서 키(token_dev, token_prod)만 나눠 저장하는 방식을 고민했으나, 아래와 같은 이유로 확장 프로그램 자체를 물리적으로 분리하는 방식을 채택했습니다.
보안 및 데이터 오염 방지:chrome.storage는 확장 프로그램 ID별로 저장소가 생성됩니다. 앱을 분리함으로써 Dev 토큰과 Prod 토큰이 물리적으로 섞일 가능성을 원천 차단했습니다.DX(개발자 경험) 향상: 이제 브라우저에 Prod 확장과 Dev확장 두 개를 동시에 띄워놓고 실시간 비교 개발 및 테스트가 가능합니다. 테스트할 때마다 기존 확장을 끄고 켤 필요가 없습니다.스토어 심사 리스크 최소화: 운영 환경(manifest.json)에 localhost 권한을 포함할 필요가 없어 보안 경고 문구를 깔끔하게 유지할 수 있습니다.2. 환경 변수 주입 및 통신 플로우
Vite의 빌드 시점에 환경 변수를 주입하여, 확장 프로그램이 "내가 허용한 도메인의 메시지만 수락"하도록 설계했습니다.
graph LR subgraph Web_Environments A[localhost:5173] B[dev.pinback.today] C[pinback.today] end subgraph Chrome_Extensions D((Pinback DEV)) E((Pinback PROD)) end A -- "postMessage(token)" --> D B -- "postMessage(token)" --> D C -- "postMessage(token)" --> E D -- "Safe Save" --> DS[(Storage DEV)] E -- "Safe Save" --> PS[(Storage PROD)] style D fill:#f96,stroke:#333 style E fill:#32CD32,stroke:#3333. 변경 참고 사항
이제 확장 프로그램 수정 후 테스트 시
pnpm build:dev를 사용하여 dist 폴더를 생성하고, 크롬에서 압축해제된 확장 프로그램 로드로 해당 폴더를 올려주세요.확장 프로그램 이름이 Pinback-dev로 뜨면 정상입니다.
apps/extension의
.env.development와.env.production설정에 따라 빌드 결과물이 달라지니 확인 부탁드립니다.(해당 env 따로 전달 드리겠습니다!)
Summary by CodeRabbit
릴리스 노트
새 기능
개선 사항
업데이트