Khi nào nên dùng WebView trong app, và giao tiếp giữa web với native thế nào cho an toàn?

WebView hợp với nội dung thay đổi thường xuyên hoặc đã có sẵn trên web: trang điều khoản, chương trình khuyến mãi, mini app của đối tác, trang cổng thanh toán. Đổi nội dung không cần phát hành bản app mới. Đổi lại: tốn bộ nhớ, cuộn/animation kém native, và mở ra rủi ro bảo mật.

Giao tiếp hai chiều (react-native-webview):
- Web → native: window.ReactNativeWebView.postMessage(string), native nhận ở onMessage.
- Native → web: injectJavaScript(...) qua ref.

tsx

<WebView
  source={{ uri: 'https://promo.example.com' }}
  originWhitelist={['https://promo.example.com']}
  onMessage={(e) => {
    // Trust messages only from the expected origin, and validate the payload
    if (!e.nativeEvent.url.startsWith('https://promo.example.com')) return
    const msg = JSON.parse(e.nativeEvent.data)
    if (msg.type === 'CLOSE') navigation.goBack()
  }}
/>

An toàn:
- Chỉ nạp nội dung tin cậy; giới hạn origin, link ngoài mở bằng trình duyệt hệ thống.
- Coi mọi message từ web là input không tin cậy: kiểm tra origin, validate dữ liệu, không expose hàm nhạy cảm (đọc token, thanh toán) cho trang bất kỳ.
- Android native: addJavascriptInterface cho phép JS trong trang gọi code Kotlin/Java — nguy hiểm nếu trang bị chèn script.
- Không làm màn hình đăng nhập OAuth trong WebView — RFC 8252 yêu cầu dùng trình duyệt hệ thống (Custom Tabs, ASWebAuthenticationSession), vì app nhúng có thể đọc được mật khẩu người dùng.

Lưu ý: không truyền access token qua query string của URL WebView — URL dễ lọt vào log và lịch sử.

Xem toàn bộ Mobile Essentials cùng filter theo level & chủ đề con.

Mở danh sách Mobile Essentials

tsx

<WebView
  source={{ uri: 'https://promo.example.com' }}
  originWhitelist={['https://promo.example.com']}
  onMessage={(e) => {
    // Trust messages only from the expected origin, and validate the payload
    if (!e.nativeEvent.url.startsWith('https://promo.example.com')) return
    const msg = JSON.parse(e.nativeEvent.data)
    if (msg.type === 'CLOSE') navigation.goBack()
  }}
/>

Lưu ý: không truyền access token qua query string của URL WebView — URL dễ lọt vào log và lịch sử.