如何配置WKWebView使其能渲染AppGroup目录中的图片文件？

问题场景 #

拥有以下HTML字符串，期望从应用的AppGroup目录渲染图片：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
        <title>This is title</title>
    </head>
    <body>
        <p><h1>This is title</h1></p>
        
        <div style="font-size: 0">
           <img src="file:///Users/xxx/Library/Developer/CoreSimulator/Devices/A7B89802-9C65-4512-85A7-51C4372172D0/data/Containers/Shared/AppGroup/14DA3695-BFAF-4096-9F54-2874FD8285C2/attachment/b16c714e-9bb5-4eaa-924e-e043a69088ea.jpeg" width="100%">
        </div>
        
        This is body text
    </body>
</html>

执行以下代码时，仅有文本被渲染，图片无法显示：

let html = ...
// wkWebView is WKWebView
wkWebView.loadHTMLString(html, baseURL: nil)

将该HTML保存为文件并通过Safari手动打开时，图片可正常渲染。

解决步骤 #

1. 配置WKWebView的文件访问权限 #

WKWebView出于安全考虑，默认限制本地文件的跨路径访问。初始化WKWebView时，需要通过WKWebViewConfiguration开启相关权限：

let config = WKWebViewConfiguration()

// 适配iOS 10及以下，允许从文件URL加载关联资源
config.preferences.setValue(true, forKey: "allowFileAccessFromFileURLs")

// iOS 14+ 推荐使用官方API开启文件访问
if #available(iOS 14.0, *) {
    config.allowsFileAccess = true
}

// 用配置好的config初始化WKWebView
let wkWebView = WKWebView(frame: yourFrame, configuration: config)

2. 使用相对路径+指定baseURL #

不要在HTML中使用完整绝对路径，改为相对于AppGroup根目录的相对路径，同时在加载HTML时传入AppGroup目录URL作为baseURL：

• 先获取AppGroup的共享目录URL：

guard let appGroupURL = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: "你的AppGroupID") else {
    print("无法获取AppGroup目录")
    return
}

• 修改HTML中的img路径为相对路径：

<!-- 替换原绝对路径为相对路径 -->
<img src="attachment/b16c714e-9bb5-4eaa-924e-e043a69088ea.jpeg" width="100%">

• 加载HTML时传入baseURL：

wkWebView.loadHTMLString(modifiedHtml, baseURL: appGroupURL)

3. 确认AppGroup基础配置 #

• 确保Xcode项目的Target中已开启App Groups功能，并添加了对应的Group ID（在Signing & Capabilities面板配置）
• 验证图片文件确实存在于AppGroup目录的attachment子文件夹下，且应用拥有该文件的读取权限

原因说明 #

Safari对本地文件的访问限制比WKWebView宽松，允许直接加载绝对路径的本地资源；而WKWebView为防范恶意资源加载，默认禁止从HTML字符串中加载跨路径的本地文件，必须显式配置权限并通过baseURL限定资源加载范围。

内容的提问来源于stack exchange，提问作者Cheok Yan Cheng