Client-Side Media Everywhere
| 开发者 | adamsilverstein |
|---|---|
| 更新时间 | 2026年9月12日 08:10 |
| PHP版本: | 7.4 及以上 |
| WordPress版本: | 7.1 |
| 版权: | GPLv2 or later |
| 版权网址: | 版权信息 |
详情介绍:
In one sentence: this plugin gets client-side media processing working in Safari and Firefox, which WordPress otherwise only does in Chrome.
When you upload an image in Chrome, WordPress resizes and compresses it on your own device before it is sent, so less data goes over the wire and your server does much less work. In Safari and Firefox that is switched off, and uploads fall back to the older server-side path. This plugin switches it back on.
There is nothing to configure - activate the plugin and it works. Chrome is unaffected, because WordPress already handles it there.
One thing to know before you install: this works by turning on cross-origin isolation, which is a real security boundary and can affect embeds and third-party media inside the editor. It is worth reading the Tradeoffs section below first.
Why WordPress switches it off:
WordPress 7.1 and Gutenberg include client-side media processing powered by WebAssembly (wasm-vips). This requires cross-origin isolation, which is achieved via Document-Isolation-Policy (DIP) on Chrome 137+.
However, Firefox and Safari do not yet support DIP, and neither does Chrome before 137, so client-side media processing is disabled on those browsers.
This plugin restores support for Firefox and Safari by sending the older COEP/COOP headers (Cross-Origin-Embedder-Policy / Cross-Origin-Opener-Policy) on browsers where DIP is not available.
Under the hood:
- Sends
Cross-Origin-Opener-Policy: same-originandCross-Origin-Embedder-Policy: credentialless(orrequire-corpon Safari) headers in the block editor. - On Safari (
require-corp), addscrossorigin="anonymous"to cross-origin images, scripts, styles, audio, and video so they can load through CORS. On Firefox (credentialless) nothing is added, because those resources already load without it and the attribute would break any host without CORS headers. - Applies the same rule to the media library templates, so the media modal previews match the isolation mode in use on whichever WordPress version is running.
- Adds
credentiallessattribute to iframes so they continue working under COEP. - Filters embed previews for providers that do not support credentialless iframes (Facebook, SmugMug).
- WordPress 6.8+ with the Gutenberg plugin (which provides the client-side media processing feature), or WordPress 7.1+.
- The client-side media processing feature must be enabled (it is on by default in secure contexts).
- HTTPS (or localhost): client-side media processing requires a secure context.
安装:
- Upload the
client-side-media-everywherefolder to/wp-content/plugins/. - Activate the plugin through the 'Plugins' menu in WordPress.
- The plugin activates automatically on browsers that need COEP/COOP headers.
常见问题:
Why is media still processed server-side?
Check that your site is served over HTTPS (or localhost). Client-side media processing requires a secure context; without one, cross-origin isolation is unavailable and WordPress silently falls back to server-side processing. The editor logs an informational message in the browser console explaining the reason for the fallback.
Do I need this plugin on Chrome?
No. Chrome 137+ uses Document-Isolation-Policy, which is handled by WordPress core / Gutenberg. This plugin only activates on browsers that do not support DIP.
Will this break my site?
Not the front-end: the COEP/COOP headers are only sent on block editor admin pages, and only on browsers that need them (Firefox, Safari, Chrome < 137). Within the editor on those browsers, cross-origin isolation can break oEmbed previews, media served from third-party origins, popup-based authentication flows, and plugins that load editor assets cross-origin. See the Tradeoffs section for the details and for how to turn the headers off if you hit one.
Can I disable the COEP/COOP behavior?
Yes - deactivate the plugin. Sending the COEP/COOP headers is the plugin's only job, so there is no separate settings toggle: activating the plugin turns the behavior on, deactivating it turns it off.
To keep the plugin active but suppress the headers programmatically (for example, per environment), use the csme_use_coep_coop filter:
add_filter( 'csme_use_coep_coop', '__return_false' );
How do HEIC uploads work?
WordPress 7.1 converts HEIC images client-side where possible and server-side otherwise. This plugin no longer includes any HEIC handling of its own.
更新日志:
1.2.0
- The plugin now adds
crossorigin="anonymous"itself, only on Safari (require-corp), instead of relying on the WordPress core function that is being removed. Covers images, scripts, styles, audio, video, and the audio or video parent of a cross-origin<source>, without seeking backwards through the document. - Stopped adding
crossorigin="anonymous"on Firefox and Chrome below 137 (credentialless). Cross-origin resources already load there without it, and the attribute was breaking media served from hosts without CORS headers. - The COEP/COOP headers are sent directly instead of from an output buffer callback.
- Fixed cross-origin media in the block editor canvas on Safari. The observer that adds
crossorigin="anonymous"attached to the canvas iframe before its real document existed and never saw anything rendered in it, so images, audio and video from other sites showed as broken in the editor while working on the front end. It now follows the canvas document, marks what is already there, and retries a blocked load once. - Media that cannot load on Safari at all, because its host does not allow cross-origin requests, now shows a "can't be previewed in Safari" panel in the canvas instead of a broken image or an "Error" player, with a notice in the block inspector and one editor notice explaining why. The media itself is unaffected and still displays on the site.
- The plugin now decides the
crossoriginattributes on the media library templates itself, adding them on Safari and removing them on Firefox and Chrome below 137. WordPress 7.1 adds them to every audio and video template regardless of browser, which broke media modal previews of audio and video served from a CDN on Firefox, and the WordPress release that drops the attributes would otherwise leave Safari without them.
- Reworked the description to open with a plain explanation of what the plugin does, instead of leading with wasm-vips, Document-Isolation-Policy and COEP/COOP. The technical explanation is still there, further down.
- Added
safariandfirefoxto the plugin tags, since that is what people are likely searching for. - No functional changes: the plugin code is identical to 1.1.0.
- Renamed the plugin from "Client-Side Media Experiments" to "Client-Side Media Everywhere" to better describe what it does: bringing the WordPress client-side media processing feature to browsers that core does not cover.
- Removed the settings screen and the
csme_enabledoption. Activating the plugin now always enables the COEP/COOP headers; deactivate the plugin to turn them off. Note: sites that had unchecked Enable under Settings > Media will have the headers re-enabled after updating. Use thecsme_use_coep_coopfilter to disable the behavior programmatically. - Added crossorigin="anonymous" to cross-origin images on Safari (require-corp), where they would otherwise be blocked by the embedder policy. Covers src and srcset, including protocol-relative URLs.
- Included the GPL-2.0 license text in the plugin package.
- Excluded development files (package.json, package-lock.json, .wp-env.json) from the distribution zip.
- First stable release, fully compatible with the WordPress 7.1 client-side media processing feature.
- Removed the HEIC conversion module (heic2any/CDN): WordPress 7.1 handles HEIC uploads in core.
- Fixed Chromium detection against WordPress 7.1 function names, so no COEP/COOP headers are sent where DIP applies.
- Deferred initialization to
plugins_loadedso plugin activation order no longer matters. - The
csme_enabledsetting default no longer depends on the browser saving the settings. - Scoped the
__coepCoopIsolationflag to block editor screens instead of every admin page. - Added an uninstall handler that removes the plugin option on deletion.
- Added optional HEIC/HEIF upload support with client-side conversion to JPEG.
- HEIC conversion library loaded dynamically from CDN (heic2any / libheif).
- New setting under Settings > Media to enable HEIC support.
- Filterable CDN URL via
csme_heic_library_url.
- Initial release.
- COEP/COOP header support for Firefox and Safari.
- Credentialless iframe handling.
- Embed preview filtering for incompatible providers.