Ionic 6+Capacitor 4 iOS应用TinyMCE编辑器Referer头缺失问题求助

针对你用Ionic 6、Capacitor 4、Angular 15开发iOS应用时，集成@tinymce/tinymce-angular@7.0.0出现的Referer请求头缺失问题，试试以下几个针对性方案：

1. 配置Capacitor的WebView全局请求头 #

在capacitor.config.ts中添加WebView的额外HTTP头配置，强制注入Referer：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app',
  appName: 'Your App',
  webDir: 'dist/your-app',
  ios: {
    webViewPreferences: {
      additionalHttpHeaders: {
        'Referer': 'https://your-app-domain.com' // 替换为你的实际域名或自定义合法值
      }
    }
  }
};

export default config;

修改后执行以下命令同步到iOS项目：

ionic build
npx cap sync ios

2. 修正TinyMCE初始化配置参数 #

你之前使用的data-referrer不是TinyMCE的合法配置项，改用官方支持的referrer_policy结合document_base_url来生成正确的Referer：

import { Component } from '@angular/core';

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html'
})
export class EditorComponent {
  editorConfig = {
    height: 500,
    document_base_url: 'https://your-app-domain.com/', // 设置编辑器的基准URL
    referrer_policy: 'origin-when-cross-origin', // 可根据需求选：no-referrer、origin等
    // 其他编辑器配置项...
  };
}

3. iOS端拦截WebView请求手动补全Referer #

在iOS项目的AppDelegate.swift中添加WebView请求拦截逻辑，手动为TinyMCE相关请求添加Referer头：

import UIKit
import Capacitor
import WebKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate, WKNavigationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // 获取Capacitor的WebView并设置导航代理
        if let webView = (window?.rootViewController as? CAPBridgeViewController)?.webView {
            webView.navigationDelegate = self
        }
        return true
    }

    // 拦截请求并添加Referer
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        var mutableRequest = navigationAction.request
        // 仅针对TinyMCE相关请求添加（可根据实际URL调整判断条件）
        if let url = mutableRequest.url, url.host?.contains("tinymce") ?? false {
            mutableRequest.setValue("https://your-app-domain.com", forHTTPHeaderField: "Referer")
        }
        decisionHandler(.allow)
    }
}

4. 检查CDN加载的Referer策略 #

如果是通过CDN加载TinyMCE核心脚本，在index.html中加载时指定referrerpolicy属性：

<script src="https://cdn.tiny.cloud/1/your-api-key/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>

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