已实现URL拦截，如何在NEFilterDataProvider方法及.drop()中显示自定义页面

要在拦截流量时显示自定义页面，NetworkExtension本身不直接提供UI展示能力，核心思路是替换直接丢弃（drop）的逻辑，改为返回自定义HTML响应或重定向到本地页面，具体实现如下：

核心实现思路 #

当识别到需要拦截的流量时，不要直接返回.drop()，而是通过以下两种方式返回自定义页面：

1. 直接生成HTML响应数据，通过.data() verdict返回给客户端
2. 重定向到本地启动的轻量服务器，加载预定义的拦截页面资源

代码实现示例 #

1. 直接返回自定义HTML响应（无需额外服务器） #

在NEFilterDataProvider的handleNewFlow方法中，判断拦截URL后，构造HTML内容并返回：

override func handleNewFlow(_ flow: NEFilterFlow) -> NEFilterNewFlowVerdict {
    // 仅处理HTTP/HTTPS流量
    guard let urlFlow = flow as? NEFilterURLFlow, let requestURL = urlFlow.request.url else {
        return .allow()
    }

    // 判断当前URL是否需要拦截（替换为你的拦截规则）
    let blockedDomains = ["example.com", "test.com"]
    if blockedDomains.contains(requestURL.host ?? "") {
        // 构造自定义拦截页面HTML
        let blockPageHTML = """
        <!DOCTYPE html>
        <html lang="zh-CN">
        <head>
            <meta charset="UTF-8">
            <title>页面已被拦截</title>
            <style>
                body {
                    max-width: 600px;
                    margin: 40px auto;
                    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
                    color: #333;
                    text-align: center;
                }
                h1 { color: #e53e3e; }
                .desc { margin-top: 20px; font-size: 16px; }
            </style>
        </head>
        <body>
            <h1>⚠️ 该页面已被拦截</h1>
            <div class="desc">你访问的内容不符合安全规则，无法继续加载</div>
        </body>
        </html>
        """
        
        // 将HTML转为数据，构造HTTP响应
        guard let htmlData = blockPageHTML.data(using: .utf8),
              let response = HTTPURLResponse(
                url: requestURL,
                statusCode: 403,
                httpVersion: "HTTP/1.1",
                headerFields: ["Content-Type": "text/html; charset=utf-8"]
              ) else {
            return .drop()
        }
        
        // 返回自定义响应，同时标记流量为丢弃（避免原请求继续）
        return .data(data: htmlData, response: response, verdict: .drop())
    }

    // 允许非拦截流量通过
    return .allow()
}

2. 重定向到本地轻量服务器（适合复杂页面） #

如果拦截页面包含图片、CSS等外部资源，建议启动本地服务器（比如用GCDWebServer），然后重定向到服务器地址：

// 先在Provider中初始化本地服务器（需在startFilter方法中启动）
private var webServer: GCDWebServer?

override func startFilter(completionHandler: @escaping (Error?) -> Void) {
    super.startFilter(completionHandler: completionHandler)
    
    // 初始化并启动本地服务器
    webServer = GCDWebServer()
    // 加载App bundle中的拦截页面资源
    let bundlePath = Bundle.main.bundlePath
    webServer?.addGETHandler(forBasePath: "/", directoryPath: bundlePath + "/BlockPage", indexFilename: "index.html", cacheAge: 0, allowRangeRequests: true)
    
    webServer?.start(withPort: 8080, bonjourName: nil)
}

override func handleNewFlow(_ flow: NEFilterFlow) -> NEFilterNewFlowVerdict {
    guard let urlFlow = flow as? NEFilterURLFlow, let requestURL = urlFlow.request.url else {
        return .allow()
    }

    if shouldBlockURL(requestURL) { // 你的拦截判断逻辑
        guard let redirectURL = URL(string: "http://localhost:8080/index.html") else {
            return .drop()
        }
        // 返回重定向 verdict
        return .redirect(url: redirectURL)
    }

    return .allow()
}

关键注意事项 #

• 避免直接使用.drop()：直接丢弃流量会让客户端显示默认错误页，必须替换为返回自定义响应或重定向
• HTTPS流量处理：重定向到HTTP地址可能触发浏览器安全提示，优先推荐直接返回HTML数据的方式；若使用HTTPS本地服务器，需配置自签名证书
• 权限配置：确保App已申请Network Extension权限，Info.plist中添加对应权限描述（比如NSNetworkUsageDescription、NSExtension配置）
• 用户授权：NetworkExtension过滤需要用户在系统设置中授权，需引导用户完成配置

内容的提问来源于stack exchange，提问作者Muhammad Ali