React Native WebView - https Error loading page (임시 방편으로 해결하기)

안드로이드 iOS 왜 안돼...

안드로이드

iOS

일주일 동안 해결하지 못하는 문제였다. 어떻게 해야 하는지 인터넷을 뒤져보고 챗GPT 선생님께도 물어봤지만 똑같은 말씀만 하신다..

우선 안드로이드

Description SSL error : The certificate authority is not trusted

이 부분을 해석하면 ssl 인증서 권한이 신뢰할 수 없다고 한다. 그러면 인증서를 받아서 https 페이지가 신뢰되지 않는 페이지로 안 뜨게 해야겠다고 생각했다.

찾아보니 react 자체로 인증서를 적용할 수는 없었다. nginx 까지 결국 건드려야 하는 상황이 온 것이다...

임시방편으로 우선

https://univdev.page/posts/Webview_SSL_Error/

이 방법을 썼다. React Native Webview의 모듈 설정을 건드려서 ssl 관련 에러가 나도 접속이 가능하도록 만들어버리는 것이다 (진짜 임시방편)

iOS

iOS 도 마찬가지로 ssl 인증서 문제로 안 뜨는 것으로 보인다. 그래서 아래의 코드도 WebView 를 커스텀 했다.

아래의 코드에서 SendIntentAndroid 와 Toast 를 사용하려면 npm 을 통해 모듈을 설치해야 한다.

npm install react-native-send-intent
npm install react-native-toast-message

import SendIntentAndroid from 'react-native-send-intent';
import Toast from 'react-native-toast-message';

<WebView
        style={styles.webview}
        source={{uri: '[소스 uri]'}}
        originWhitelist={['http://*', 'https://*', 'intent://*']}
        // onShouldStartLoadWithRequest={openExternalLink}
        onShouldStartLoadWithRequest={(event) => {
            console.log('onShouldstart');
            console.log(event.url);
            if (event.url.startsWith("http")) {
                Linking.openURL(event.url);
            }
            if (
                Platform.OS === 'android' &&
                event.url.startsWith("intent")
            ) {
                SendIntentAndroid.openChromeIntent(event.url)
                    // SendIntentAndroid.openAppWithUri(event.url)
                    .then((isOpened) => {
                        if (!isOpened) {
                            Toast.show({text1 : '앱 실행에 실패했습니다'});
                        }
                        return false;
                    })
                    .catch((err) => {
                        console.log(err);
                    });
                return false;
            }
            if (Platform.OS === 'ios') {
                return true;
            }
            return true;
        }}
      />

이렇게 하니 안드로이드, iOS 둘 다 WebView 에 일단 뜬다. https 인증서를 받아서 이러한 설정 없이 정식(?) 으로 잘 띄우는 방법은 다음에 올릴 포스트에 작성해야겠다.