Secure opaque-origin content + HTTP editor preview v2

.gitignore

@@ -54,6 +54,7 @@ public/style/workarea/*.css.map
 # Test results
 test-results/
 test-results/*
+playwright-report/
 
 # Built static editor - download from releases or build with `make build-editor`
 dist/static/

.phpcs.xml.dist

@@ -9,7 +9,10 @@
     <exclude-pattern>/tests/*</exclude-pattern>
     <exclude-pattern>/includes/vendor/*</exclude-pattern>
     <exclude-pattern>/dist/*</exclude-pattern>
-    <exclude-pattern>/exelearning/*</exclude-pattern>
+    <!-- Only the WordPress uploads extraction dir, path-anchored. A bare
+         `/exelearning/*` matched ANY checkout path containing an `exelearning/`
+         segment, silently excluding the whole plugin from local phpcs runs. -->
+    <exclude-pattern>*/wp-content/uploads/exelearning/*</exclude-pattern>
 
     <arg name="extensions" value="php"/>
     <arg name="colors"/>

README.md

@@ -55,6 +55,18 @@ EXELEARNING_EDITOR_REF=my-feature EXELEARNING_EDITOR_REF_TYPE=branch make build-
 
 > **Important:** It is recommended to download from [Releases](https://github.com/exelearning/wp-exelearning/releases) for production use, which includes the embedded editor pre-built. If you clone the repository without building the editor, you can install it from the WordPress admin panel at **Settings > eXeLearning** using the "Download & Install Editor" button, which fetches the latest static editor package from GitHub Releases automatically. No remote loading or proxy is used at runtime.
 
+### Server configuration (nginx)
+
+The live editor **preview** requires **pretty permalinks** (Settings → Permalinks; any structure other than *Plain*) — under plain permalinks the plugin fails closed and shows an admin notice.
+
+On **nginx**, also block direct web access to the ephemeral preview session store: the plugin serves those bytes through an opaque-origin capability URL with a sandbox CSP, and unlike Apache (`.htaccess`) nginx will otherwise serve the materialized author HTML same-origin without that CSP. Include the shipped snippet from your `server { … }` block:
+
+```nginx
+include /path/to/wp-content/plugins/exelearning/nginx-exelearning-preview.conf;
+```
+
+See [`nginx-exelearning-preview.conf`](nginx-exelearning-preview.conf) and [`docs/preview-serving-contract.md`](docs/preview-serving-contract.md) for details.
+
 ## Usage
 
 ### Uploading ELPX Files
@@ -103,6 +115,30 @@ Administrators can upload eXeLearning style packages and control which styles th
 
 Uploaded ZIPs are validated against path traversal, absolute paths, oversize archives (default 20 MB, filterable via `exelearning_styles_max_zip_size`), and a strict file-extension allow-list.
 
+## External embeds in secure mode
+
+In secure mode the `.elpx` content runs in a sandboxed, opaque-origin iframe. That
+opaque origin propagates to any nested iframe, so cross-origin video players and PDF
+viewers render blank. To keep them working, whitelisted video embeds (YouTube and
+Vimeo hosts), any cross-origin `https` `.pdf`, and the package's own local PDFs are
+*promoted* to the trusted parent page and rendered inline on top of the content.
+
+Two cooperating scripts make this work:
+
+- `assets/js/exe-embed-shim.js` runs inside the content iframe, replaces each
+  promotable iframe with a same-size placeholder, and `postMessage`s its geometry
+  and URL to the parent.
+- `assets/js/exe-embed-relay.js` runs on the host page, validates each reported URL
+  against the whitelist, rebuilds the canonical player URL, and overlays the real
+  player exactly over the placeholder.
+
+A static Firefox end-to-end test exercises the real shim and relay against a
+self-contained harness (no WordPress runtime needed):
+
+```bash
+npm run test:e2e:embed
+```
+
 ## Developer hooks
 
 The plugin exposes a set of WordPress actions and filters (all prefixed with

admin/views/editor-bootstrap.php

@@ -111,6 +111,15 @@
 		'fallbackTheme'      => 'base',
 	);
 
+// Opaque HTTP preview transport (serving contract v2). Emitted only under
+// pretty permalinks; otherwise `previewHttp` is omitted so the editor fails
+// closed (no silent same-origin fallback) and ExeLearning_Editor's admin notice
+// explains the requirement. wp_json_encode() output is valid JS object syntax.
+$exelearning_preview_http    = ExeLearning_Editor::build_preview_http_config( $exelearning_nonce );
+$exelearning_preview_http_js = null === $exelearning_preview_http
+	? ''
+	: "\n            previewHttp: " . wp_json_encode( $exelearning_preview_http ) . ',';
+
 // Inject WordPress configuration BEFORE the closing </head> tag.
 // phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedScript -- Standalone HTML page output, not a WordPress template.
 $exelearning_wp_config_script = sprintf(
@@ -200,15 +209,18 @@ enumerable: true,
                 fileMenu: true,
                 saveButton: true,
                 userMenu: true,
-            },
+            },%s
         };
 
-        // TODO: Remove when editor ResourceFetcher handles 404 gracefully.
-        // Patch fetch and jQuery AJAX to handle CSS/idevices 404s without breaking.
+        // Embedded-editor shims: hide the chrome the host owns and soften CSS /
+        // idevice 404s so a missing optional asset never breaks boot. The live
+        // preview travels over HTTP (see previewHttp above), never a Service
+        // Worker on the WordPress origin — so there is no preview-sw / /viewer/
+        // wiring here.
+        // TODO: Remove the 404 shim when the editor ResourceFetcher handles 404
+        // gracefully.
         (function() {
             var editorBaseUrl = (window.__WP_EXE_CONFIG__ && window.__WP_EXE_CONFIG__.editorBaseUrl) || "";
-            var editorBasePathname = "";
-            var originalServiceWorker = navigator.serviceWorker || null;
             var forceHideSelectors = [
                 "#dropdownFile",
                 "#head-top-save-button",
@@ -218,12 +230,6 @@ enumerable: true,
                 "#mobile-navbar-button-openuserodefiles"
             ];
 
-            try {
-                editorBasePathname = editorBaseUrl ? new URL(editorBaseUrl, window.location.origin).pathname : "";
-            } catch (e) {
-                editorBasePathname = "";
-            }
-
             function forceHideEmbeddedUi() {
                 for (var i = 0; i < forceHideSelectors.length; i += 1) {
                     var nodes = document.querySelectorAll(forceHideSelectors[i]);
@@ -243,94 +249,20 @@ function forceHideEmbeddedUi() {
                 }
             }
 
-            function normalizePreviewIframeSrc(url) {
-                if (!url || !editorBaseUrl) {
-                    return url;
-                }
-
-                var baseNoSlash = editorBaseUrl.replace(/\/$/, "");
-                var raw = url;
-
-                try {
-                    if (raw.startsWith("http://") || raw.startsWith("https://")) {
-                        raw = new URL(raw).pathname;
-                    }
-                } catch (e) {}
-
-                if (raw.indexOf("/wp-admin/admin.php/viewer/") === 0) {
-                    return baseNoSlash + "/viewer/" + raw.substring("/wp-admin/admin.php/viewer/".length);
-                }
-                if (raw.indexOf("/viewer/") === 0) {
-                    return baseNoSlash + raw;
-                }
-                if (raw.indexOf("viewer/") === 0) {
-                    return baseNoSlash + "/" + raw;
-                }
-
-                return url;
-            }
-
-            function ensurePreviewIframeSrc() {
-                var previewIframe = document.getElementById("preview-iframe");
-                if (!previewIframe) {
-                    return;
-                }
-
-                var currentSrc = previewIframe.getAttribute("src") || previewIframe.src || "";
-                var fixedSrc = normalizePreviewIframeSrc(currentSrc);
-                if (fixedSrc && fixedSrc !== currentSrc) {
-                    previewIframe.setAttribute("src", fixedSrc);
-                }
-            }
-
             if (document.readyState === "loading") {
                 document.addEventListener("DOMContentLoaded", forceHideEmbeddedUi);
-                document.addEventListener("DOMContentLoaded", ensurePreviewIframeSrc);
             } else {
                 forceHideEmbeddedUi();
-                ensurePreviewIframeSrc();
             }
 
             var hideObserver = new MutationObserver(function() {
                 forceHideEmbeddedUi();
-                ensurePreviewIframeSrc();
             });
             hideObserver.observe(document.documentElement || document.body, {
                 childList: true,
-                subtree: true,
-                attributes: true,
-                attributeFilter: ["src"]
+                subtree: true
             });
 
-            // Fix preview service worker paths in WP mode.
-            if (originalServiceWorker && editorBasePathname) {
-                var registerOriginal = originalServiceWorker.register.bind(originalServiceWorker);
-                var getRegistrationOriginal = originalServiceWorker.getRegistration.bind(originalServiceWorker);
-                var fixedSwPath = editorBasePathname.replace(/\/$/, "") + "/preview-sw.js";
-                var fixedScope = editorBasePathname.replace(/\/$/, "") + "/viewer/";
-
-                originalServiceWorker.register = function(scriptURL, options) {
-                    var nextScript = scriptURL;
-                    var nextOptions = options || {};
-                    if (typeof nextScript === "string" && nextScript.indexOf("preview-sw.js") !== -1) {
-                        nextScript = fixedSwPath;
-                        nextOptions = Object.assign({}, nextOptions, { scope: fixedScope });
-                    }
-                    return registerOriginal(nextScript, nextOptions);
-                };
-
-                originalServiceWorker.getRegistration = function(clientURL) {
-                    var nextClientUrl = clientURL;
-                    if (
-                        !nextClientUrl ||
-                        (typeof nextClientUrl === "string" && nextClientUrl.indexOf("/wp-admin/") === 0)
-                    ) {
-                        nextClientUrl = fixedScope;
-                    }
-                    return getRegistrationOriginal(nextClientUrl);
-                };
-            }
-
             function normalizeEditorAssetUrl(url) {
                 if (!url || typeof url !== "string" || !editorBaseUrl) {
                     return url;
@@ -482,6 +414,7 @@ function normalizeEditorAssetUrl(url) {
 	wp_json_encode( $exelearning_editor_base_url ),
 	wp_json_encode( $exelearning_i18n ),
 	wp_json_encode( $exelearning_theme_registry_override ),
+	$exelearning_preview_http_js,
 	esc_url( $exelearning_plugin_assets_url )
 );
 // phpcs:enable WordPress.WP.EnqueuedResources.NonEnqueuedScript
@@ -538,10 +471,20 @@ function normalizeEditorAssetUrl(url) {
 // Insert config script and styles before </head>.
 $exelearning_template = str_replace( '</head>', $exelearning_wp_config_script . $exelearning_page_styles . '</head>', $exelearning_template );
 
-// Add <base> tag to set the base URL for all relative paths.
-// This ensures paths like "files/perm/..." resolve to the static editor directory.
+// Add <base> tag to set the base URL for all relative paths, and a first-thing
+// Service Worker guard so the bundled pre-HTTP-v2 editor can never register a
+// same-origin /viewer/ preview worker on the WordPress origin (interim
+// protection; see ExeLearning_Editor::service_worker_guard_script). Both are
+// injected right after <head>, before any editor script runs.
+// phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedScript -- Standalone HTML page output, not a WordPress template.
+$exelearning_sw_guard_tag = '<script>' . ExeLearning_Editor::service_worker_guard_script() . '</script>';
+// phpcs:enable WordPress.WP.EnqueuedResources.NonEnqueuedScript
 $exelearning_base_tag = sprintf( '<base href="%s/">', esc_url( $exelearning_editor_base_url ) );
-$exelearning_template = preg_replace( '/(<head[^>]*>)/i', '$1' . $exelearning_base_tag, $exelearning_template );
+$exelearning_template = preg_replace(
+	'/(<head[^>]*>)/i',
+	'$1' . $exelearning_sw_guard_tag . $exelearning_base_tag,
+	$exelearning_template
+);
 
 // Fix asset paths: Replace relative paths with absolute plugin paths.
 // The static build uses relative paths like "./app/", we need absolute paths.