MAUI WebView嵌入TwitchTV iframe失败，寻求技术解决方案

问题原因 #

直接加载Twitch Player URL正常，但用HtmlWebViewSource嵌入iframe时，WebView的实际来源（Origin）是本地文件协议（如Android的file://、iOS的app://localhost），而你iframe的parent参数仅填写了mydomain.xy，和当前WebView的实际Origin不匹配，触发Twitch的安全验证机制，导致Refused to display...错误。

解决步骤 #

1. 修正iframe的parent参数，覆盖多平台Origin #

在iframe的src中添加多个parent参数，覆盖不同平台的本地Origin：

private string MockPage()
{
    return @"
<html>
<body>
<h1>Hello</h1>
<iframe
    src='https://player.twitch.tv/?channel=haiset&parent=file://&parent=mydomain.xy&parent=app://localhost'
    height='400'
    width='400'
    allowfullscreen>
</iframe>
</body>
</html>";
}

2. 配置WebView平台权限，允许跨域加载 #

针对不同平台调整WebView的安全设置：

Android平台

打开Platforms/Android/MainActivity.cs，添加WebView权限配置：

protected override void OnCreate(Bundle savedInstanceState)
{
    base.OnCreate(savedInstanceState);

    Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("CustomWebView", (handler, view) =>
    {
        if (handler.PlatformView is Android.Webkit.WebView webView)
        {
            webView.Settings.AllowFileAccess = true;
            webView.Settings.AllowUniversalAccessFromFileURLs = true;
            webView.Settings.JavaScriptEnabled = true; // Twitch播放器依赖JS
        }
    });
}

iOS/macOS平台

打开Platforms/iOS/Info.plist或Platforms/MacCatalyst/Info.plist，添加传输安全配置（可选择严格模式仅允许Twitch域名）：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>twitch.tv</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSAllowsArbitraryLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

3. 优化HTML字符串写法（可选） #

用单引号包裹属性值，减少双引号转义带来的潜在错误，如示例中的src='...'写法。

补充说明 #

直接加载Twitch Player URL时，WebView的Origin是https://player.twitch.tv，Twitch的验证逻辑会自动匹配，因此无需额外配置；但嵌入本地HTML后，Origin切换为本地协议，必须通过parent参数明确声明允许的来源，才能通过安全验证。

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