如何在WKWebView中阻止加载外部资源？

Question

我有一个加载网页的应用程序，但会阻止图片、字体、JavaScript等资源下载。为此，我实现了一个NSURLProtocol子类，它可以与UIWebView很好地配合使用。

然而，我正在迁移到WKWebview，并意识到我精心制作的NSURLProtocol类不再能过滤掉这些资源。

有人知道如何实现过滤/阻止吗？

如果你想知道我是如何进行迁移的，我是从这篇文章开始的：http://floatlearning.com/2014/12/uiwebview-wkwebview-and-tying-them-together-using-swift/

- dequin

Answer 1

自 iOS 11 开始，您可以使用 WKContentRuleList。 首先，创建一个内容规则或列表。每个规则由触发器和操作组成。请参阅苹果的内容规则创建文档。 以下是一个示例创建，它阻止所有图像和样式表内容，但通过忽略先前的规则，允许以 jpeg 结尾的内容：

     let blockRules = """
         [{
             "trigger": {
                 "url-filter": ".*",
                 "resource-type": ["image"]
             },
             "action": {
                 "type": "block"
             }
         },
         {
             "trigger": {
                 "url-filter": ".*",
                 "resource-type": ["style-sheet"]
             },
             "action": {
                 "type": "block"
             }
         },
         {
             "trigger": {
                 "url-filter": ".*.jpeg"
             },
             "action": {
                 "type": "ignore-previous-rules"
             }
         }]
      """        

有了您的规则清单，您可以将它们添加到ContentRuleListStore中

    import WebKit
    @IBOutlet weak var wkWebView: WKWebView!

    let request = URLRequest(url: URL(string: "https://yourSite.com/")!)

    WKContentRuleListStore.default().compileContentRuleList(
        forIdentifier: "ContentBlockingRules",
        encodedContentRuleList: blockRules) { (contentRuleList, error) in

            if let error = error {
                return
            }

            let configuration = self.webView.configuration
            configuration.userContentController.add(contentRuleList!)

            self.wkWwebView.load(self.request)
    }

如果您想要删除所有规则，请调用以下命令：

    self.wkWebView.configuration.userContentController.removeAllContentRuleLists()
    self.wkWebView.load(self.request)

这里是2017 WWDC视频

祝好运！

我在Github上创建了一个示例项目，WKContentRuleExample

- dequin

---

你有没有关于在 iOS < 11 上运行的实现的建议？ - Nicholas Allio

暂时无法做到，抱歉。在iOS 11之前找不到任何API。 - dequin

如何在iOS 10上阻止WKWebView加载外部资源？ - Max

据我所知，在iOS 11之前没有阻塞资源。 - dequin

Answer 2

如果还有其他人对仅离线使用的WKWebView感兴趣：以下方法是@dequin答案的修改版本，它使用内容拦截规则来阻止所有对远程资源的请求（即不以file://开头的URL）：

import Cocoa
import WebKit

// Block all URLs except those starting with "file://"
let blockRules = """
[
    {
        "trigger": {
            "url-filter": ".*"
        },
        "action": {
            "type": "block"
        }
    },
    {
        "trigger": {
            "url-filter": "file://.*"
        },
        "action": {
            "type": "ignore-previous-rules"
        }
    }
]
"""

/// `WKWebView` which only allows the loading of local resources
class OfflineWebView: WKWebView {
    override init(frame: CGRect, configuration: WKWebViewConfiguration) {
        WKContentRuleListStore.default().compileContentRuleList(
            forIdentifier: "ContentBlockingRules",
            encodedContentRuleList: blockRules
        ) { contentRuleList, error in
            if let error = error {
                // Handle error
            } else if let contentRuleList = contentRuleList {
                configuration.userContentController.add(contentRuleList)
            } else {
                // Handle error
            }
        }

        super.init(frame: frame, configuration: configuration)
    }
}

- Baleb

Answer 3

iOS 9.0版本起，无法拦截WKWebView的网络请求。但你可以通过JavaScript在有限的范围内实现。

请提交一个WebKit bug或Apple bug申请此功能。我们许多人都需要这些钩子。

- Stefan Arentz

---

我认为这不是 WebKit 的 bug。Android 早就有实现此功能的函数了。阻止图像加载（以及许多其他功能）一直都在那里。苹果只是没有暴露这些特性。 - Russ

提交错误报告是让苹果公司知道我们需要访问此功能的最佳方式。 - Stefan Arentz

@StefanArentz 有没有关于如何在 iOS < 11 上实现它的提示？ - Nicholas Allio

@NicholasAllio 只是一个想法：也许在网页加载资源之前，你可以通过 WKUserScripts 注入内容安全策略元标记。 - abjurato