[FIX] URL 입력 검증 로직 개선

[kbh0218]

Closes #36

개요

URL 입력 화면에서 www.naver.com, naver.com처럼 http://, https:// 프로토콜이 없는 정상적인 도메인 주소도 올바른 URL 형식으로 판단되도록 검증 로직을 개선했습니다.

기존에는 입력값에 http:// 또는 https://가 없으면 즉시 실패 처리하고, 이후 Linking.canOpenURL()로 실제 열기 가능 여부까지 확인하고 있었습니다. 이 방식은 스킴이 없는 정상 도메인을 잘못 거부하고, 프론트에서 URL을 열 수 있는지까지 판단하게 되어 원본 URL을 그대로 백엔드에 넘기기로 한 방향과 맞지 않았습니다.

이번 작업에서는 사용자가 입력한 주소를 원본으로 유지하고, https://를 붙인 값은 검증용 내부 후보로만 사용하도록 변경했습니다. 따라서 naver.com 입력 시 검증 단계에서는 https://naver.com 형태로 파싱 가능 여부를 확인하지만, 스캔 화면/백엔드 전달값과 실제 접속 기준 주소는 사용자가 입력한 naver.com 그대로 유지됩니다.

또한 네이버.com처럼 한글/비ASCII 문자가 포함된 도메인이 new URL()에서 punycode로 변환되어 통과하는 문제를 막기 위해 원본 hostname 기준의 ASCII 도메인 검증을 추가했습니다.

주요 구현 내용

• URL 입력 검증 시 http://, https://가 없는 도메인도 URL 후보로 판단
• https:// 보정값은 검증 함수 내부에서만 사용
• 스캔 화면/백엔드로 전달하는 URL은 사용자가 입력한 원본 문자열 기준으로 유지
• 입력 단계에서 Linking.canOpenURL() 검증 제거
• 원본 hostname 기준 ASCII 도메인 검증 추가
• 한글/비ASCII 도메인 입력 차단
• 빈 라벨, 잘못된 하이픈 위치, 짧은 TLD 등 잘못된 도메인 형식 차단
• 저장 링크 카드에서 외부 브라우저 실행 시 https:// 자동 보정 제거
• 실제 접속 시에도 저장된 원본 URL을 그대로 Linking.openURL()에 전달하도록 변경

동작 방식

예시 1:

사용자 입력: naver.com
검증용 내부 값: https://naver.com
스캔 화면/백엔드 전달값: naver.com
실제 접속 기준 주소: naver.com

예시 2:

사용자 입력: https://naver.com
검증용 내부 값: https://naver.com
스캔 화면/백엔드 전달값: https://naver.com
실제 접속 기준 주소: https://naver.com

즉, https://를 붙이는 처리는 URL 형식 검증을 위한 임시 처리이며, 백엔드에 넘기거나 실제 접속할 때 사용하는 값은 사용자가 입력한 주소를 기준으로 합니다.

파일별 역할

• app/(tabs)/(home)/add-link.tsx: URL 입력 형식 검증 로직 개선, Linking.canOpenURL() 기반 검증 제거, 원본 URL 전달 유지
• components/ui/card-link.tsx: 저장 링크 실행 시 URL 자동 보정 제거, 원본 URL 기반 외부 브라우저 실행 처리

해결한 이슈 목록

• 현재 URL 체크 로직 위치와 동작 방식 확인
• www.naver.com, naver.com처럼 스킴이 없는 정상 도메인을 URL 형식으로 인정
• http://, https://가 이미 포함된 URL은 기존처럼 허용
• https:// 보정값은 검증 내부에서만 사용하도록 처리
• 프론트에서 URL을 임의로 보정해 백엔드에 전달하지 않도록 처리
• 입력 단계에서 Linking.canOpenURL() 의존 제거
• ㅎㅇ.com, 한글.com 등 비ASCII 도메인 차단
• a..com, -naver.com, naver-.com, naver.c 등 잘못된 도메인 형식 차단
• 저장 링크 접속 시에도 사용자가 저장한 원본 URL을 그대로 사용하도록 처리

체크 사항

• 커밋/코딩 컨벤션에 맞게 작성
• npm run lint 통과
• 변경 파일 범위 확인
• 작업 브랜치 push 완료
• 기존 미추적 파일 clerk-build.log는 커밋에서 제외

참고

허용되는 입력:

• www.naver.com
• naver.com
• https://www.naver.com
• http://www.naver.com
• sub.domain.co.kr

거부되는 입력:

• 네이버.com
• 한글.com
• naver
• naver.c
• a..com
• -naver.com
• naver-.com
• https://

[minsoo0506]

고생하셨습니다! 아래 코멘트에 대한 수정할 필요는 없을 것 같은데 인지만 하고 계시면 될 것 같습니다!

[minsoo0506]

naver.com 같은 입력을 허용했지만, 여기서 원본 trimmed를 그대로 넘기면 안전 결과 화면의 즉시 URL 접속이 Linking.openURL(url)을 bare domain으로 호출하게 됩니다. React Native의 외부 열기는 https://naver.com처럼 스킴이 있는 URL이 필요해서, 새로 허용한 입력은 검사 후 접속 액션이 실패합니다.

백엔드 전달값은 원본으로 유지하더라도, 실제 열기용 값은 보정해야 할 것 같습니다! 추후에 백엔드에서 넘어오는 값 중에 final_url 혹은 finalUrl 값이 있을텐데 그 값을 사용하면 될 것 같습니다.

그냥 인지만 하고 있어주세요!!

[kbh0218]

확인했습니다!

현재 add-link.tsx에서는 백엔드 전달을 고려해서 입력 원본을 유지하고 있는데, 말씀해주신 것처럼 naver.com 같은 bare domain은 결과 화면의 Linking.openURL(url)에서 바로 열 수 없는 점 인지했습니다.

추후 백엔드 연동 시 finalUrl/final_url 값을 열기용 URL로 사용하거나, 실제 접속 액션에서는 스킴이 포함된 URL로 보정하는 방향으로 처리하겠습니다.