[React Native] WebView로 Android PDF 링크 띄우기

안드로이드의 WebView에서 PDF 관련 링크를 띄우려고 할 때, SSL 인증서의 문제로 발생할 수 있다. 기본적으로 WebView는 안전하지 않은 SSL 인증서를 가진 웹 사이트에 대해 경고를 표시하고 해당 사이트에 접속을 차단한다.

차단을 풀고 접속하는 방법에 대해 알아보자.

1. WebView 컴포넌트의 ignoreSslError 추가

 <WebView
 	source={{ uri: link }}
 	javaScriptEnabled
 	originWhitelist={['*']}
 	ignoreSslError // 추가된 옵션
 />

 

2. AndroidManifest.xml에서 보안 설정 변경

 

매니페스트에서 "android:usesCleartextTracffic" 속성을 추가하여 앱이 텍스트 트래픽을 사용할 수 있게 변경한다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.example.yourapp">

  <uses-permission android:name="android.permission.INTERNET" />

  <application
    android:usesCleartextTraffic="true"
    ...>
    ...
  </application>

</manifest>

 

 

3. 강제로 구글 드라이브로 이동하여 표시하기

const { url } = route.params; 

const googleDriveUrl = `https://drive.google.com/viewerng/viewer?embedded=true&url=${encodeURIComponent(url)}`;

  return (
    <Wrapper>
      <Wrap>
        {renderSpinner()}
        <WebView
          source={{ uri: googleDriveUrl }} // 구글 드라이브 접근 uri로 접근하는 커스텀 uri 삽입
          javaScriptEnabled
          originWhitelist={['*']}
        />
      </Wrap>
    </Wrapper>
  );
};

googleDriveUrl 변수를 이용하여 PDF url을 인코딩한 후, 구글 드라이브의 PDF 뷰어 URL과 조합하여 WebView에 전달한다.

구글 드라이브를 사용하므로 SSL 인증서 문제를 우회하여 보여줄 수 있다.