Feuerfest

In TinyMCE 6.8.1 (the WYSIWYG editor used by Bludit) iframe sandboxing was introduced. This automatically adds the sandbox="" parameter to all inserted <iframe>-tags. This blocks all embedded videos from playing, even when the CSP-Headers are correct.

As I just wanted to write a short blogpost about a YouTube video which discusses why we Germans are able to eat raw pork ("Mett") and suddenly the video wasn't displayed in the editor-view. Browser console showed no problems with CSP-Headers and so I was left to searching..

YouTube gave me the following <iframe> block for embedding the video:

<iframe width="560" height="315"
 src="https://www.youtube-nocookie.com/embed/azdV7EzP0v4?si=sKj7zfe0OkVNxjsi" title="YouTube video player"
 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 referrerpolicy="strict-origin-when-cross-origin"
 allowfullscreen>
</iframe>

However, after copy&pasting that into the TinyMCE in Bludit and saving the article, it changed to:

<iframe width="560" height="315"
 src="https://www.youtube-nocookie.com/embed/azdV7EzP0v4?si=sKj7zfe0OkVNxjsi" title="YouTube video player"
 frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
 referrerpolicy="strict-origin-when-cross-origin"
 allowfullscreen="allowfullscreen"
 sandbox="">
</iframe>

And the added sandbox-parameter triggers the following error in the browser console:

GET https://www.youtube-nocookie.com/img/meh7.png NS_BINDING_ABORTED
A resource is blocked by OpaqueResponseBlocking, please check browser console for details.

Of to the search engine I went and luckily the TineMCE folks wrote so in their release notes:

Note: sandbox_iframes: is set to false by default, which is the existing behavior. This is because enabling sandbox_iframes may break existing media embeds such as YouTube, Vimeo, and Codepen, as actions such as scripting and same-origin access are prevented.
Source: https://www.tiny.cloud/docs/tinymce/6/6.8.1-release-notes/#new-sandbox_iframes-option-that-controls-whether-iframe-elements-will-be-added-a-sandbox-attribute-to-mitigate-malicious-intent

Which is why I was able to find it so quickly.

The fix

I fixed it, by adding the YouTube domains to the iframe-exclusion tag inside the File bludit-folder/bl-plugins/tinymce/plugins.php.

1. Add the sandbox_iframes: true, line
2. The exclusions are defined for the three most used YouTube-domains: youtube.com, youtube-nocookie.com, youtu.be

        tinymce.init({
                selector: "#jseditor",
                auto_focus: "jseditor",
[...]
                link_default_target: '_blank',
                sandbox_iframes: true,
                sandbox_iframes_exclusions: [
                        'youtube.com',
                        'youtube-nocookie.com',
                        'youtu.be'
                ]
        });

Now your TinyMCE behaves like before and embedding videos works again.

Everything I ever wanted to know about Mett. Honestly I was just bored when I clicked on that video, thought of it to have a bit of over-promising/misleading title.

But that turned out to be wrong. Oliver Kim or Microbehunter explains in detail why we Germans are able to eat Mett. Which is somewhat of a oddity, given that raw pork can be dangerous and is frowned upon in many cultures and countries.

He explains the bacteria involved and also the system Germany has in place to ensure the meat is healthy. And this was really something new for me. I know that Germany is often praised for it's good infrastructure, however never had I considered uninterrupted cold-chains and strict meat controls to be a part of that. Turns out, Oliver is right, to offer raw pork at any butchery or even bread rolls with Mett as ready-to-eat items in bakeries is quite an achievement.

Source: https://www.youtube.com/watch?v=azdV7EzP0v4

Photo by freestocks.org: https://www.pexels.com/photo/person-holding-space-gray-iphone-5-34407/

1. Make sure your Content-Security-Policy header allows it. This should be enough to see the thumbnail and play the video:
   • In your CSP configuration:
     • frame-src youtube-nocookie.com www.youtube-nocookie.com youtube.com www.youtube.com;
     • img-src 'self' data: https://i.ytimg.com;
     • youtube-nocookie.com is the domain if you choose the privacy option when generating shared links
     • i.ytimg.com is needed for the preview thumbnails
   • If you want CSS, etc. you may need to configure additional headers
   • If you omit this step and you DO have a CSP in place, your browser will just show a "This content has been blocked by a policy"-message or similar. Open your browsers developer console to check for CSP related errors.
2. In Bludit, go to: Plugins -> TinyMCE -> Settings
3. Add media to the "Toolbar top" and "Plugins" fields. Now the button for easier embedding of videos will show up.
   • Of course you can also copy&paste the iFrame-code from the Youtube-Share link and use the source code view (<> Button) to insert it manually.
4. Profit!