YouTube videos and other iframes not showing in posts

[joewilson]

I'm using Blogifier 2.5 and the Standard theme, I add a new post with a paragraph, a blank line, a YouTube link, another blank line, and another paragraph, then save and publish.

The text shows, but the YouTube video doesn't. I've tried adding CodePens with <iframes>, too, and the same thing happens - nothing shows up in the post viewer (but it does show with the admin preview toggle).

It looks like the <iframe> is saved in the database and pulled back up in the C# and survives the .MdToHtml() extension's processing. But it looks like the Angular templates scrub the HTML in post.component.html and the line <div [innerHTML]="model.post.content" class="post-content"></div>.

If I knew Angular better, I'd offer a pull request. Does anyone know how to have unsafe HTML display in a blog post? I've tried a few StackOverflow suggestions but couldn't get it working.

[mwroffo]

@joewilson Angular's @angular/platform-browser has an object called DomSanitizer that protects the client from XSS (cross-site scripting) attacks. After initializing a sanitizer, I believe we can filter an iFrame's url through this method to disable the default security precaution: myUrl = sanitizer.bypassSecurityTrustResourceUrl(myUrl) should allow "unsafe" links to be displayed.

[krjii]

Are there any more details that can be provided for getting past this issue? I seem to be having the same issue and can't seem to get DomSanitizer setup properly.

@rxtur do you have any insights to the resolution of this issue?

The current configuration I am using is the out of the box configuration. When I add youtube videos to new post they do not show on published blog posts.

[rxtur]

That was one of the reasons I pulled back to MVC-based themes for a default app - client-side SPAs a bit too strict and require these little work arounds here and there.

Anyways, the Blogifier.SPA standard theme updated with a fix and should work now.

If you using custom theme, here is the link to the fix itself.

[mwroffo]

Hey @krjii , thanks for your email. See whether the update helps; otherwise I'll write up some example code. (In general, however, such workarounds are bad practice.)

[krjii]

Thanks for the support. The update did indeed work for the standard theme.

I am currently trying to translate that to the moments theme and am having a few issues but I'll figure it out eventually.

I'm more of a c++/c embedded system developer so this angular and node js stuff is a little new to me.

On Wed, Apr 29, 2020, 9:29 AM mwroffo notifications@github.com wrote:

Hey @krjii https://github.com/krjii , thanks for your email. See whether the update helps

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/blogifierdotnet/Blogifier/issues/175#issuecomment-621248164, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYADBOOVAANNOFBM4T55PLRPA2UXANCNFSM4J3BIPAA .