iframes instead of inline videos

[dboundz]

Hi @SimeonC.

First, this is a great module and one I use at http://nimble.hr/.

That said I wanted to make a suggestion on one of your greatest features, which I feel is poorly implemented and creates much more complexity than is necessary: YouTube support.

First: By not using iframes and rendering the videos inline you're imposing something unexpected on the implementor; Angular is required to render the textAngularized result. As far as I can tell, everything about textAngulars output can be used in a non-Angular environment except for the YouTube video integration.

Secondly: Embedding videos with iframes is also the norm across the web. Take a look at Medium, Wordpress, Tumblr, etc. IMO what you're doing with textAngular imposes a UX that's unnatural and awkward, unlike the rest of the module.

As far as accommodations for size, you simple enable some simple UX for height and width with some sensible defaults. That's an easy fix, but something I saw brought up in one of the issue threads.

[bastienJS]

@DBounds See its a feature: http://textangular.com/ point 5 :P

[dboundz]

@bastienJS yes, I'm aware. :) I think it could actually be a serious pain point if not made optional. It certainly is in my case.

[SimeonC]

Point 5 is actually referring to our use of content editable rather than an iFrame to type in.
The use of the youtube image is so that you can resize the youtube video in the editor (you can't click on an iframe to select it!!). The UX you're experiencing is just for the editor, if you're using the html outside of angular you'll need to run it through the taApplyCustomRenderers factory function which converts it out the image tags to the normal youtube iframe for display like we do in the taBind directive here. For example, when posting to your server:

$http.post('some-url', {html: taApplyCustomRenderers($scope.htmlValueFromTextAngular)});

I chose to do it this way so the user can resize anything that they can create an image placeholder for, it also means you can embed iframes and flash without breaking angular's sanitiser functionality. (I'll add this to the FAQ)

Code references: taApplyCustomRenderers, youtube tool

[dboundz]

Thank you @SimeonC.

[dboundz]

@SimeonC I would argue that iFrames are not a security risk any more than any HTML tag is. iFrames have their own security model which makes them secure and usable.

They are "different" than other tags in that they give control of a small portion of the view port to another resource but they also exist in another DOM with strict boundaries.

If the rationale for not using an iFrame is largely based on security concerns I highly suggest you give some additional thought to this. This particular feature is very relevant right now and many implementors will be influenced by services like Medium when making a decision around what to use. This UX is a serious detractor.

Keep in mind I say this with a heavy background in application security which was my career path for 5-6 years.

[SimeonC]

We run the html output of textAngular through a careful fork of AngularJS' ng-sanitize module (textAngular-sanitize). As textAngular is designed to be a WYSIWYG editor and has a range of uses from Admin only use to front end users an iFrame is a security concern as it allows content we cannot control, this answer on SO sums up our thoughts nicely:

As soon as you're displaying content from another domain, you're basically trusting that domain not to serve-up malware.

There's nothing wrong with iframes per se. If you control the content of the iframe, they're perfectly safe.

http://stackoverflow.com/questions/7289139/why-are-iframes-considered-dangerous-and-a-security-risk

That said, the main reason I opted for using the placeholder was not so much the restrictions of the sanitiser but the fact that you can't easily catch click events on an iFrame so you couldn't resize the video as you wanted - the easiest way of doing this was to reuse the image resize code and some placeholders.

I am curious about your comment about "services like Medium" I had a look around and couldn't seem to make any sense of your comment.

[dboundz]

@SimeonC the data about iFrames is true in an uncontrolled environment. You've added a lay of structure by requiring these are YouTube videos/links thus mitigating the security concern.

Yes you still need to trust that YouTube isn't compromised and serving malware, but that's a pretty calculated risk.

Regarding Medium (screen shot: http://cl.ly/image/2b2J3u1n2Y06), they're probably the best, most modern example of what a rich text editor could be. The UX is fantastic in every way shape and form.

My reference to them and other blogging platforms, all of which have and rely on rich text capabilities, is that they all use iframes for YouTube and Vimeo videos both while composing and in rendering.

[dboundz]

By going about videos in the way you are you're adding a lot of overhead, both in the software you have to write, as well as the implementation costs the user has to bear.

When/If you ever add Vimeo or Vine support you'll need to do something entirely different to be able to provide a similar user experience. Taking the iframe path allows for what is essentially the same pattern front to back, for both the user and you as the maintainer.

Taking the iframe route is better for everyone involved as well as this great product you're building.

[SimeonC]

The security concern is that we have to shim the sanitiser to allow iFrames, therefore any iframe can be inserted without being checked.

We only use the placeholder when composing, when you render it using ta-bind it renders as a iFrame.

If you want to create a PR that safely and securely allows iFrames for youtube videos feel free.

[edrpls]

Hi, sorry for bumping this again, but I haven't been able to find anything in the documentation or issues. Is there any way to customize textAngular or sanitise in order to allow any embed? My embeds are added only through an admin, so security is not a big concern.
I'm planning on embeding from soundcloud and vimeo, for example.

Thanks.

[pbassut]

@edrpls https://github.com/fraywing/textAngular/wiki/Setting-Defaults#forcetextangularsanitize

[edrpls]

Thank you so much.

On Sun, Sep 13, 2015, 14:07 Patrick Bassut notifications@github.com wrote:

@edrpls https://github.com/edrpls
https://github.com/fraywing/textAngular/wiki/Setting-Defaults#forcetextangularsanitize

—
Reply to this email directly or view it on GitHub
#469 (comment)
.

eder sánchez | developer

edrpls.com

[JoeyHoutenbos]

@SimeonC I applied the "taApplyCustomRenderers" to the value before saving it. But when I want to edit the value again the iframe-tag is not converted to img-tag which can be handled by textAngular.
Am I doing something wrong or do I need to apply something so textAngular can handle the value with iframe-tags again?

EDIT: Found a solution: #769 (comment)