Cordova中Youtube域名白名单配置及iframe视频无法播放问题排查

问题现象 #

在Cordova应用中通过iframe嵌入YouTube视频后，视频无法加载，点击播放按钮无响应，同时出现大量白名单拦截及CORS报错。安卓设备上的显示情况如下：

当前配置 #

HTML中的iframe代码 #

<iframe width='320' height='180' 
   src='https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1' 
   frameborder='1' 
   allowfullscreen allow='accelerometer; autoplay; encrypted-media; gyroscope; 
   picture-in-picture; fullscreen'>
</iframe>

内容安全策略（CSP） #

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self';
      data: gap: https://ssl.gstatic.com 'unsafe-eval';
      style-src 'self' 'unsafe-inline';
      media-src *;
      img-src 'self' data: content:;
      frame-src https://www.youtube.com;">

config.xml配置 #

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.cordova.hellocordova" version="1.0.0" 
     xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<feature name="Whitelist">
    <param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
    <param name="onload" value="true" />
</feature>
<name>HelloCordova</name>
<description>
    A sample Apache Cordova application that responds to the deviceready event.
</description>
<author email="dev@cordova.apache.org" href="http://cordova.io">
    Apache Cordova Team
</author>
<content src="index.html" />
<allow-navigation href="https://www.youtube.com/*"/>
<allow-navigation href="data:*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />
<preference name="loglevel" value="DEBUG" />
</widget>

报错信息 #

2022-09-11 12:47:26.175 5078-5932/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://googleads.g.doubleclick.net/pagead/id
2022-09-11 12:47:26.189 5078-5932/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://static.doubleclick.net/instream/ad_status.js
2022-09-11 12:47:26.205 5078-5078/io.cordova.hellocordova I/chromium: 
[INFO:CONSOLE(7)] "Access to XMLHttpRequest at 
'https://googleads.g.doubleclick.net/pagead/id' from origin 'https://www.youtube.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.", source: https://www.youtube.com/embed/C0DPdy98e4c? 
autoplay=1 (7)
2022-09-11 12:47:26.264 5078-5930/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://jnn- 
pa.googleapis.com/$rpc/google.internal.waa.v1.Waa/Create
2022-09-11 12:47:26.298 5078-5932/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://www.google.com/js/th/PzKwASpP14dcK- 
4xI3W8wlArk1PaCxVzsebnznhuyzw.js
2022-09-11 12:47:26.380 5078-5930/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: 
https://yt3.ggpht.com/ytc/AMLnZu8nn6pHKRfEKrkfeeohdYrQ1W4OJI6toSqTVjYQNGM=s68-c-k- 
c0x00ffffff-no-rj
2022-09-11 12:47:26.382 5078-5930/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://i.ytimg.com/vi/C0DPdy98e4c/hqdefault.jpg
2022-09-11 12:47:26.432 5078-5078/io.cordova.hellocordova I/chromium: 
[INFO:CONSOLE(0)] "Access to XMLHttpRequest at 'https://jnn- 
pa.googleapis.com/$rpc/google.internal.waa.v1.Waa/Create' from origin 
'https://www.youtube.com' has been blocked by CORS policy: Response to preflight 
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is 
present on the requested resource.", source: 
https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1 (0)
2022-09-11 12:47:27.437 5078-5932/io.cordova.hellocordova W/SystemWebViewClient: URL 
blocked by whitelist: https://jnn- 
pa.googleapis.com/$rpc/google.internal.waa.v1.Waa/Create
2022-09-11 12:47:27.452 5078-5078/io.cordova.hellocordova I/chromium: 
[INFO:CONSOLE(0)] "Access to XMLHttpRequest at 'https://jnn- 
pa.googleapis.com/$rpc/google.internal.waa.v1.Waa/Create' from origin 

修复方案 #

从报错信息可以看出，YouTube嵌入页需要加载广告、缩略图、API等多个关联域名的资源，但这些域名未被当前的白名单和CSP规则允许，导致被拦截。

1. 更新内容安全策略（CSP） #

修改CSP meta标签，补充所有被拦截的资源域名：

<meta http-equiv="Content-Security-Policy" 
      content="default-src 'self' https://www.youtube.com https://googleads.g.doubleclick.net https://static.doubleclick.net https://jnn-pa.googleapis.com https://www.google.com https://yt3.ggpht.com https://i.ytimg.com;
      data: gap: https://ssl.gstatic.com 'unsafe-eval';
      style-src 'self' 'unsafe-inline';
      media-src *;
      img-src 'self' data: content: https://yt3.ggpht.com https://i.ytimg.com;
      frame-src https://www.youtube.com;
      script-src 'self' https://www.youtube.com https://static.doubleclick.net https://www.google.com 'unsafe-eval';">

• 将所有被拦截的域名添加到default-src，确保基础资源能正常加载
• 为img-src补充YouTube头像和视频缩略图的域名
• 为script-src添加广告和Google相关脚本的域名

2. 更新config.xml的白名单规则 #

在allow-navigation中添加所有被拦截的域名：

<allow-navigation href="https://www.youtube.com/*"/>
<allow-navigation href="https://googleads.g.doubleclick.net/*"/>
<allow-navigation href="https://static.doubleclick.net/*"/>
<allow-navigation href="https://jnn-pa.googleapis.com/*"/>
<allow-navigation href="https://www.google.com/*"/>
<allow-navigation href="https://yt3.ggpht.com/*"/>
<allow-navigation href="https://i.ytimg.com/*"/>
<allow-navigation href="data:*" />

Cordova的白名单会限制WebView允许导航的域名，必须显式允许这些关联域名，才能让嵌入页加载完整资源。

3. 优化iframe参数（可选） #

移动端WebView通常会限制自动播放，若autoplay=1无效，可移除该参数，由用户手动触发播放：

<iframe width='320' height='180' 
   src='https://www.youtube.com/embed/C0DPdy98e4c' 
   frameborder='0' 
   allowfullscreen allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'>
</iframe>

同时将frameborder设为0，符合网页规范。

4. 验证白名单插件版本 #

确保cordova-plugin-whitelist为最新版本，旧版本可能存在规则兼容问题：

cordova plugin update cordova-plugin-whitelist

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