Cordova iOS中iframe请求未携带Origin/Referer等头的解决问询

在Cordova 11.1.0 + cordova-ios 6.2.0环境下，动态设置src的iframe发起请求时，会出现请求头缺失origin、referer、x-requested-with等字段的问题，常规的referrerpolicy属性和referrer meta标签无法解决，以下是几种可行的解决方法：

方法1：自定义Cordova插件拦截并修改请求头 #

Cordova iOS基于WKWebView，可通过原生代码拦截网络请求并手动添加所需头字段：

• 编写自定义插件，实现WKWebView的WKNavigationDelegate代理方法，拦截iframe的请求并修改请求头：

  - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
      // 判断是否为iframe子页面请求
      if (navigationAction.targetFrame != webView.mainFrame) {
          NSMutableURLRequest *modifiedReq = [navigationAction.request mutableCopy];
          // 按需添加缺失的请求头
          [modifiedReq setValue:@"你的APP源地址" forHTTPHeaderField:@"origin"];
          [modifiedReq setValue:[webView.URL absoluteString] forHTTPHeaderField:@"referer"];
          [modifiedReq setValue:@"XMLHttpRequest" forHTTPHeaderField:@"x-requested-with"];
          [modifiedReq setValue:@"text/html" forHTTPHeaderField:@"content-type"];
          [modifiedReq setValue:@"no-cache" forHTTPHeaderField:@"Pragma"];
          [modifiedReq setValue:@"no-cache" forHTTPHeaderField:@"cache-control"];
          
          // 用修改后的请求重新加载，取消原请求
          [webView loadRequest:modifiedReq];
          decisionHandler(WKNavigationActionPolicyCancel);
          return;
      }
      decisionHandler(WKNavigationActionPolicyAllow);
  }
  

• 插件配置时要确保注册WKWebView代理，保证能捕获到iframe的请求。

方法2：AJAX预加载内容注入iframe（替代方案） #

如果不想开发原生插件，可以通过AJAX先获取页面内容，再注入iframe：

• 用AJAX请求目标URL时携带完整请求头，拿到内容后写入iframe：

  // AngularJS示例代码
  $http.get($scope.logItem.url, {
    headers: {
      'origin': window.location.origin,
      'referer': window.location.href,
      'x-requested-with': 'XMLHttpRequest',
      'content-type': 'text/html',
      'Pragma': 'no-cache',
      'cache-control': 'no-cache'
    }
  }).then(function(res) {
    const iframe = document.getElementById('logIFrame');
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    iframeDoc.open();
    iframeDoc.write(res.data);
    iframeDoc.close();
  });
  

• 注意：这种方式需要目标服务器允许跨域AJAX请求，若页面有外部依赖资源（如CSS、JS），可能需要调整资源路径。

方法3：调整cordova-ios的WKWebView配置 #

检查并修改项目的config.xml，调整WKWebView的安全和行为配置：

<platform name="ios">
  <!-- 指定使用WKWebView引擎 -->
  <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine"/>
  <feature name="CDVWKWebViewEngine">
    <param name="ios-package" value="CDVWKWebViewEngine"/>
  </feature>
  <!-- 可添加其他WKWebView偏好设置 -->
  <preference name="WKWebViewPreferredContentMode" value="mobile"/>
</platform>

同时确保根页面的Content-Security-Policy没有限制iframe加载目标URL，以及允许自定义请求头的传递。

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