[실습/Flutter] WebView

 

 

앱 내에서 웹페이지 띄우기 (WebView 활용)

 

dependencies

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.8
  #WebView 의존 추가
  webview_flutter: ^4.12.0

 

 

dart code

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart'; //webview

void main() {
  runApp(const Webview());
}

class Webview extends StatelessWidget {
  const Webview({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: WebviewPractice(),
    );
  }
}

class WebviewPractice extends StatefulWidget {
  const WebviewPractice({super.key});

  @override
  State<WebviewPractice> createState() => _WebviewPracticeState();
}

class _WebviewPracticeState extends State<WebviewPractice> {
  late final WebViewController _controller;

  // 화이트리스트 도메인
  final List<String> whitelist = ['naver.com', 'flutter.dev'];

  // 블랙리스트 도메인
  final List<String> blacklist = ['google.co.kr'];

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate( //검증
          onNavigationRequest: (NavigationRequest request) {
            final host = Uri.parse(request.url).host; //uri의 도메인 추출
            
            //화이트리스트 검증 또는 블랙리스트 검증 추가 위치
          },
        ),
      )
      ..loadRequest(Uri.parse('https://naver.com')); //첫 페이지 세팅
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView')), //상단 바 세팅
      body: WebViewWidget(controller: _controller), //body 전체를 웹 페이지로
    );
  }
}

 

 

화이트 리스트의 경우

(화이트 리스트에 있는 도메인만 허용)

// 화이트리스트 로직
if (whitelist.any((allowed) => host.contains(allowed))) { //whiteList의 요소가 host(도메인)에 포함된다면
     return NavigationDecision.navigate; //허용
}
// 차단된 도메인 접근 시 알림 가능
ScaffoldMessenger.of(context).showSnackBar( //스낵바알림
     SnackBar(content: Text('허용되지 않은 사이트입니다: $host')),
);
return NavigationDecision.prevent; //차단

 

 

블랙 리스트의 경우

(블랙 리스트에 있는 도메인만 비허용)

// 블랙리스트 로직
if (blacklist.any((blocked) => host.contains(blocked))) { //blackList의 요소가 host(도메인)에 포함된다면
     ScaffoldMessenger.of(context).showSnackBar( //스낵바알림
          SnackBar(content: Text('차단된 사이트입니다: $host')),
     );
     return NavigationDecision.prevent; //차단
}
return NavigationDecision.navigate; //허용