Add secure (opaque-origin) content iframe mode

.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/

README.md

@@ -104,6 +104,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/class-admin-settings.php

@@ -70,13 +70,73 @@ public function display_settings_page() {
 			<h1><?php esc_html_e( 'eXeLearning Settings', 'exelearning' ); ?></h1>
 
 			<?php $this->render_editor_status_section(); ?>
+			<?php $this->render_security_section(); ?>
 			<?php $this->render_styles_section(); ?>
 			<?php $this->render_content_delivery_section(); ?>
 			<?php $this->render_help_section(); ?>
 		</div>
 		<?php
 	}
 
+	/**
+	 * Render the iframe security mode section and persist its form submission.
+	 *
+	 * Lets the admin choose how embedded eXeLearning content is sandboxed:
+	 *  - Secure (default): opaque-origin iframe; author HTML/JS cannot reach the
+	 *    WordPress page (recommended).
+	 *  - Legacy: same-origin iframe, for environments that need it (e.g. WordPress
+	 *    Playground, whose service worker only serves same-origin documents).
+	 */
+	private function render_security_section() {
+		if ( isset( $_POST['exelearning_iframe_mode_submit'] ) ) {
+			check_admin_referer( 'exelearning_iframe_mode' );
+			if ( current_user_can( 'manage_options' ) ) {
+				$submitted = isset( $_POST['exelearning_iframe_sandbox_mode'] )
+					? sanitize_key( wp_unslash( $_POST['exelearning_iframe_sandbox_mode'] ) )
+					: '';
+				update_option(
+					ExeLearning_Iframe_Sandbox::OPTION,
+					ExeLearning_Iframe_Sandbox::MODE_LEGACY === $submitted
+						? ExeLearning_Iframe_Sandbox::MODE_LEGACY
+						: ExeLearning_Iframe_Sandbox::MODE_SECURE
+				);
+				echo '<div class="notice notice-success is-dismissible"><p>'
+					. esc_html__( 'Settings saved.', 'exelearning' ) . '</p></div>';
+			}
+		}
+
+		$current = ExeLearning_Iframe_Sandbox::mode();
+		?>
+		<div class="card" id="exelearning-security-card" style="max-width: 900px; margin-bottom: 20px;">
+			<h2><?php esc_html_e( 'Security', 'exelearning' ); ?></h2>
+			<form method="post">
+				<?php wp_nonce_field( 'exelearning_iframe_mode' ); ?>
+				<table class="form-table" role="presentation">
+					<tr>
+						<th scope="row">
+							<label for="exelearning_iframe_sandbox_mode"><?php esc_html_e( 'Iframe security mode', 'exelearning' ); ?></label>
+						</th>
+						<td>
+							<select name="exelearning_iframe_sandbox_mode" id="exelearning_iframe_sandbox_mode">
+								<option value="secure" <?php selected( $current, ExeLearning_Iframe_Sandbox::MODE_SECURE ); ?>>
+									<?php esc_html_e( 'Secure (opaque-origin sandbox)', 'exelearning' ); ?>
+								</option>
+								<option value="legacy" <?php selected( $current, ExeLearning_Iframe_Sandbox::MODE_LEGACY ); ?>>
+									<?php esc_html_e( 'Legacy (same-origin)', 'exelearning' ); ?>
+								</option>
+							</select>
+							<p class="description">
+								<?php esc_html_e( 'Secure (recommended) isolates embedded content in an opaque-origin iframe. Legacy keeps same-origin behavior, needed only in some environments such as WordPress Playground.', 'exelearning' ); ?>
+							</p>
+						</td>
+					</tr>
+				</table>
+				<?php submit_button( __( 'Save changes', 'exelearning' ), 'primary', 'exelearning_iframe_mode_submit' ); ?>
+			</form>
+		</div>
+		<?php
+	}
+
 	/**
 	 * Render the help section.
 	 *