개요
이 튜토리얼에서는 안드로이드 앱에서 WebView의 혼합 콘텐츠(mixed content)를 활성화하는 방법을 단계별로 살펴봅니다. HTTPS 페이지 안에서 HTTP 리소스(이미지, 스크립트 등)를 불러오는 것을 '혼합 콘텐츠'라고 하는데, API 레벨 21(롤리팝) 이상에서는 WebView가 기본적으로 이러한 콘텐츠 로딩을 차단하기 때문에 별도의 설정이 필요합니다.
1단계: 새 프로젝트 생성
Android Studio에서 File ⇒ New Project를 선택한 후, 새 프로젝트 생성에 필요한 모든 항목을 입력하여 새 프로젝트를 만듭니다.
2단계: activity_main.xml 작성
res/layout/activity_main.xml 파일에 다음 코드를 추가합니다.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:app="https://schemas.android.com/apk/res-auto"
xmlns:tools="https://schemas.android.com/tools"
android:layout_width="match_parent"
android:gravity="center"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical">
<WebView
android:id="@+id/web_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>위 코드에서는 tutorialspoint.com 웹사이트를 화면에 표시하기 위한 WebView를 배치했습니다.
3단계: MainActivity.java 작성
src/MainActivity.java 파일에 다음 코드를 추가합니다.
package com.example.myapplication;
import android.app.ProgressDialog;
import android.os.Build;
import android.os.Bundle;
import android.support.annotation.RequiresApi;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
public class MainActivity extends AppCompatActivity {
@RequiresApi(api = Build.VERSION_CODES.P)
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final ProgressDialog progressDialog = new ProgressDialog(this);
progressDialog.setMessage("Loading Data...");
progressDialog.setCancelable(false);
WebView web_view = findViewById(R.id.web_view);
web_view.requestFocus();
web_view.getSettings().setJavaScriptEnabled(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
web_view.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_COMPATIBILITY_MODE);
}
web_view.loadUrl("https://www.tutorialspoint.com/");
web_view.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
return true;
}
});
web_view.setWebChromeClient(new WebChromeClient() {
public void onProgressChanged(WebView view, int progress) {
if (progress < 100) {
progressDialog.show();
}
if (progress == 100) {
progressDialog.dismiss();
}
}
});
}
}핵심 포인트: setMixedContentMode()
혼합 콘텐츠 활성화의 핵심은 setMixedContentMode() 메서드입니다. 사용 가능한 모드는 다음과 같습니다.
- MIXED_CONTENT_NEVER_ALLOW – HTTP 콘텐츠 로딩을 항상 차단합니다(API 21 이상의 기본값).
- MIXED_CONTENT_ALWAYS_ALLOW – 모든 혼합 콘텐츠 로딩을 허용합니다. 보안상 권장되지 않습니다.
- MIXED_CONTENT_COMPATIBILITY_MODE – 호환성 모드로, 이미지 같은 덜 위험한 콘텐츠는 허용하고 스크립트 등 위험한 콘텐츠는 차단합니다.
또한 로딩 진행 상태를 사용자에게 알려주기 위해 ProgressDialog를 WebChromeClient의 onProgressChanged() 콜백과 연동했습니다.
4단계: AndroidManifest.xml 작성
AndroidManifest.xml 파일에 다음 코드를 추가합니다. 외부 웹사이트에 접속하려면 반드시 인터넷 권한(android.permission.INTERNET)을 선언해야 합니다.
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
package="com.example.myapplication">
<uses-permission android:name="android.permission.INTERNET"/>
<application
android:allowBackup="true"
android:icon="@mipmap/ic_launcher"
android:label="@string/app_name"
android:roundIcon="@mipmap/ic_launcher_round"
android:supportsRtl="true"
android:theme="@style/AppTheme">
<activity android:name=".MainActivity">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>앱 실행 및 결과 확인
이제 애플리케이션을 실행해 보겠습니다. 실제 안드로이드 모바일 기기가 컴퓨터에 연결되어 있다고 가정합니다. Android Studio에서 프로젝트의 액티비티 파일 중 하나를 연 뒤, 툴바에서 Run 아이콘을 클릭하세요. 실행할 기기 목록에서 자신의 모바일 기기를 선택하면, 기기 화면에 아래와 같이 웹페이지가 정상적으로 로드되는 것을 확인할 수 있습니다.
