YouTube <iframe> gone after switching to HTML or WYSIWYG mode

Question

YouTube <iframe> gone after switching to HTML or WYSIWYG mode

AbrahamAriel opened this issue 7 years ago · comments

I have some contents that embeds YouTube videos in it with the YouTube iframe embed code. I thought it'd be a good idea to have woofmark previews it in the WYSIWYG mode but then it never appeared. Switching to HTML mode also shows that it's gone.

Markdown to HTML = iframe gone
Markdown to WYSIWYG = iframe gone
Start in HTML/WYSIWYG = iframe gone

Nicolás Bevacqua · Answer 1 · Fri Sep 08 2017 13:11:30 GMT+0800 (China Standard Time)

I presume this is because the <iframe> is sanitized away. Have you configured the sanitizer in your Markdown parser to support iframes?

Jeffrey Warren · Answer 2 · Sat Sep 16 2017 02:37:50 GMT+0800 (China Standard Time)

I need this myself, and this is possible by configuring sanitizers in megamark, which is often paired with woofmark as a markdown parser: https://github.com/bevacqua/megamark#optionssanitizer

These are then passed to insane (https://github.com/bevacqua/insane), but the format for megamark is:

 megamark('**foo**', {
    allowedTags: ['iframe']
});

I'm testing this out in a moment in PublicLab.Editor, which uses woofmark. I'll update here if it works with a link to a code example.

Jeffrey Warren · Answer 3 · Sat Sep 16 2017 02:45:45 GMT+0800 (China Standard Time)

This worked. I'll share code shortly but now we also need to allow iframe on the HTML parser, which for me is domador. Perhaps it's the allowFrame setting?

https://github.com/bevacqua/domador#allowframe

Jeffrey Warren · Answer 4 · Sat Sep 16 2017 02:52:34 GMT+0800 (China Standard Time)

Hm, I'm not able to get that to work, passing a function to allowFrame that returns true. Trying just the value true now. Also noting that woofmark (on my local, so possibly needs update) uses domador v2.4.2 and allowFrame was added in v2.2.0 so we should be OK.

Jeffrey Warren · Answer 5 · Sat Sep 16 2017 02:53:39 GMT+0800 (China Standard Time)

Still not working. I'll create an issue on domador to find out more.

Jeffrey Warren · Answer 6 · Sat Sep 16 2017 02:59:15 GMT+0800 (China Standard Time)

Posted at bevacqua/domador#10 -- any help appreciated! Thanks :-)

Jeffrey Warren · Answer 7 · Mon Sep 18 2017 01:05:28 GMT+0800 (China Standard Time)

Relaying back; @bevacqua sez:

Thus, the issue is probably in that you're allowing frames on domador but then woofmark isn't configured to support YouTube iframes at the sanitizer level, and then they are stripped out. That would be my guess.

Looking into sanitizing code/config in woofmark now, to check this idea out.

Jeffrey Warren · Answer 8 · Mon Sep 18 2017 01:16:36 GMT+0800 (China Standard Time)

I'm having some success adding to the transform function:

        transform: function (el) {
          if (el.tagName === 'IFRAME') {
            return '\n\n' + el.outerHTML;
          }
        }

This seems to work.

Jeffrey Warren · Answer 9 · Mon Sep 18 2017 01:23:36 GMT+0800 (China Standard Time)

OK, posting solution in publiclab/PublicLab.Editor#107; this is possible via configuration, although it's about ~20 lines of code due to having to rewrite the allowedTags and allowedAttributes defaults.