안드로이드 브릿지 인터페이스 JavaScriptInterface 완벽 가이드 – 앱과 웹 간 통신 방법 총정리
02 September 2025 -
2 mins read time
Tags:
Android
✨ 개요
앱에서 WebView를 사용할 때, 웹 페이지와 앱(Java/Kotlin 코드) 간의 데이터를 주고받아야 하는 상황이 자주 발생합니다. 이때 사용하는 것이 바로 Android의 @JavascriptInterface 브릿지 인터페이스입니다.
이번 포스팅에서는 JavaScriptInterface의 개념부터 활용 예시, 보안 팁, 주의사항까지 모두 정리해 드립니다.
1. JavaScriptInterface란?
- Android의 WebView에서 웹(JavaScript) → 앱(Java/Kotlin 코드)으로 호출할 수 있게 해주는 인터페이스
- @JavascriptInterface 어노테이션이 붙은 메서드만 호출 가능
- 앱과 웹 간 양방향 브릿지를 구성할 때 필수 기능
2. 기본 사용 흐름
- WebView에 JavaScript 사용 설정
- 앱에서 addJavascriptInterface()로 객체 등록
- 객체 내 @JavascriptInterface 메서드를 JS에서 호출
3. 사용 예제
코틀린 코드
class WebAppBridge(val context: Context) {
@JavascriptInterface
fun showToast(message: String) {
Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}
}
val webView: WebView = findViewById(R.id.webView)
webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppBridge(this), "AndroidBridge")
webView.loadUrl("file:///android_asset/sample.html")
HTML/JavaScript (웹)
<button onclick="AndroidBridge.showToast('Hello from Web!')">Click Me</button>
- assets/test_html 파일 생성 후 webview에서 해당 경로 로드해서 테스트 가능
4. 양방향 통신 예시
- 앱 → 웹 호출 (JavaScript 실행)
webView.evaluateJavascript("javascript:showMessage('Hi from Android')", null)
- 웹 → 앱 호출 (위와 동일하게 @JavascriptInterface 메서드)
5. 보안 이슈 및 주의사항
| 위험 요소 |
설명 |
| @JavascriptInterface 노출 |
외부 사이트가 의도치 않게 앱 기능을 호출할 수 있음 |
| 파일 스킴(file://) |
Android 4.2 미만에서는 매우 위험 (권한 탈취 가능) |
| 웹 URL 검증 필요 |
외부 URL에 대해 검증 없이 addJavascriptInterface 호출 금지 |
- 보안 팁
- 신뢰할 수 있는 웹만 로드
- WebViewClient.shouldOverrideUrlLoading() 활용하여 URL 필터링
- 가능하면 https + CSP(Content Security Policy) 적용
- Android 4.2 이상에서만 사용 권장
6. 자주 발생하는 문제와 해결법
| 문제 |
해결책 |
| JS 함수 호출이 안 됨 |
webView.settings.javaScriptEnabled = true 확인 |
| 앱 메서드 호출 안 됨 |
@JavascriptInterface 빠졌는지 확인 |
| JS에서 AndroidBridge undefined |
addJavascriptInterface()가 누락됐거나 load 전에 실행됨 |
7. 결론
| 핵심 요약 |
@JavascriptInterface는 웹 → 앱 통신을 가능하게 함 |
addJavascriptInterface()로 WebView에 객체를 등록해야 함 |
| 보안상 위험이 있을 수 있으므로 사용 시 반드시 주의해야 함 |
| 실무에서는 웹 로그인, 결제, 공유 기능 등에 자주 사용됨 |
Related Posts