feat: AJAX uses token authentication

.eslintignore

@@ -2,3 +2,4 @@ android/
 build/
 dist/
 ios/
+vendor/

.prettierignore

@@ -2,3 +2,4 @@ android
 ios
 package-lock.json
 .github/**/*.md
+vendor

android/Gutenberg/src/main/java/org/wordpress/gutenberg/GutenbergView.kt

@@ -47,8 +47,8 @@ import org.wordpress.gutenberg.services.EditorService
 import java.util.Collections
 import java.util.Locale
 
-private const val ASSET_URL = "https://appassets.androidplatform.net/assets/index.html"
-private const val ASSET_URL_HTTP = "http://appassets.androidplatform.net/assets/index.html"
+const val DEFAULT_ASSET_DOMAIN = "appassets.androidplatform.net"
+const val ASSET_PATH_INDEX = "/assets/index.html"
 
 /**
  * A WebView-based Gutenberg block editor for Android.
@@ -92,6 +92,7 @@ class GutenbergView : WebView {
     private var isEditorLoaded = false
     private var didFireEditorLoaded = false
     private lateinit var assetLoader: WebViewAssetLoader
+    private lateinit var assetDomain: String
     private val configuration: EditorConfiguration
     private lateinit var dependencies: EditorDependencies
 
@@ -243,10 +244,18 @@ class GutenbergView : WebView {
             ): WebResourceResponse? {
                 if (request.url == null) {
                     return super.shouldInterceptRequest(view, request)
-                } else if (request.url.host?.contains("appassets.androidplatform.net") == true) {
+                }
+
+                // Check the cache interceptor first — it handles JS/CSS
+                // assets from any allowed host, which may include the asset
+                // domain when it matches the site domain.
+                if (requestInterceptor.canIntercept(request)) {
+                    val response = requestInterceptor.handleRequest(request)
+                    if (response != null) return response
+                }
+
+                if (request.url.host == assetDomain) {
                     return assetLoader.shouldInterceptRequest(request.url)
-                } else if (requestInterceptor.canIntercept(request)) {
-                    return requestInterceptor.handleRequest(request)
                 }
 
                 return super.shouldInterceptRequest(view, request)
@@ -275,8 +284,10 @@ class GutenbergView : WebView {
                     return false
                 }
 
-                // Allow asset URLs
-                if (url.host == "appassets.androidplatform.net") {
+                // Allow asset URLs (restrict to the asset path prefix so that
+                // arbitrary site pages don't load inside the WebView when the
+                // asset domain matches the site domain)
+                if (url.host == assetDomain && url.path?.startsWith("/assets/") == true) {
                     return false
                 }
 
@@ -394,6 +405,11 @@ class GutenbergView : WebView {
     private fun loadEditor(dependencies: EditorDependencies) {
         this.dependencies = dependencies
 
+        // Derive the asset loader domain from the site URL so that the editor
+        // document shares the site's origin, making REST API and AJAX requests
+        // same-origin and eliminating CORS restrictions.
+        assetDomain = Uri.parse(configuration.siteURL).host ?: DEFAULT_ASSET_DOMAIN
+
         // Set up asset caching
         requestInterceptor = CachedAssetRequestInterceptor(
             dependencies.assetBundle,
@@ -407,6 +423,7 @@ class GutenbergView : WebView {
         val siteUri = Uri.parse(configuration.siteURL)
         val isLocalHttpSite = siteUri.scheme == "http" && siteUri.host in LOCAL_HOSTS
         assetLoader = WebViewAssetLoader.Builder()
+            .setDomain(assetDomain)
             .setHttpAllowed(isLocalHttpSite)
             .addPathHandler("/assets/", AssetsPathHandler(this.context))
             .build()
@@ -416,15 +433,16 @@ class GutenbergView : WebView {
 
         initializeWebView()
 
-        val assetUrl = if (isLocalHttpSite) ASSET_URL_HTTP else ASSET_URL
+        val scheme = if (isLocalHttpSite) "http" else "https"
+        val assetUrl = "$scheme://$assetDomain$ASSET_PATH_INDEX"
         val editorUrl = BuildConfig.GUTENBERG_EDITOR_URL.ifEmpty {
             assetUrl
         }
 
         WebStorage.getInstance().deleteAllData()
         this.clearCache(true)
         // All cookies are third-party cookies because the root of this document
-        // lives under `appassets.androidplatform.net`
+        // lives under the configured asset domain (e.g., `https://appassets.androidplatform.net`)
         CookieManager.getInstance().setAcceptThirdPartyCookies(this, true)
 
         // Erase all local cookies before loading the URL – we don't want to persist

android/Gutenberg/src/main/java/org/wordpress/gutenberg/model/EditorConfiguration.kt

@@ -28,7 +28,7 @@ data class EditorConfiguration(
     val cachedAssetHosts: Set<String> = emptySet(),
     val editorAssetsEndpoint: String? = null,
     val enableNetworkLogging: Boolean = false,
-    var enableOfflineMode: Boolean = false,
+    var enableOfflineMode: Boolean = false
 ): Parcelable {
 
     /**

android/Gutenberg/src/test/java/org/wordpress/gutenberg/GutenbergViewTest.kt

@@ -5,20 +5,23 @@ import android.net.Uri
 import android.os.Looper
 import android.webkit.ValueCallback
 import android.webkit.WebChromeClient
+import android.webkit.WebResourceRequest
 import android.webkit.WebView
 import kotlinx.coroutines.test.TestScope
 import org.junit.Before
 import org.junit.Test
 import org.junit.Rule
 import org.junit.runner.RunWith
 import org.mockito.Mock
+import org.mockito.Mockito.mock
 import org.mockito.Mockito.`when`
 import org.mockito.MockitoAnnotations
 import org.robolectric.RobolectricTestRunner
 import org.robolectric.RuntimeEnvironment
 import org.robolectric.Shadows.shadowOf
 import org.robolectric.annotation.Config
 import org.junit.Assert.assertEquals
+import org.junit.Assert.assertFalse
 import org.junit.Assert.assertTrue
 import java.util.concurrent.CountDownLatch
 import java.util.concurrent.TimeUnit
@@ -171,4 +174,38 @@ class GutenbergViewTest {
         assertTrue("User agent should contain version number",
             userAgent.contains("GutenbergKit/${GutenbergKitVersion.VERSION}"))
     }
+
+    @Test
+    fun `shouldOverrideUrlLoading allows asset path URLs on site domain`() {
+        val siteView = GutenbergView(
+            EditorConfiguration.builder("https://example.com", "https://example.com/wp-json/")
+                .build(),
+            EditorDependencies.empty,
+            testScope,
+            RuntimeEnvironment.getApplication()
+        )
+
+        val request = mock(WebResourceRequest::class.java)
+        `when`(request.url).thenReturn(Uri.parse("https://example.com/assets/index.html"))
+
+        val result = siteView.webViewClient.shouldOverrideUrlLoading(siteView, request)
+        assertFalse("Asset path URLs on the site domain should load in the WebView", result)
+    }
+
+    @Test
+    fun `shouldOverrideUrlLoading blocks non-asset URLs on site domain`() {
+        val siteView = GutenbergView(
+            EditorConfiguration.builder("https://example.com", "https://example.com/wp-json/")
+                .build(),
+            EditorDependencies.empty,
+            testScope,
+            RuntimeEnvironment.getApplication()
+        )
+
+        val request = mock(WebResourceRequest::class.java)
+        `when`(request.url).thenReturn(Uri.parse("https://example.com/some-page"))
+
+        val result = siteView.webViewClient.shouldOverrideUrlLoading(siteView, request)
+        assertTrue("Non-asset URLs on the site domain should open externally", result)
+    }
 }

android/app/src/main/java/com/example/gutenbergkit/ConfigurationItem.kt

@@ -31,7 +31,7 @@ sealed class ConfigurationItem {
                 is Account.WpCom -> ConfiguredEditor(
                     accountId = account.id,
                     name = account.username,
-                    siteUrl = account.username,
+                    siteUrl = "https://${account.username}",
                     siteApiRoot = account.siteApiRoot,
                     authHeader = "Bearer ${account.token}"
                 )

docs/code/troubleshooting.md

@@ -28,3 +28,11 @@ The file does not exist at "[path]" which is in the optimize deps directory. The
 -   Deleting the `node_modules/.vite` directory (or `node_modules` entirely) and restarting the development server via `make dev-server`.
 
 You may also need to clear your browser cache to ensure no stale files are used.
+
+## AJAX requests fail with CORS errors
+
+**Error:** `Access to XMLHttpRequest at 'https://example.com/wp-admin/admin-ajax.php' from origin 'http://localhost:5173' has been blocked by CORS policy`
+
+This error occurs when the editor makes AJAX requests (e.g., from blocks that use `admin-ajax.php`) while running on the development server. The browser blocks these cross-origin requests because the editor runs on `localhost` while AJAX targets your WordPress site.
+
+**Solution:** AJAX functionality requires a production bundle. Build the editor assets with `make build` and test AJAX features using the demo apps without using the `GUTENBERG_EDITOR_URL` environment variable. See the [AJAX Support section](../integration.md#ajax-support) in the Integration Guide for complete configuration details.

docs/integration.md

@@ -291,3 +291,39 @@ val configuration = EditorConfiguration.builder()
     .setEditorSettings(editorSettingsJSON)
     .build()
 ```
+
+### AJAX Support
+
+Some Gutenberg blocks and features use WordPress AJAX (`admin-ajax.php`) for functionality like form submissions. GutenbergKit supports AJAX requests when properly configured.
+
+**Requirements:**
+
+1. **Production bundle required**: AJAX requests fail with CORS errors when using the development server because the editor runs on `localhost` while AJAX requests target your WordPress site. You must use a production bundle built with `make build`.
+
+2. **Configure `siteURL`**: The `siteURL` configuration option must be set to your WordPress site URL. This is used to construct the AJAX endpoint (`{siteURL}/wp-admin/admin-ajax.php`). On Android, the editor is served from the site's domain so that AJAX requests are same-origin.
+
+3. **Set authentication header**: The `authHeader` configuration must be set. GutenbergKit injects this header into all AJAX requests since the WebView lacks WordPress authentication cookies.
+
+**Configuration examples:**
+
+```swift
+// iOS
+let configuration = EditorConfigurationBuilder(
+    postType: "post",
+    siteURL: URL(string: "https://example.com")!,
+    siteApiRoot: URL(string: "https://example.com/wp-json")!
+)
+    .setAuthHeader("Bearer your-token")
+    .build()
+```
+
+```kotlin
+// Android
+val configuration = EditorConfiguration.builder(
+    siteURL = "https://example.com",
+    siteApiRoot = "https://example.com/wp-json"
+)
+    .setPostType("post")
+    .setAuthHeader("Bearer your-token")
+    .build()
+```

ios/Demo-iOS/Sources/Views/SitePreparationView.swift

@@ -425,7 +425,7 @@ class SitePreparationViewModel {
 
         return EditorConfigurationBuilder(
             postType: selectedPostTypeDetails,
-            siteURL: URL(string: apiRoot.siteUrlString())!,
+            siteURL: URL(string: apiRoot.homeUrlString())!,
             siteApiRoot: siteApiRoot
         )
         .setShouldUseThemeStyles(canUseEditorStyles)

src/utils/ajax.js

@@ -0,0 +1,123 @@
+/**
+ * Internal dependencies
+ */
+import { getGBKit } from './bridge';
+import { warn, debug } from './logger';
+
+/**
+ * Configure AJAX for use without authentication cookies.
+ *
+ * GutenbergKit runs in a WebView without WordPress session cookies,
+ * so AJAX requests need explicit URL and token-based authentication.
+ * Additionally, WordPress core media globals (`wp.media.ajax`,
+ * `wp.media.post`) are normally set by wp-includes/js/media-models.js,
+ * which GutenbergKit doesn't load — so we alias them here.
+ *
+ * @return {void}
+ */
+export function configureAjax() {
+	window.wp = window.wp || {};
+	window.wp.ajax = window.wp.ajax || {};
+	window.wp.ajax.settings = window.wp.ajax.settings || {};
+
+	const { siteURL: rawSiteURL, authHeader } = getGBKit();
+	const siteURL = rawSiteURL?.replace( /\/+$/, '' );
+	configureAjaxUrl( siteURL );
+	configureAjaxAuth( siteURL, authHeader );
+	configureMediaAjax();
+}
+
+function configureAjaxUrl( siteURL ) {
+	if ( ! siteURL ) {
+		warn( 'Unable to configure AJAX URL without siteURL' );
+		return;
+	}
+
+	const ajaxUrl = `${ siteURL }/wp-admin/admin-ajax.php`;
+	// Global used within WordPress admin pages
+	window.ajaxurl = ajaxUrl;
+	// Global used by WordPress' JavaScript API
+	window.wp.ajax.settings.url = ajaxUrl;
+
+	debug( 'AJAX URL configured' );
+}
+
+function configureAjaxAuth( siteURL, authHeader ) {
+	if ( ! siteURL ) {
+		warn( 'Unable to configure AJAX auth without siteURL' );
+		return;
+	}
+
+	if ( ! authHeader ) {
+		warn( 'Unable to configure AJAX auth without authHeader' );
+		return;
+	}
+
+	if ( ! window.jQuery?.ajaxPrefilter ) {
+		warn( 'Unable to configure AJAX auth: jQuery not available' );
+		return;
+	}
+
+	let siteOrigin;
+	try {
+		siteOrigin = new URL( siteURL ).origin;
+	} catch {
+		warn( 'Unable to configure AJAX auth: invalid siteURL' );
+		return;
+	}
+
+	window.jQuery.ajaxPrefilter( function ( options ) {
+		if ( ! isSameOrigin( options.url, siteOrigin ) ) {
+			return;
+		}
+
+		const originalBeforeSend = options.beforeSend;
+		options.beforeSend = function ( xhr ) {
+			xhr.setRequestHeader( 'Authorization', authHeader );
+			if ( typeof originalBeforeSend === 'function' ) {
+				originalBeforeSend( xhr );
+			}
+		};
+	} );
+
+	debug( 'AJAX auth configured' );
+}
+
+/**
+ * Check whether a request URL shares the same origin as the site.
+ *
+ * Uses `URL.origin` so that scheme, host, and port must all match exactly,
+ * preventing credential leakage to lookalike domains (e.g.
+ * `https://example.com.evil.com`).
+ *
+ * @param {string} requestUrl The URL of the outgoing request.
+ * @param {string} siteOrigin The origin derived from `siteURL`.
+ * @return {boolean} Whether the request targets the same origin.
+ */
+function isSameOrigin( requestUrl, siteOrigin ) {
+	try {
+		return new URL( requestUrl ).origin === siteOrigin;
+	} catch {
+		return false;
+	}
+}
+
+/**
+ * Alias `wp.media.ajax` and `wp.media.post` to the (now-authenticated)
+ * `wp.ajax.send` and `wp.ajax.post`. WordPress core normally sets these
+ * in `wp-includes/js/media-models.js`, which GutenbergKit doesn't load.
+ *
+ * @see https://github.com/WordPress/wordpress-develop/blob/117af7e/src/js/_enqueues/wp/media/models.js#L134
+ */
+function configureMediaAjax() {
+	if ( ! window.wp.ajax.send || ! window.wp.ajax.post ) {
+		warn(
+			'Unable to configure media AJAX: wp.ajax.send/post not available'
+		);
+		return;
+	}
+
+	window.wp.media = window.wp.media || {};
+	window.wp.media.ajax = window.wp.ajax.send;
+	window.wp.media.post = window.wp.ajax.post;
+}