[질문] 아이폰 앱 개발시, 웹뷰 내의 로그인 버튼이 자바스크립트로는 클릭 되지 않을 경우
페이지 정보
하늘아이
본문
개인적으로 시간이 좀 있게 되어서 ㅠㅠ 이것저것 예전부터 해보고 싶던 것을 공부 겸 해서 만들어 보고 있습니다. 최근에는 스위프트로 아이폰 앱을 공부 중인데, 막히는게 있어서 질문을 해봅니다.
간단하게 말하자면 앱 상에서 웹 페이지를 불러온 뒤 (WKWebView), 그 페이지에 로그인 후, 필요한 정보를 긁어오는 것을 만들어 보고 있습니다.
문제는 로그인 하려고 하는 페이지 (https://www.marriott.com/signInOverlay.mi) 의 로그인은 iframe 내에서 로그인을 하는 방식인데, 자바스크립트로 로그인 버튼을 클릭을 하면 보안상의 문제인건지 실제로 로그인이 안되고 에러가 나게 됩니다. 물론 실제 버튼을 클릭하게 되면 (마우스로 아이폰 에뮬레이터 클릭) 잘 작동한다는거지만요.
* 로그인 폼 위치: body -> div .. -> iframe (title="signin") -> body -> div .. -> form (method=post)
원래 구현한 스위프트 내에서 로그인 버튼을 클릭하는 자바 스크립트 (webview.evaluateJavaScript 함수 사용) 는 아래와 같습니다.
const iframe = document.querySelector("iframe");
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
const emailInput = iframeDoc.querySelector("input[name^='input-text-Email']");
const passwordInput = iframeDoc.querySelector("input[name^='input-text-Password']");
const signinButton = iframeDoc.querySelector("button[data-testid='sign-in-btn-submit']");
emailInput.value = "이메일 주소";
passwordInput.value = "비밀번호";
참고로 이 자바 스크립트는 크롬 콘솔에서 동일하게 넣어봐도 로그인이 안됩니다. (이메일/비밀번호를 입력하지 않은 것으로 간주됩니다)
추가로 구글/GPT 의 경우에는 클릭 이벤트를 자바 스크립트로 만들어 넣으면 된다고 하는데, 실제로는 동일한 에러가 발생하고요.
const clickEvent = new MouseEvent('click', {view: window, bubbles: true, cancelable: true});
signinButton.dispatchEvent(clickEvent);
다만 크롬의 경우, 제가 클릭을 해서 크롬에 저장된 아이디/비밀번호를 선택하는 경우, click() 함수로 로그인을 할 수 있습니다.
AI 에서는 UIView 를 이용해서 프로그래밍 적으로 다른 View 를 누르는 것처럼 한 뒤, 실제로는 웹뷰를 누르라고 하는데도 되지 않더라고요. 물론 제가 못해서 그런 것 같기도 하지만요.
이런 경우에 프로그래밍 적으로 버튼을 누르거나, 자바스크립트나 스위프트 등을 통해 보안적인 부분을 피해서 로그인이 가능한 방법이 있을까요? 검색해보니 웹뷰는 스위프트를 통해 터치 이벤트를 만들 수 없다고 하는데, 다른 방법이 있을까요?
하늘아이님의 댓글의 댓글
그나마 이번에는 클립보드에 이메일 주소를 넣어주고 -> 사용자가 붙이는 방법으로 하니 되는거 같은데, 문제는 이메일 주소는 그렇게 하더라도 비밀번호를 클립보드에 붙일수가 없더라고요 ㅎㅎㅎ 자바 스크립트 넣어서 메인 윈도우로 메세지를 보내는 방법이 있다고 해서 몇 번 시도해 봤는데, 여전히 먹통입니다 ㅎㅎㅎ 간단하게 웹뷰에서 붙이기 할 경우 자바스크립트로 이벤트 생성 -> 이걸 뷰컨트롤러에서 이벤트를 받아서 클립보드에 비밀번호 넣고 -> 사용자가 비밀번호도 붙여넣고 -> 로그인 버튼을 누르는 방식을 생각했는데, 붙이기 이벤트가 뜨질 않네요 ㅎㅎㅎ
원래 데스크탑용 파이썬 + Playwright 으로 구현한걸 아이폰용으로 적용해보는건데, Playwright 은 실제 크롬 브라우저를 작동하는거라면, 아이폰 웹뷰는 자바스크립트로 하다보니 제약이 너무 많네요;;; 셀레니엄이나 뭐라도 아이폰 내에서 작동하면 좋은데, 방법이 없달까요 ㅎㅎㅎ
자근자근님의 댓글
메소드 한두개 더 호출해주면 될 수도 있습니다...
아래는 관련되어 참고하실 만한 내용들...
1. javascript 기준 Event 에 isTrusted 라는 프로퍼티가 있습니다.
해당 이벤트가 사람의 터치 등으로 발생한 것인지, javascript 코드 등으로 발생한 것인지를 구분합니다.
(당연히) javascript 코드로 이 동작을 변경할 수 없습니다.
브라우저 자체적으로도 실제 사용자가 의도한 동작인지 아닌지에 따라 일부 구현이 제한됩니다.
(접속만 하면 광고창을 무수히 열어버리는 식의 스팸 차단을 위해 실제 클릭이 아니면 팝업 차단 되는 등...)
2. WKWebView 는 개발하신 앱과는 다른 프로세스로 구동됩니다. 직접 접근/제어에 어느 정도 제약이 있습니다.
3. Swift 에서 터치이벤트를 만들어서 보내는걸 해봤는데,, 잘 안되더라구요. 이건 제가 못한거일 수도 있지만요.
4. 지금 하시려는거처럼, 인앱 웹뷰는 앱 개발자의 스크립트 인젝션 등으로 사용자의 의도하지 않은 데이터 유출이 발생할 수도 있기에(비밀번호 폼의 값을 가로챈다거나) 구글 등에서는 인앱 웹뷰에서의 로그인을 차단하고 앱에서 별도 프레임워크로 로그인하고 그 결과값을 받아서 쓰는 형태로 권장하기도 합니다. 최근엔 포기한 것 같긴 하던데... 보안 측면에선 별로 좋지 못한 ux로 분류되는 것 같더라구요.