[FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

I need to add html content in mdl:Card.  Is there a component that I can
simply add to the display list and set htmlText?

I see an InnerHTML bead.  That does not not seem to work when added to the
display list.

Thanks,
Om

Re: [FlexJS] How to add html content?

[Josh Tynjala <jo...@gmail.com>]

I think "Insecure" works better because you can see that it's potentially
dangerous when you use it. "Trusted" could be more easily mistaken for a
good thing that you don't need to worry about.

- Josh

On Wed, Jan 4, 2017 at 11:21 AM, OmPrakash Muppirala <bi...@gmail.com>
wrote:

> Before we lose context, I want add more of my thoughts here.
>
> I think the priority of things should be:
>
> 1.  Functionality
> 2.  Security
> 3.  Performance
>
> Alex probably thinks it should be:
>
> 1.  Functionality
> 2.  Performance
> 3.  Security
>
> As a compromise, in this context I am going to suggest that we go with:
>
> 1.  Security,
> 2.  Performance
> 3.  Functionality
>
> That is, security is still higher than functionality (which is what I
> want).  And the priority of performance has not changed (I think what Alex
> wants)
>
> To explain it in a bit more detail:  My goal is to not allow a developer to
> inadvertently add a bad piece of HTML to the DOM.  That is how security
> exploits occur.  We cannot simply say that it is upon the developer to
> ensure that a HTML snippet is sanitized before they use HTMLText to render
> it on the screen.  We've seen this happen to Flash Player in the past where
> ease of use was prioritized over security.  This behavior changed
> eventually, where security was considered when building each feature.  I
> think we should learn from that to avoid being labeled as 'insecure
> software' .
>
> The options that Alex suggested (doing it in the HTTPService layer, etc.)
> does not cut it.   Because:
>
> a.  It is not appropriate for HTTPService to divine the nature of a piece
> of data.  HTML can be used to display as DOM or shown to user to edit.  We
> could have two UI widgets one, that shows the HTML in an editable text
> area, and one that previews the HTML.  For example, editing an already
> comment in JIRA or a blog post and previewing it before saving.  If we
> blindly let the HTTPService sanitize the data, we are losing data.
> b.  A scary piece of HTML is not a security threat when it lives as a
> string.  There is no need to do anything about it.  It becomes a security
> threat only when it is added to the DOM.  So, sanitizing it just before it
> is added to the DOM is the most appropriate thing to do.  I guess this is
> perfectly adhering to the 'Pay as you go' philosophy.  Don't sanitize the
> HTML just in case, sanitize it just in time.
>
> So, as a compromise, here is what I propose:
>
> By default, HTMLText component expects an IHTMLSanitizer bead.  If such a
> bead is not available, the component will throw a runtime exception and it
> will not render the HTML.
>
> IHTMLSanitizer probably looks like this:
>
> function sanitizeHTML(v:String) :String;
>
> We will have two beads built in:
> 1.  HTMLSanitizer implements IHTMLSanitizer and uses a default algorithm to
> sanitize the given HTML.
> 2.  InsecureNoHTMLSanitizer implements IHTMLSanitizer which simply returns
> the same string back.
>
> We can build two 'express' components like this:
>
> express:HTMLText looks like this:
>
> <basic:HTMLText>
>   <basic:beads>
>     <basic:HTMLSanitizer />
>   </basic:beads>
> <basic:HTMLText>
>
> express:InsecureHTMLText looks like this:
>
> <basic:HTMLText>
>   <basic:beads>
>     <basic:InsecureNoHTMLSanitizer />
>   </basic:beads>
> <basic:HTMLText>
>
> This achieves the following goals:
>
> 1.  If someone wants to use basic:HTMLText and they don't provide a
> IHTMLSanitizer, they wont be able to display any HTML and will encounter
> runtime errors.
> 2.  They can use express:HTMLText which will run all HTML through a
> sanitizer.  They will either be happy or will complain about performance.
> 3.  They can switch to express:InsecureHTMLText and get better
> performance.  But since the name of the component clearly says that using
> it is insecure, we have at least given them an opportunity to understand
> what is going on.
> 4.  Some folks might want their own HTML sanitization logic.  They can
> create their own SpecialHTMLSanitizer which implements IHTMLSanitize and
> add it to basic:HTMLText
>
> Thoughts?
>
> Thanks,
> Om
>
> P.S.  Does the name 'TrustedHTMLText' work better than 'InsecureHTMLText'?
>
> On Tue, Jan 3, 2017 at 8:20 AM, flex capacitor <fl...@gmail.com>
> wrote:
>
> > I have a few thoughts on that. I need a component like this in the past
> for
> > the times I had separate HTML content already created but needed to be
> > integrated into a Flex JS app. I would suggest a contentBefore,
> > contentAfter and contentOverride properties maybe as a bead or a full
> > separate component.
> >
> > Those would be child tag properties that would pass the raw content
> through
> > enclosed in CDATA tags or not and the container or bead would have a
> > sanitize properties that could be set to true or false.
> >
> > The purpose would be to allow HTML embed content. Say you want to drop a
> > Google maps widget or rich text editor into your Flex JS app. You don't
> > want the compiler to parse that code. You would just want app to write
> the
> > raw HTML to the document in the container it is declared in. You would be
> > responsible for the security as the author and how to talk to it.
> >
> > The before and after properties would allow things like HTML comments or
> > other uses. In the past you had php code that wraps HTML markup but now
> it
> > could be used for some of the other frameworks out there to use markup to
> > perform other tasks.
> >
> > How that will work with the Flex JS model new App(); I'm not sure.
> >
> > On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com>
> > wrote:
> >
> > > On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
> > >
> > > >
> > > >
> > > > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
> > > > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com>
> > wrote:
> > > > >
> > > > >Okay, I see your point now.  To be clear, I did not set out to write
> > > HTML
> > > > >code.  The bio in team.json is a html snippet.  So, I am just trying
> > to
> > > > >display it as a piece of formatted data.  Even in other projects, I
> do
> > > > >need
> > > > >this kind of thing quite often.
> > > >
> > > > IMO, this is use case #1: non-interactive HTML content.  We could
> just
> > > > have an HTML component with an "html" property.  But it would want to
> > > wrap
> > > > the content in a <div> or <span>
> > > >
> > >
> > > This is all I wanted.  I implemented this and it seems to work fine.
> > >
> > >
> > > >
> > > > Case #2: In MXML, someone wants to mix FlexJS elements with random
> > HTML.
> > > >
> > > > Case #3: In MXML, someone wants to put in random HTML where one child
> > > HTML
> > > > tag has an id and wants to write code that addresses that id.
> > > >
> > > > The cheap option is to only support #1 by creating an HTML component
> > with
> > > > an "html" property.  Everything else needs more thinking, IMO.
> > > >
> > >
> > > 2 and 3 sound like terrible ways to code :-)
> > >
> > >
> > > >
> > > > >
> > > > >That brings up a related concern.  We need to sanitize such html
> > content
> > > > >during runtime [1]
> > > >
> > > > IMO, those are just utility functions.  Not everybody needs
> > sanitization,
> > > > IMO, so PAYG.
> > > >
> > >
> > > Hmm, to play the devil's advocate, security should not be
> pay-as-you-go.
> > > This should be opt-in by default.  Someone will have to go the extra
> mile
> > > to turn it off.
> > >
> > > This is the sort of thing that will go out in the wild and folks will
> get
> > > affected by it soon enough.  We will then need to push out an emergency
> > > release to fix an XSS attack made possible by FlexJS.
> > >
> > > Either that or we call the default implementation 'InsecureHTMLText' or
> > > something like that.
> > >
> > >
> > > >
> > > > >>
> > > > >>Not really sure why this is required.  I am looking for usage
> > patterns
> > > > >>like
> > > > >>this:
> > > > >>
> > > > >><Panel>
> > > > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
> > > > >>    <Image></Image>
> > > > >></Panel>
> > > > >>
> > > > >><TabNavigator>
> > > > >>    <Tab>
> > > > >>        <Button />
> > > > >>        <HTMLText />
> > > > >>    </Tab>
> > > > >>    <Tab><HTMLText></Tab>
> > > > >></TabNavigator>
> > > > >>
> > > > >>I guess the HTMLText component has to be a UIBase for this to work,
> > > > >>right?
> > > > >>
> > > > >>Maybe I am not understanding the point you are trying to make.
> > > > >
> > > > >The above would likely create an HTML DOM like:
> > > > >
> > > > ><Div className="Panel">
> > > > >  <Span>the HTML from myFancyHTMLText</Span>
> > > > >  <Img />
> > > > ></Div>
> > > > >
> > > > >
> > > > >Carlos asked earlier about getting rid of the Span since we all know
> > it
> > > is
> > > > >legit to have the HTML DOM look like:
> > > > >
> > > > ><Div className="Panel">
> > > > >  The HTML from MyFancyHTMLTExt
> > > > >  <img />
> > > > ></div>
> > > > >
> > > > >
> > > > >I doubt if this HTML can be generated.  Are you sure there will be a
> > > > >linebreak after the text?
> > > >
> > > > No.  I just added that to show the "children".
> > > >
> > > > >
> > > > >That looks a TextNode element.  Which is lightweight than innerHTML
> > But
> > > > >are we sure we don't want formatting for such text?  If we want to
> be
> > > able
> > > > >to format, we need to use a p or a span element.
> > > >
> > > > AIUI, a TextNode is just plain text.  If the above was:
> > > >
> > > > <div className="Panel">
> > > >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
> > > >   <img />
> > > > </div>
> > > >
> > > > There would be a TextNode for "The", a Bold node for "HTML", another
> > > > TextNode for "from" etc.
> > > >
> > >
> > > What I meant was that HTML could be achieved by using the
> > > document.createTextNode() function which creates a TextNode element.
> > i.e.
> > > no need for a wrapping element like P or Span.  Sorry for the
> confusion.
> > >
> > >
> > > >
> > > >
> > > > This doesn't feel right to me.  All of us seem tempted to want to
> > define
> > > a
> > > > scrap of complex HTML separate from other child controls in a
> > container.
> > > > If there was an HTML control, it would still add a wrapping element.
> > If
> > > > you pull of a trick where the HTML control just injects the content,
> > you
> > > > run into more complexity dealing with numElements and childIndex.  It
> > > > would be what the browser says it would be, but not quite as obvious
> > from
> > > > the MXML.
> > > >
> > > > On the other hand we have those thin-wrapping components like Div,
> and
> > A
> > > > and you ought to be a able to put in HTML content without it being
> > > wrapped
> > > > by another layer.
> > > >
> > >
> > > Yes, I am in agreement with you here.  A div or span with innerHTML is
> > more
> > > than adequate for this usecase.
> > >
> > >
> > > >
> > > > >There is a cost in both development time and runtime performance to
> > > > >generalizing this.  Should we do it?
> > > > >
> > > > >
> > > > >Hmm,  I don't think this requires a change to MXML parsing.
> > > >
> > > > I think it does.  The default property is expected to be an array of
> > > > Ichild elements.  When you have random HTML in the default property
> the
> > > > compiler won't accept XML TextNodes in many places and where it does,
> > it
> > > > tries to concatenate TextNodes which is what we don't want.
> > > >
> > >
> > > I see.  I did not realize this point.  In any case, I would advice not
> > > adding a random TextNode element like this.  This also brings more
> > security
> > > issues [1]
> > >
> > > Thanks,
> > > Om
> > >
> > > [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-
> > text-methods/
> > >
> > >
> > >
> > > >
> > > > Other opinions welcome...
> > > > -Alex
> > > >
> > > >
> > >
> >
>

AW: [FlexJS] How to add html content?

[Christofer Dutz <ch...@c-ware.de>]

Well even if I agree that we don't have to be bullet proof, I do think we should keep such concerns in mind when designing our software, because a little time spent here could prevent us having to invest much time in security fixes in the future.

Chris



Von meinem Samsung Galaxy Smartphone gesendet.


-------- Ursprüngliche Nachricht --------
Von: Alex Harui <ah...@adobe.com>
Datum: 04.01.17 23:30 (GMT+01:00)
An: dev@flex.apache.org
Betreff: Re: [FlexJS] How to add html content?

There is a lot of incorrect assumptions in your email.  I'm not going to
take the time to address all of them.  It seems you are very passionate
about security, and it is great that you identified that directly setting
HTML into the DOM presents a security issue, so thank you for bringing
this up.

However, I disagree with the notion that everything we do must be
bullet-proof.  Not everybody wants to or needs to ride around in a
military-grade vehicle.  Go make the changes you want in the Express
component set, but please let others like myself create a low-level direct
access to the DOM for those who have appropriately sanitized their code
some other way.  I will name it UnsecuredHTMLText.

My main priority is happy customers.  Security, Functionality, and
Performance are trade-offs to reaching that goal.  Realize that when you
build the team page, if we sanitize the team data some other way, all of
the security code you write will run and never catch anything.  To me,
that's not a great example of PAYG.

I also don't want to put the burden on this group of volunteers right now
to try to meet an expectation that folks can write apps that are bullet
proof.  If that's your itch, make a component set that tries to do that,
but please leave the rest of it alone.

Now if you or others are interested in leveraging our assets to try to
make a better API for catching/preventing more security issues, we can
have that discussion.  I think there is potential to do more once we stop
thinking of HTML as a String.

My 2 cents.  Other opinions welcome.
-Alex

On 1/4/17, 11:21 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>Before we lose context, I want add more of my thoughts here.
>
>I think the priority of things should be:
>
>1.  Functionality
>2.  Security
>3.  Performance
>
>Alex probably thinks it should be:
>
>1.  Functionality
>2.  Performance
>3.  Security
>
>As a compromise, in this context I am going to suggest that we go with:
>
>1.  Security,
>2.  Performance
>3.  Functionality
>
>That is, security is still higher than functionality (which is what I
>want).  And the priority of performance has not changed (I think what Alex
>wants)
>
>To explain it in a bit more detail:  My goal is to not allow a developer
>to
>inadvertently add a bad piece of HTML to the DOM.  That is how security
>exploits occur.  We cannot simply say that it is upon the developer to
>ensure that a HTML snippet is sanitized before they use HTMLText to render
>it on the screen.  We've seen this happen to Flash Player in the past
>where
>ease of use was prioritized over security.  This behavior changed
>eventually, where security was considered when building each feature.  I
>think we should learn from that to avoid being labeled as 'insecure
>software' .
>
>The options that Alex suggested (doing it in the HTTPService layer, etc.)
>does not cut it.   Because:
>
>a.  It is not appropriate for HTTPService to divine the nature of a piece
>of data.  HTML can be used to display as DOM or shown to user to edit.  We
>could have two UI widgets one, that shows the HTML in an editable text
>area, and one that previews the HTML.  For example, editing an already
>comment in JIRA or a blog post and previewing it before saving.  If we
>blindly let the HTTPService sanitize the data, we are losing data.
>b.  A scary piece of HTML is not a security threat when it lives as a
>string.  There is no need to do anything about it.  It becomes a security
>threat only when it is added to the DOM.  So, sanitizing it just before it
>is added to the DOM is the most appropriate thing to do.  I guess this is
>perfectly adhering to the 'Pay as you go' philosophy.  Don't sanitize the
>HTML just in case, sanitize it just in time.
>
>So, as a compromise, here is what I propose:
>
>By default, HTMLText component expects an IHTMLSanitizer bead.  If such a
>bead is not available, the component will throw a runtime exception and it
>will not render the HTML.
>
>IHTMLSanitizer probably looks like this:
>
>function sanitizeHTML(v:String) :String;
>
>We will have two beads built in:
>1.  HTMLSanitizer implements IHTMLSanitizer and uses a default algorithm
>to
>sanitize the given HTML.
>2.  InsecureNoHTMLSanitizer implements IHTMLSanitizer which simply returns
>the same string back.
>
>We can build two 'express' components like this:
>
>express:HTMLText looks like this:
>
><basic:HTMLText>
>  <basic:beads>
>    <basic:HTMLSanitizer />
>  </basic:beads>
><basic:HTMLText>
>
>express:InsecureHTMLText looks like this:
>
><basic:HTMLText>
>  <basic:beads>
>    <basic:InsecureNoHTMLSanitizer />
>  </basic:beads>
><basic:HTMLText>
>
>This achieves the following goals:
>
>1.  If someone wants to use basic:HTMLText and they don't provide a
>IHTMLSanitizer, they wont be able to display any HTML and will encounter
>runtime errors.
>2.  They can use express:HTMLText which will run all HTML through a
>sanitizer.  They will either be happy or will complain about performance.
>3.  They can switch to express:InsecureHTMLText and get better
>performance.  But since the name of the component clearly says that using
>it is insecure, we have at least given them an opportunity to understand
>what is going on.
>4.  Some folks might want their own HTML sanitization logic.  They can
>create their own SpecialHTMLSanitizer which implements IHTMLSanitize and
>add it to basic:HTMLText
>
>Thoughts?
>
>Thanks,
>Om
>
>P.S.  Does the name 'TrustedHTMLText' work better than 'InsecureHTMLText'?
>
>On Tue, Jan 3, 2017 at 8:20 AM, flex capacitor <fl...@gmail.com>
>wrote:
>
>> I have a few thoughts on that. I need a component like this in the past
>>for
>> the times I had separate HTML content already created but needed to be
>> integrated into a Flex JS app. I would suggest a contentBefore,
>> contentAfter and contentOverride properties maybe as a bead or a full
>> separate component.
>>
>> Those would be child tag properties that would pass the raw content
>>through
>> enclosed in CDATA tags or not and the container or bead would have a
>> sanitize properties that could be set to true or false.
>>
>> The purpose would be to allow HTML embed content. Say you want to drop a
>> Google maps widget or rich text editor into your Flex JS app. You don't
>> want the compiler to parse that code. You would just want app to write
>>the
>> raw HTML to the document in the container it is declared in. You would
>>be
>> responsible for the security as the author and how to talk to it.
>>
>> The before and after properties would allow things like HTML comments or
>> other uses. In the past you had php code that wraps HTML markup but now
>>it
>> could be used for some of the other frameworks out there to use markup
>>to
>> perform other tasks.
>>
>> How that will work with the Flex JS model new App(); I'm not sure.
>>
>> On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com>
>> wrote:
>>
>> > On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
>> >
>> > >
>> > >
>> > > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
>> > > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com>
>> wrote:
>> > > >
>> > > >Okay, I see your point now.  To be clear, I did not set out to
>>write
>> > HTML
>> > > >code.  The bio in team.json is a html snippet.  So, I am just
>>trying
>> to
>> > > >display it as a piece of formatted data.  Even in other projects,
>>I do
>> > > >need
>> > > >this kind of thing quite often.
>> > >
>> > > IMO, this is use case #1: non-interactive HTML content.  We could
>>just
>> > > have an HTML component with an "html" property.  But it would want
>>to
>> > wrap
>> > > the content in a <div> or <span>
>> > >
>> >
>> > This is all I wanted.  I implemented this and it seems to work fine.
>> >
>> >
>> > >
>> > > Case #2: In MXML, someone wants to mix FlexJS elements with random
>> HTML.
>> > >
>> > > Case #3: In MXML, someone wants to put in random HTML where one
>>child
>> > HTML
>> > > tag has an id and wants to write code that addresses that id.
>> > >
>> > > The cheap option is to only support #1 by creating an HTML component
>> with
>> > > an "html" property.  Everything else needs more thinking, IMO.
>> > >
>> >
>> > 2 and 3 sound like terrible ways to code :-)
>> >
>> >
>> > >
>> > > >
>> > > >That brings up a related concern.  We need to sanitize such html
>> content
>> > > >during runtime [1]
>> > >
>> > > IMO, those are just utility functions.  Not everybody needs
>> sanitization,
>> > > IMO, so PAYG.
>> > >
>> >
>> > Hmm, to play the devil's advocate, security should not be
>>pay-as-you-go.
>> > This should be opt-in by default.  Someone will have to go the extra
>>mile
>> > to turn it off.
>> >
>> > This is the sort of thing that will go out in the wild and folks will
>>get
>> > affected by it soon enough.  We will then need to push out an
>>emergency
>> > release to fix an XSS attack made possible by FlexJS.
>> >
>> > Either that or we call the default implementation 'InsecureHTMLText'
>>or
>> > something like that.
>> >
>> >
>> > >
>> > > >>
>> > > >>Not really sure why this is required.  I am looking for usage
>> patterns
>> > > >>like
>> > > >>this:
>> > > >>
>> > > >><Panel>
>> > > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
>> > > >>    <Image></Image>
>> > > >></Panel>
>> > > >>
>> > > >><TabNavigator>
>> > > >>    <Tab>
>> > > >>        <Button />
>> > > >>        <HTMLText />
>> > > >>    </Tab>
>> > > >>    <Tab><HTMLText></Tab>
>> > > >></TabNavigator>
>> > > >>
>> > > >>I guess the HTMLText component has to be a UIBase for this to
>>work,
>> > > >>right?
>> > > >>
>> > > >>Maybe I am not understanding the point you are trying to make.
>> > > >
>> > > >The above would likely create an HTML DOM like:
>> > > >
>> > > ><Div className="Panel">
>> > > >  <Span>the HTML from myFancyHTMLText</Span>
>> > > >  <Img />
>> > > ></Div>
>> > > >
>> > > >
>> > > >Carlos asked earlier about getting rid of the Span since we all
>>know
>> it
>> > is
>> > > >legit to have the HTML DOM look like:
>> > > >
>> > > ><Div className="Panel">
>> > > >  The HTML from MyFancyHTMLTExt
>> > > >  <img />
>> > > ></div>
>> > > >
>> > > >
>> > > >I doubt if this HTML can be generated.  Are you sure there will be
>>a
>> > > >linebreak after the text?
>> > >
>> > > No.  I just added that to show the "children".
>> > >
>> > > >
>> > > >That looks a TextNode element.  Which is lightweight than innerHTML
>> But
>> > > >are we sure we don't want formatting for such text?  If we want to
>>be
>> > able
>> > > >to format, we need to use a p or a span element.
>> > >
>> > > AIUI, a TextNode is just plain text.  If the above was:
>> > >
>> > > <div className="Panel">
>> > >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
>> > >   <img />
>> > > </div>
>> > >
>> > > There would be a TextNode for "The", a Bold node for "HTML", another
>> > > TextNode for "from" etc.
>> > >
>> >
>> > What I meant was that HTML could be achieved by using the
>> > document.createTextNode() function which creates a TextNode element.
>> i.e.
>> > no need for a wrapping element like P or Span.  Sorry for the
>>confusion.
>> >
>> >
>> > >
>> > >
>> > > This doesn't feel right to me.  All of us seem tempted to want to
>> define
>> > a
>> > > scrap of complex HTML separate from other child controls in a
>> container.
>> > > If there was an HTML control, it would still add a wrapping element.
>> If
>> > > you pull of a trick where the HTML control just injects the content,
>> you
>> > > run into more complexity dealing with numElements and childIndex.
>>It
>> > > would be what the browser says it would be, but not quite as obvious
>> from
>> > > the MXML.
>> > >
>> > > On the other hand we have those thin-wrapping components like Div,
>>and
>> A
>> > > and you ought to be a able to put in HTML content without it being
>> > wrapped
>> > > by another layer.
>> > >
>> >
>> > Yes, I am in agreement with you here.  A div or span with innerHTML is
>> more
>> > than adequate for this usecase.
>> >
>> >
>> > >
>> > > >There is a cost in both development time and runtime performance to
>> > > >generalizing this.  Should we do it?
>> > > >
>> > > >
>> > > >Hmm,  I don't think this requires a change to MXML parsing.
>> > >
>> > > I think it does.  The default property is expected to be an array of
>> > > Ichild elements.  When you have random HTML in the default property
>>the
>> > > compiler won't accept XML TextNodes in many places and where it
>>does,
>> it
>> > > tries to concatenate TextNodes which is what we don't want.
>> > >
>> >
>> > I see.  I did not realize this point.  In any case, I would advice not
>> > adding a random TextNode element like this.  This also brings more
>> security
>> > issues [1]
>> >
>> > Thanks,
>> > Om
>> >
>> > [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-
>> text-methods/
>> >
>> >
>> >
>> > >
>> > > Other opinions welcome...
>> > > -Alex
>> > >
>> > >
>> >
>>

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

Created ticket here: https://issues.apache.org/jira/browse/FLEX-35246 to
track this.

Thanks,
Om

On Wed, Jan 4, 2017 at 6:31 PM, OmPrakash Muppirala <bi...@gmail.com>
wrote:

>
>
> On Wed, Jan 4, 2017 at 6:08 PM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 1/4/17, 3:40 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>>
>> >>
>> >> However, I disagree with the notion that everything we do must be
>> >> bullet-proof.
>> >
>> >
>> >I never presented that notion.  It seems to me that you are using the
>> >slippery-slope argument.  I am suggesting a very basic protection from a
>> >very common type of security risk.  I gave you several examples where
>> >other
>> >frameworks provide same or similar protection in their UI components.
>>
>> Well, you wrote "My goal is to not allow a developer to inadvertently add
>> a bad piece of HTML to the DOM (IAaBPoHTML2DOM)."  That sounds like a big
>> goal to me.
>
>
> Ah I see.  But if you think about it, that is not such a big goal given
> that FlexJS nearly makes it impossible to write HTML content directly.
> Which is why I started this thread.
>
>
>>   Plus you proposed changes to both Express and Basic
>> libraries.  If your goal is just to make sure folks don't use Express
>> HTMLText with bad HTML, that makes sense to me.
>>
>> >
>> >
>> >>   Not everybody wants to or needs to ride around in a
>> >> military-grade vehicle.  Go make the changes you want in the Express
>> >> component set, but please let others like myself create a low-level
>> >>direct
>> >> access to the DOM for those who have appropriately sanitized their code
>> >> some other way.  I will name it UnsecuredHTMLText.
>> >>
>> >
>> >What in my proposal will prevent you from making your own component with
>> >low-level direct access to the DOM?
>>
>> Because I am proposing a way for a developer to IAaBPoHTML2DOM.
>>
>> >>   Realize that when you
>> >> build the team page, if we sanitize the team data some other way, all
>> of
>> >> the security code you write will run and never catch anything.  To me,
>> >> that's not a great example of PAYG.
>> >>
>> >
>> >We are not writing the component set for one use case.  I have previously
>> >provided examples where the user has no control over where the HTML comes
>> >from.  I thinking running a sanitizer on a HTML string is a very good
>> >tradeoff.  I guess this is where we disagree.
>>
>> No, we don't disagree on what you wrote above, but IMO, your proposal is
>> not the only possible solution, and in many cases, it will not perform as
>> well as other solutions.  I am in favor of allowing other solutions, even
>> though improper use of them will allow someone to IAaBPoHTML2DOM.  Do you
>> agree there is more than one way to secure an application?  If so, then
>> let's allow those different ways.
>>
>> >
>> >Even if that is not acceptable, if the user uses the
>> >InsecureNoHTMLSanitizer, it is a simple function call which returns the
>> >same string back, essentially a no-op.  There is no time spent on
>> >analyzing
>> >the HTML string.
>> >
>> >Is this also a not acceptable as a tradeoff?  What is your definition of
>> a
>> >trade-off?
>>
>> You write HTMLText the way you want to.  I think your proposal for it is
>> exactly what I would do.  I will write UnsecuredHTMLText.
>> UnsecuredHTMLText will be smaller and faster.  Will it matter to someone?
>> Don't know, but the whole point of Basic is to be, well, basic.
>>
>
> Okay, sounds good to me.  It wasn't clear you meant this in your previous
> email.  If you are going to call your component 'UnsecuredHTMLText', any
> usage of it is not going to be inadvertent.  I think my goal still holds
> good.
>
> I think we are good here.  I will start coding this soon.
>
> Thank you for your patience in working this out :-)
>
> Regards,
> Om
>

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Wed, Jan 4, 2017 at 6:08 PM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 1/4/17, 3:40 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
> >>
> >> However, I disagree with the notion that everything we do must be
> >> bullet-proof.
> >
> >
> >I never presented that notion.  It seems to me that you are using the
> >slippery-slope argument.  I am suggesting a very basic protection from a
> >very common type of security risk.  I gave you several examples where
> >other
> >frameworks provide same or similar protection in their UI components.
>
> Well, you wrote "My goal is to not allow a developer to inadvertently add
> a bad piece of HTML to the DOM (IAaBPoHTML2DOM)."  That sounds like a big
> goal to me.


Ah I see.  But if you think about it, that is not such a big goal given
that FlexJS nearly makes it impossible to write HTML content directly.
Which is why I started this thread.


>   Plus you proposed changes to both Express and Basic
> libraries.  If your goal is just to make sure folks don't use Express
> HTMLText with bad HTML, that makes sense to me.
>
> >
> >
> >>   Not everybody wants to or needs to ride around in a
> >> military-grade vehicle.  Go make the changes you want in the Express
> >> component set, but please let others like myself create a low-level
> >>direct
> >> access to the DOM for those who have appropriately sanitized their code
> >> some other way.  I will name it UnsecuredHTMLText.
> >>
> >
> >What in my proposal will prevent you from making your own component with
> >low-level direct access to the DOM?
>
> Because I am proposing a way for a developer to IAaBPoHTML2DOM.
>
> >>   Realize that when you
> >> build the team page, if we sanitize the team data some other way, all of
> >> the security code you write will run and never catch anything.  To me,
> >> that's not a great example of PAYG.
> >>
> >
> >We are not writing the component set for one use case.  I have previously
> >provided examples where the user has no control over where the HTML comes
> >from.  I thinking running a sanitizer on a HTML string is a very good
> >tradeoff.  I guess this is where we disagree.
>
> No, we don't disagree on what you wrote above, but IMO, your proposal is
> not the only possible solution, and in many cases, it will not perform as
> well as other solutions.  I am in favor of allowing other solutions, even
> though improper use of them will allow someone to IAaBPoHTML2DOM.  Do you
> agree there is more than one way to secure an application?  If so, then
> let's allow those different ways.
>
> >
> >Even if that is not acceptable, if the user uses the
> >InsecureNoHTMLSanitizer, it is a simple function call which returns the
> >same string back, essentially a no-op.  There is no time spent on
> >analyzing
> >the HTML string.
> >
> >Is this also a not acceptable as a tradeoff?  What is your definition of a
> >trade-off?
>
> You write HTMLText the way you want to.  I think your proposal for it is
> exactly what I would do.  I will write UnsecuredHTMLText.
> UnsecuredHTMLText will be smaller and faster.  Will it matter to someone?
> Don't know, but the whole point of Basic is to be, well, basic.
>

Okay, sounds good to me.  It wasn't clear you meant this in your previous
email.  If you are going to call your component 'UnsecuredHTMLText', any
usage of it is not going to be inadvertent.  I think my goal still holds
good.

I think we are good here.  I will start coding this soon.

Thank you for your patience in working this out :-)

Regards,
Om

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/4/17, 3:40 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>>
>> However, I disagree with the notion that everything we do must be
>> bullet-proof.
>
>
>I never presented that notion.  It seems to me that you are using the
>slippery-slope argument.  I am suggesting a very basic protection from a
>very common type of security risk.  I gave you several examples where
>other
>frameworks provide same or similar protection in their UI components.

Well, you wrote "My goal is to not allow a developer to inadvertently add
a bad piece of HTML to the DOM (IAaBPoHTML2DOM)."  That sounds like a big
goal to me.  Plus you proposed changes to both Express and Basic
libraries.  If your goal is just to make sure folks don't use Express
HTMLText with bad HTML, that makes sense to me.

>
>
>>   Not everybody wants to or needs to ride around in a
>> military-grade vehicle.  Go make the changes you want in the Express
>> component set, but please let others like myself create a low-level
>>direct
>> access to the DOM for those who have appropriately sanitized their code
>> some other way.  I will name it UnsecuredHTMLText.
>>
>
>What in my proposal will prevent you from making your own component with
>low-level direct access to the DOM?

Because I am proposing a way for a developer to IAaBPoHTML2DOM.

>>   Realize that when you
>> build the team page, if we sanitize the team data some other way, all of
>> the security code you write will run and never catch anything.  To me,
>> that's not a great example of PAYG.
>>
>
>We are not writing the component set for one use case.  I have previously
>provided examples where the user has no control over where the HTML comes
>from.  I thinking running a sanitizer on a HTML string is a very good
>tradeoff.  I guess this is where we disagree.

No, we don't disagree on what you wrote above, but IMO, your proposal is
not the only possible solution, and in many cases, it will not perform as
well as other solutions.  I am in favor of allowing other solutions, even
though improper use of them will allow someone to IAaBPoHTML2DOM.  Do you
agree there is more than one way to secure an application?  If so, then
let's allow those different ways.

>
>Even if that is not acceptable, if the user uses the
>InsecureNoHTMLSanitizer, it is a simple function call which returns the
>same string back, essentially a no-op.  There is no time spent on
>analyzing
>the HTML string.
>
>Is this also a not acceptable as a tradeoff?  What is your definition of a
>trade-off?

You write HTMLText the way you want to.  I think your proposal for it is
exactly what I would do.  I will write UnsecuredHTMLText.
UnsecuredHTMLText will be smaller and faster.  Will it matter to someone?
Don't know, but the whole point of Basic is to be, well, basic.

My 2 cents,
-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Wed, Jan 4, 2017 at 2:29 PM, Alex Harui <ah...@adobe.com> wrote:

> There is a lot of incorrect assumptions in your email.  I'm not going to
> take the time to address all of them.  It seems you are very passionate
> about security, and it is great that you identified that directly setting
> HTML into the DOM presents a security issue, so thank you for bringing
> this up.
>

I apologize if I made incorrect assumptions.  I know you are very busy and
try not to waste your time by having to write unnecessary responses.
Please feel free to point out the errors at a later point.


>
> However, I disagree with the notion that everything we do must be
> bullet-proof.


I never presented that notion.  It seems to me that you are using the
slippery-slope argument.  I am suggesting a very basic protection from a
very common type of security risk.  I gave you several examples where other
frameworks provide same or similar protection in their UI components.


>   Not everybody wants to or needs to ride around in a
> military-grade vehicle.  Go make the changes you want in the Express
> component set, but please let others like myself create a low-level direct
> access to the DOM for those who have appropriately sanitized their code
> some other way.  I will name it UnsecuredHTMLText.
>

What in my proposal will prevent you from making your own component with
low-level direct access to the DOM?


>
> My main priority is happy customers.  Security, Functionality, and
> Performance are trade-offs to reaching that goal.


I am willing to do a tradeoff.  Hence the compromise proposal.  Building
apps that don't cause obvious security issues results in happy customers as
well.


>   Realize that when you
> build the team page, if we sanitize the team data some other way, all of
> the security code you write will run and never catch anything.  To me,
> that's not a great example of PAYG.
>

We are not writing the component set for one use case.  I have previously
provided examples where the user has no control over where the HTML comes
from.  I thinking running a sanitizer on a HTML string is a very good
tradeoff.  I guess this is where we disagree.

Even if that is not acceptable, if the user uses the
InsecureNoHTMLSanitizer, it is a simple function call which returns the
same string back, essentially a no-op.  There is no time spent on analyzing
the HTML string.

Is this also a not acceptable as a tradeoff?  What is your definition of a
trade-off?



>
> I also don't want to put the burden on this group of volunteers right now
> to try to meet an expectation that folks can write apps that are bullet
> proof.


This will not make our framework bullet-proof.  I am sorry if I said
something that seemed to suggest that.


>   If that's your itch, make a component set that tries to do that,
> but please leave the rest of it alone.
>

Isn't my proposal doing that?  i.e. leave the rest of it alone?  What am I
proposing that will prevent anyone else to build some other component that
does what they want?


>
> Now if you or others are interested in leveraging our assets to try to
> make a better API for catching/preventing more security issues, we can
> have that discussion.  I think there is potential to do more once we stop
> thinking of HTML as a String.
>
> My 2 cents.  Other opinions welcome.
> -Alex
>

Thanks,
Om




>
> On 1/4/17, 11:21 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
> >Before we lose context, I want add more of my thoughts here.
> >
> >I think the priority of things should be:
> >
> >1.  Functionality
> >2.  Security
> >3.  Performance
> >
> >Alex probably thinks it should be:
> >
> >1.  Functionality
> >2.  Performance
> >3.  Security
> >
> >As a compromise, in this context I am going to suggest that we go with:
> >
> >1.  Security,
> >2.  Performance
> >3.  Functionality
> >
> >That is, security is still higher than functionality (which is what I
> >want).  And the priority of performance has not changed (I think what Alex
> >wants)
> >
> >To explain it in a bit more detail:  My goal is to not allow a developer
> >to
> >inadvertently add a bad piece of HTML to the DOM.  That is how security
> >exploits occur.  We cannot simply say that it is upon the developer to
> >ensure that a HTML snippet is sanitized before they use HTMLText to render
> >it on the screen.  We've seen this happen to Flash Player in the past
> >where
> >ease of use was prioritized over security.  This behavior changed
> >eventually, where security was considered when building each feature.  I
> >think we should learn from that to avoid being labeled as 'insecure
> >software' .
> >
> >The options that Alex suggested (doing it in the HTTPService layer, etc.)
> >does not cut it.   Because:
> >
> >a.  It is not appropriate for HTTPService to divine the nature of a piece
> >of data.  HTML can be used to display as DOM or shown to user to edit.  We
> >could have two UI widgets one, that shows the HTML in an editable text
> >area, and one that previews the HTML.  For example, editing an already
> >comment in JIRA or a blog post and previewing it before saving.  If we
> >blindly let the HTTPService sanitize the data, we are losing data.
> >b.  A scary piece of HTML is not a security threat when it lives as a
> >string.  There is no need to do anything about it.  It becomes a security
> >threat only when it is added to the DOM.  So, sanitizing it just before it
> >is added to the DOM is the most appropriate thing to do.  I guess this is
> >perfectly adhering to the 'Pay as you go' philosophy.  Don't sanitize the
> >HTML just in case, sanitize it just in time.
> >
> >So, as a compromise, here is what I propose:
> >
> >By default, HTMLText component expects an IHTMLSanitizer bead.  If such a
> >bead is not available, the component will throw a runtime exception and it
> >will not render the HTML.
> >
> >IHTMLSanitizer probably looks like this:
> >
> >function sanitizeHTML(v:String) :String;
> >
> >We will have two beads built in:
> >1.  HTMLSanitizer implements IHTMLSanitizer and uses a default algorithm
> >to
> >sanitize the given HTML.
> >2.  InsecureNoHTMLSanitizer implements IHTMLSanitizer which simply returns
> >the same string back.
> >
> >We can build two 'express' components like this:
> >
> >express:HTMLText looks like this:
> >
> ><basic:HTMLText>
> >  <basic:beads>
> >    <basic:HTMLSanitizer />
> >  </basic:beads>
> ><basic:HTMLText>
> >
> >express:InsecureHTMLText looks like this:
> >
> ><basic:HTMLText>
> >  <basic:beads>
> >    <basic:InsecureNoHTMLSanitizer />
> >  </basic:beads>
> ><basic:HTMLText>
> >
> >This achieves the following goals:
> >
> >1.  If someone wants to use basic:HTMLText and they don't provide a
> >IHTMLSanitizer, they wont be able to display any HTML and will encounter
> >runtime errors.
> >2.  They can use express:HTMLText which will run all HTML through a
> >sanitizer.  They will either be happy or will complain about performance.
> >3.  They can switch to express:InsecureHTMLText and get better
> >performance.  But since the name of the component clearly says that using
> >it is insecure, we have at least given them an opportunity to understand
> >what is going on.
> >4.  Some folks might want their own HTML sanitization logic.  They can
> >create their own SpecialHTMLSanitizer which implements IHTMLSanitize and
> >add it to basic:HTMLText
> >
> >Thoughts?
> >
> >Thanks,
> >Om
> >
> >P.S.  Does the name 'TrustedHTMLText' work better than 'InsecureHTMLText'?
> >
> >On Tue, Jan 3, 2017 at 8:20 AM, flex capacitor <fl...@gmail.com>
> >wrote:
> >
> >> I have a few thoughts on that. I need a component like this in the past
> >>for
> >> the times I had separate HTML content already created but needed to be
> >> integrated into a Flex JS app. I would suggest a contentBefore,
> >> contentAfter and contentOverride properties maybe as a bead or a full
> >> separate component.
> >>
> >> Those would be child tag properties that would pass the raw content
> >>through
> >> enclosed in CDATA tags or not and the container or bead would have a
> >> sanitize properties that could be set to true or false.
> >>
> >> The purpose would be to allow HTML embed content. Say you want to drop a
> >> Google maps widget or rich text editor into your Flex JS app. You don't
> >> want the compiler to parse that code. You would just want app to write
> >>the
> >> raw HTML to the document in the container it is declared in. You would
> >>be
> >> responsible for the security as the author and how to talk to it.
> >>
> >> The before and after properties would allow things like HTML comments or
> >> other uses. In the past you had php code that wraps HTML markup but now
> >>it
> >> could be used for some of the other frameworks out there to use markup
> >>to
> >> perform other tasks.
> >>
> >> How that will work with the Flex JS model new App(); I'm not sure.
> >>
> >> On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com>
> >> wrote:
> >>
> >> > On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
> >> >
> >> > >
> >> > >
> >> > > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
> >> > > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com>
> >> wrote:
> >> > > >
> >> > > >Okay, I see your point now.  To be clear, I did not set out to
> >>write
> >> > HTML
> >> > > >code.  The bio in team.json is a html snippet.  So, I am just
> >>trying
> >> to
> >> > > >display it as a piece of formatted data.  Even in other projects,
> >>I do
> >> > > >need
> >> > > >this kind of thing quite often.
> >> > >
> >> > > IMO, this is use case #1: non-interactive HTML content.  We could
> >>just
> >> > > have an HTML component with an "html" property.  But it would want
> >>to
> >> > wrap
> >> > > the content in a <div> or <span>
> >> > >
> >> >
> >> > This is all I wanted.  I implemented this and it seems to work fine.
> >> >
> >> >
> >> > >
> >> > > Case #2: In MXML, someone wants to mix FlexJS elements with random
> >> HTML.
> >> > >
> >> > > Case #3: In MXML, someone wants to put in random HTML where one
> >>child
> >> > HTML
> >> > > tag has an id and wants to write code that addresses that id.
> >> > >
> >> > > The cheap option is to only support #1 by creating an HTML component
> >> with
> >> > > an "html" property.  Everything else needs more thinking, IMO.
> >> > >
> >> >
> >> > 2 and 3 sound like terrible ways to code :-)
> >> >
> >> >
> >> > >
> >> > > >
> >> > > >That brings up a related concern.  We need to sanitize such html
> >> content
> >> > > >during runtime [1]
> >> > >
> >> > > IMO, those are just utility functions.  Not everybody needs
> >> sanitization,
> >> > > IMO, so PAYG.
> >> > >
> >> >
> >> > Hmm, to play the devil's advocate, security should not be
> >>pay-as-you-go.
> >> > This should be opt-in by default.  Someone will have to go the extra
> >>mile
> >> > to turn it off.
> >> >
> >> > This is the sort of thing that will go out in the wild and folks will
> >>get
> >> > affected by it soon enough.  We will then need to push out an
> >>emergency
> >> > release to fix an XSS attack made possible by FlexJS.
> >> >
> >> > Either that or we call the default implementation 'InsecureHTMLText'
> >>or
> >> > something like that.
> >> >
> >> >
> >> > >
> >> > > >>
> >> > > >>Not really sure why this is required.  I am looking for usage
> >> patterns
> >> > > >>like
> >> > > >>this:
> >> > > >>
> >> > > >><Panel>
> >> > > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
> >> > > >>    <Image></Image>
> >> > > >></Panel>
> >> > > >>
> >> > > >><TabNavigator>
> >> > > >>    <Tab>
> >> > > >>        <Button />
> >> > > >>        <HTMLText />
> >> > > >>    </Tab>
> >> > > >>    <Tab><HTMLText></Tab>
> >> > > >></TabNavigator>
> >> > > >>
> >> > > >>I guess the HTMLText component has to be a UIBase for this to
> >>work,
> >> > > >>right?
> >> > > >>
> >> > > >>Maybe I am not understanding the point you are trying to make.
> >> > > >
> >> > > >The above would likely create an HTML DOM like:
> >> > > >
> >> > > ><Div className="Panel">
> >> > > >  <Span>the HTML from myFancyHTMLText</Span>
> >> > > >  <Img />
> >> > > ></Div>
> >> > > >
> >> > > >
> >> > > >Carlos asked earlier about getting rid of the Span since we all
> >>know
> >> it
> >> > is
> >> > > >legit to have the HTML DOM look like:
> >> > > >
> >> > > ><Div className="Panel">
> >> > > >  The HTML from MyFancyHTMLTExt
> >> > > >  <img />
> >> > > ></div>
> >> > > >
> >> > > >
> >> > > >I doubt if this HTML can be generated.  Are you sure there will be
> >>a
> >> > > >linebreak after the text?
> >> > >
> >> > > No.  I just added that to show the "children".
> >> > >
> >> > > >
> >> > > >That looks a TextNode element.  Which is lightweight than innerHTML
> >> But
> >> > > >are we sure we don't want formatting for such text?  If we want to
> >>be
> >> > able
> >> > > >to format, we need to use a p or a span element.
> >> > >
> >> > > AIUI, a TextNode is just plain text.  If the above was:
> >> > >
> >> > > <div className="Panel">
> >> > >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
> >> > >   <img />
> >> > > </div>
> >> > >
> >> > > There would be a TextNode for "The", a Bold node for "HTML", another
> >> > > TextNode for "from" etc.
> >> > >
> >> >
> >> > What I meant was that HTML could be achieved by using the
> >> > document.createTextNode() function which creates a TextNode element.
> >> i.e.
> >> > no need for a wrapping element like P or Span.  Sorry for the
> >>confusion.
> >> >
> >> >
> >> > >
> >> > >
> >> > > This doesn't feel right to me.  All of us seem tempted to want to
> >> define
> >> > a
> >> > > scrap of complex HTML separate from other child controls in a
> >> container.
> >> > > If there was an HTML control, it would still add a wrapping element.
> >> If
> >> > > you pull of a trick where the HTML control just injects the content,
> >> you
> >> > > run into more complexity dealing with numElements and childIndex.
> >>It
> >> > > would be what the browser says it would be, but not quite as obvious
> >> from
> >> > > the MXML.
> >> > >
> >> > > On the other hand we have those thin-wrapping components like Div,
> >>and
> >> A
> >> > > and you ought to be a able to put in HTML content without it being
> >> > wrapped
> >> > > by another layer.
> >> > >
> >> >
> >> > Yes, I am in agreement with you here.  A div or span with innerHTML is
> >> more
> >> > than adequate for this usecase.
> >> >
> >> >
> >> > >
> >> > > >There is a cost in both development time and runtime performance to
> >> > > >generalizing this.  Should we do it?
> >> > > >
> >> > > >
> >> > > >Hmm,  I don't think this requires a change to MXML parsing.
> >> > >
> >> > > I think it does.  The default property is expected to be an array of
> >> > > Ichild elements.  When you have random HTML in the default property
> >>the
> >> > > compiler won't accept XML TextNodes in many places and where it
> >>does,
> >> it
> >> > > tries to concatenate TextNodes which is what we don't want.
> >> > >
> >> >
> >> > I see.  I did not realize this point.  In any case, I would advice not
> >> > adding a random TextNode element like this.  This also brings more
> >> security
> >> > issues [1]
> >> >
> >> > Thanks,
> >> > Om
> >> >
> >> > [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-
> >> text-methods/
> >> >
> >> >
> >> >
> >> > >
> >> > > Other opinions welcome...
> >> > > -Alex
> >> > >
> >> > >
> >> >
> >>
>
>

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

There is a lot of incorrect assumptions in your email.  I'm not going to
take the time to address all of them.  It seems you are very passionate
about security, and it is great that you identified that directly setting
HTML into the DOM presents a security issue, so thank you for bringing
this up.

However, I disagree with the notion that everything we do must be
bullet-proof.  Not everybody wants to or needs to ride around in a
military-grade vehicle.  Go make the changes you want in the Express
component set, but please let others like myself create a low-level direct
access to the DOM for those who have appropriately sanitized their code
some other way.  I will name it UnsecuredHTMLText.

My main priority is happy customers.  Security, Functionality, and
Performance are trade-offs to reaching that goal.  Realize that when you
build the team page, if we sanitize the team data some other way, all of
the security code you write will run and never catch anything.  To me,
that's not a great example of PAYG.

I also don't want to put the burden on this group of volunteers right now
to try to meet an expectation that folks can write apps that are bullet
proof.  If that's your itch, make a component set that tries to do that,
but please leave the rest of it alone.

Now if you or others are interested in leveraging our assets to try to
make a better API for catching/preventing more security issues, we can
have that discussion.  I think there is potential to do more once we stop
thinking of HTML as a String.

My 2 cents.  Other opinions welcome.
-Alex

On 1/4/17, 11:21 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>Before we lose context, I want add more of my thoughts here.
>
>I think the priority of things should be:
>
>1.  Functionality
>2.  Security
>3.  Performance
>
>Alex probably thinks it should be:
>
>1.  Functionality
>2.  Performance
>3.  Security
>
>As a compromise, in this context I am going to suggest that we go with:
>
>1.  Security,
>2.  Performance
>3.  Functionality
>
>That is, security is still higher than functionality (which is what I
>want).  And the priority of performance has not changed (I think what Alex
>wants)
>
>To explain it in a bit more detail:  My goal is to not allow a developer
>to
>inadvertently add a bad piece of HTML to the DOM.  That is how security
>exploits occur.  We cannot simply say that it is upon the developer to
>ensure that a HTML snippet is sanitized before they use HTMLText to render
>it on the screen.  We've seen this happen to Flash Player in the past
>where
>ease of use was prioritized over security.  This behavior changed
>eventually, where security was considered when building each feature.  I
>think we should learn from that to avoid being labeled as 'insecure
>software' .
>
>The options that Alex suggested (doing it in the HTTPService layer, etc.)
>does not cut it.   Because:
>
>a.  It is not appropriate for HTTPService to divine the nature of a piece
>of data.  HTML can be used to display as DOM or shown to user to edit.  We
>could have two UI widgets one, that shows the HTML in an editable text
>area, and one that previews the HTML.  For example, editing an already
>comment in JIRA or a blog post and previewing it before saving.  If we
>blindly let the HTTPService sanitize the data, we are losing data.
>b.  A scary piece of HTML is not a security threat when it lives as a
>string.  There is no need to do anything about it.  It becomes a security
>threat only when it is added to the DOM.  So, sanitizing it just before it
>is added to the DOM is the most appropriate thing to do.  I guess this is
>perfectly adhering to the 'Pay as you go' philosophy.  Don't sanitize the
>HTML just in case, sanitize it just in time.
>
>So, as a compromise, here is what I propose:
>
>By default, HTMLText component expects an IHTMLSanitizer bead.  If such a
>bead is not available, the component will throw a runtime exception and it
>will not render the HTML.
>
>IHTMLSanitizer probably looks like this:
>
>function sanitizeHTML(v:String) :String;
>
>We will have two beads built in:
>1.  HTMLSanitizer implements IHTMLSanitizer and uses a default algorithm
>to
>sanitize the given HTML.
>2.  InsecureNoHTMLSanitizer implements IHTMLSanitizer which simply returns
>the same string back.
>
>We can build two 'express' components like this:
>
>express:HTMLText looks like this:
>
><basic:HTMLText>
>  <basic:beads>
>    <basic:HTMLSanitizer />
>  </basic:beads>
><basic:HTMLText>
>
>express:InsecureHTMLText looks like this:
>
><basic:HTMLText>
>  <basic:beads>
>    <basic:InsecureNoHTMLSanitizer />
>  </basic:beads>
><basic:HTMLText>
>
>This achieves the following goals:
>
>1.  If someone wants to use basic:HTMLText and they don't provide a
>IHTMLSanitizer, they wont be able to display any HTML and will encounter
>runtime errors.
>2.  They can use express:HTMLText which will run all HTML through a
>sanitizer.  They will either be happy or will complain about performance.
>3.  They can switch to express:InsecureHTMLText and get better
>performance.  But since the name of the component clearly says that using
>it is insecure, we have at least given them an opportunity to understand
>what is going on.
>4.  Some folks might want their own HTML sanitization logic.  They can
>create their own SpecialHTMLSanitizer which implements IHTMLSanitize and
>add it to basic:HTMLText
>
>Thoughts?
>
>Thanks,
>Om
>
>P.S.  Does the name 'TrustedHTMLText' work better than 'InsecureHTMLText'?
>
>On Tue, Jan 3, 2017 at 8:20 AM, flex capacitor <fl...@gmail.com>
>wrote:
>
>> I have a few thoughts on that. I need a component like this in the past
>>for
>> the times I had separate HTML content already created but needed to be
>> integrated into a Flex JS app. I would suggest a contentBefore,
>> contentAfter and contentOverride properties maybe as a bead or a full
>> separate component.
>>
>> Those would be child tag properties that would pass the raw content
>>through
>> enclosed in CDATA tags or not and the container or bead would have a
>> sanitize properties that could be set to true or false.
>>
>> The purpose would be to allow HTML embed content. Say you want to drop a
>> Google maps widget or rich text editor into your Flex JS app. You don't
>> want the compiler to parse that code. You would just want app to write
>>the
>> raw HTML to the document in the container it is declared in. You would
>>be
>> responsible for the security as the author and how to talk to it.
>>
>> The before and after properties would allow things like HTML comments or
>> other uses. In the past you had php code that wraps HTML markup but now
>>it
>> could be used for some of the other frameworks out there to use markup
>>to
>> perform other tasks.
>>
>> How that will work with the Flex JS model new App(); I'm not sure.
>>
>> On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com>
>> wrote:
>>
>> > On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
>> >
>> > >
>> > >
>> > > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
>> > > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com>
>> wrote:
>> > > >
>> > > >Okay, I see your point now.  To be clear, I did not set out to
>>write
>> > HTML
>> > > >code.  The bio in team.json is a html snippet.  So, I am just
>>trying
>> to
>> > > >display it as a piece of formatted data.  Even in other projects,
>>I do
>> > > >need
>> > > >this kind of thing quite often.
>> > >
>> > > IMO, this is use case #1: non-interactive HTML content.  We could
>>just
>> > > have an HTML component with an "html" property.  But it would want
>>to
>> > wrap
>> > > the content in a <div> or <span>
>> > >
>> >
>> > This is all I wanted.  I implemented this and it seems to work fine.
>> >
>> >
>> > >
>> > > Case #2: In MXML, someone wants to mix FlexJS elements with random
>> HTML.
>> > >
>> > > Case #3: In MXML, someone wants to put in random HTML where one
>>child
>> > HTML
>> > > tag has an id and wants to write code that addresses that id.
>> > >
>> > > The cheap option is to only support #1 by creating an HTML component
>> with
>> > > an "html" property.  Everything else needs more thinking, IMO.
>> > >
>> >
>> > 2 and 3 sound like terrible ways to code :-)
>> >
>> >
>> > >
>> > > >
>> > > >That brings up a related concern.  We need to sanitize such html
>> content
>> > > >during runtime [1]
>> > >
>> > > IMO, those are just utility functions.  Not everybody needs
>> sanitization,
>> > > IMO, so PAYG.
>> > >
>> >
>> > Hmm, to play the devil's advocate, security should not be
>>pay-as-you-go.
>> > This should be opt-in by default.  Someone will have to go the extra
>>mile
>> > to turn it off.
>> >
>> > This is the sort of thing that will go out in the wild and folks will
>>get
>> > affected by it soon enough.  We will then need to push out an
>>emergency
>> > release to fix an XSS attack made possible by FlexJS.
>> >
>> > Either that or we call the default implementation 'InsecureHTMLText'
>>or
>> > something like that.
>> >
>> >
>> > >
>> > > >>
>> > > >>Not really sure why this is required.  I am looking for usage
>> patterns
>> > > >>like
>> > > >>this:
>> > > >>
>> > > >><Panel>
>> > > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
>> > > >>    <Image></Image>
>> > > >></Panel>
>> > > >>
>> > > >><TabNavigator>
>> > > >>    <Tab>
>> > > >>        <Button />
>> > > >>        <HTMLText />
>> > > >>    </Tab>
>> > > >>    <Tab><HTMLText></Tab>
>> > > >></TabNavigator>
>> > > >>
>> > > >>I guess the HTMLText component has to be a UIBase for this to
>>work,
>> > > >>right?
>> > > >>
>> > > >>Maybe I am not understanding the point you are trying to make.
>> > > >
>> > > >The above would likely create an HTML DOM like:
>> > > >
>> > > ><Div className="Panel">
>> > > >  <Span>the HTML from myFancyHTMLText</Span>
>> > > >  <Img />
>> > > ></Div>
>> > > >
>> > > >
>> > > >Carlos asked earlier about getting rid of the Span since we all
>>know
>> it
>> > is
>> > > >legit to have the HTML DOM look like:
>> > > >
>> > > ><Div className="Panel">
>> > > >  The HTML from MyFancyHTMLTExt
>> > > >  <img />
>> > > ></div>
>> > > >
>> > > >
>> > > >I doubt if this HTML can be generated.  Are you sure there will be
>>a
>> > > >linebreak after the text?
>> > >
>> > > No.  I just added that to show the "children".
>> > >
>> > > >
>> > > >That looks a TextNode element.  Which is lightweight than innerHTML
>> But
>> > > >are we sure we don't want formatting for such text?  If we want to
>>be
>> > able
>> > > >to format, we need to use a p or a span element.
>> > >
>> > > AIUI, a TextNode is just plain text.  If the above was:
>> > >
>> > > <div className="Panel">
>> > >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
>> > >   <img />
>> > > </div>
>> > >
>> > > There would be a TextNode for "The", a Bold node for "HTML", another
>> > > TextNode for "from" etc.
>> > >
>> >
>> > What I meant was that HTML could be achieved by using the
>> > document.createTextNode() function which creates a TextNode element.
>> i.e.
>> > no need for a wrapping element like P or Span.  Sorry for the
>>confusion.
>> >
>> >
>> > >
>> > >
>> > > This doesn't feel right to me.  All of us seem tempted to want to
>> define
>> > a
>> > > scrap of complex HTML separate from other child controls in a
>> container.
>> > > If there was an HTML control, it would still add a wrapping element.
>> If
>> > > you pull of a trick where the HTML control just injects the content,
>> you
>> > > run into more complexity dealing with numElements and childIndex.
>>It
>> > > would be what the browser says it would be, but not quite as obvious
>> from
>> > > the MXML.
>> > >
>> > > On the other hand we have those thin-wrapping components like Div,
>>and
>> A
>> > > and you ought to be a able to put in HTML content without it being
>> > wrapped
>> > > by another layer.
>> > >
>> >
>> > Yes, I am in agreement with you here.  A div or span with innerHTML is
>> more
>> > than adequate for this usecase.
>> >
>> >
>> > >
>> > > >There is a cost in both development time and runtime performance to
>> > > >generalizing this.  Should we do it?
>> > > >
>> > > >
>> > > >Hmm,  I don't think this requires a change to MXML parsing.
>> > >
>> > > I think it does.  The default property is expected to be an array of
>> > > Ichild elements.  When you have random HTML in the default property
>>the
>> > > compiler won't accept XML TextNodes in many places and where it
>>does,
>> it
>> > > tries to concatenate TextNodes which is what we don't want.
>> > >
>> >
>> > I see.  I did not realize this point.  In any case, I would advice not
>> > adding a random TextNode element like this.  This also brings more
>> security
>> > issues [1]
>> >
>> > Thanks,
>> > Om
>> >
>> > [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-
>> text-methods/
>> >
>> >
>> >
>> > >
>> > > Other opinions welcome...
>> > > -Alex
>> > >
>> > >
>> >
>>

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

Before we lose context, I want add more of my thoughts here.

I think the priority of things should be:

1.  Functionality
2.  Security
3.  Performance

Alex probably thinks it should be:

1.  Functionality
2.  Performance
3.  Security

As a compromise, in this context I am going to suggest that we go with:

1.  Security,
2.  Performance
3.  Functionality

That is, security is still higher than functionality (which is what I
want).  And the priority of performance has not changed (I think what Alex
wants)

To explain it in a bit more detail:  My goal is to not allow a developer to
inadvertently add a bad piece of HTML to the DOM.  That is how security
exploits occur.  We cannot simply say that it is upon the developer to
ensure that a HTML snippet is sanitized before they use HTMLText to render
it on the screen.  We've seen this happen to Flash Player in the past where
ease of use was prioritized over security.  This behavior changed
eventually, where security was considered when building each feature.  I
think we should learn from that to avoid being labeled as 'insecure
software' .

The options that Alex suggested (doing it in the HTTPService layer, etc.)
does not cut it.   Because:

a.  It is not appropriate for HTTPService to divine the nature of a piece
of data.  HTML can be used to display as DOM or shown to user to edit.  We
could have two UI widgets one, that shows the HTML in an editable text
area, and one that previews the HTML.  For example, editing an already
comment in JIRA or a blog post and previewing it before saving.  If we
blindly let the HTTPService sanitize the data, we are losing data.
b.  A scary piece of HTML is not a security threat when it lives as a
string.  There is no need to do anything about it.  It becomes a security
threat only when it is added to the DOM.  So, sanitizing it just before it
is added to the DOM is the most appropriate thing to do.  I guess this is
perfectly adhering to the 'Pay as you go' philosophy.  Don't sanitize the
HTML just in case, sanitize it just in time.

So, as a compromise, here is what I propose:

By default, HTMLText component expects an IHTMLSanitizer bead.  If such a
bead is not available, the component will throw a runtime exception and it
will not render the HTML.

IHTMLSanitizer probably looks like this:

function sanitizeHTML(v:String) :String;

We will have two beads built in:
1.  HTMLSanitizer implements IHTMLSanitizer and uses a default algorithm to
sanitize the given HTML.
2.  InsecureNoHTMLSanitizer implements IHTMLSanitizer which simply returns
the same string back.

We can build two 'express' components like this:

express:HTMLText looks like this:

<basic:HTMLText>
  <basic:beads>
    <basic:HTMLSanitizer />
  </basic:beads>
<basic:HTMLText>

express:InsecureHTMLText looks like this:

<basic:HTMLText>
  <basic:beads>
    <basic:InsecureNoHTMLSanitizer />
  </basic:beads>
<basic:HTMLText>

This achieves the following goals:

1.  If someone wants to use basic:HTMLText and they don't provide a
IHTMLSanitizer, they wont be able to display any HTML and will encounter
runtime errors.
2.  They can use express:HTMLText which will run all HTML through a
sanitizer.  They will either be happy or will complain about performance.
3.  They can switch to express:InsecureHTMLText and get better
performance.  But since the name of the component clearly says that using
it is insecure, we have at least given them an opportunity to understand
what is going on.
4.  Some folks might want their own HTML sanitization logic.  They can
create their own SpecialHTMLSanitizer which implements IHTMLSanitize and
add it to basic:HTMLText

Thoughts?

Thanks,
Om

P.S.  Does the name 'TrustedHTMLText' work better than 'InsecureHTMLText'?

On Tue, Jan 3, 2017 at 8:20 AM, flex capacitor <fl...@gmail.com>
wrote:

> I have a few thoughts on that. I need a component like this in the past for
> the times I had separate HTML content already created but needed to be
> integrated into a Flex JS app. I would suggest a contentBefore,
> contentAfter and contentOverride properties maybe as a bead or a full
> separate component.
>
> Those would be child tag properties that would pass the raw content through
> enclosed in CDATA tags or not and the container or bead would have a
> sanitize properties that could be set to true or false.
>
> The purpose would be to allow HTML embed content. Say you want to drop a
> Google maps widget or rich text editor into your Flex JS app. You don't
> want the compiler to parse that code. You would just want app to write the
> raw HTML to the document in the container it is declared in. You would be
> responsible for the security as the author and how to talk to it.
>
> The before and after properties would allow things like HTML comments or
> other uses. In the past you had php code that wraps HTML markup but now it
> could be used for some of the other frameworks out there to use markup to
> perform other tasks.
>
> How that will work with the Flex JS model new App(); I'm not sure.
>
> On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com>
> wrote:
>
> > On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
> >
> > >
> > >
> > > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
> > > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com>
> wrote:
> > > >
> > > >Okay, I see your point now.  To be clear, I did not set out to write
> > HTML
> > > >code.  The bio in team.json is a html snippet.  So, I am just trying
> to
> > > >display it as a piece of formatted data.  Even in other projects, I do
> > > >need
> > > >this kind of thing quite often.
> > >
> > > IMO, this is use case #1: non-interactive HTML content.  We could just
> > > have an HTML component with an "html" property.  But it would want to
> > wrap
> > > the content in a <div> or <span>
> > >
> >
> > This is all I wanted.  I implemented this and it seems to work fine.
> >
> >
> > >
> > > Case #2: In MXML, someone wants to mix FlexJS elements with random
> HTML.
> > >
> > > Case #3: In MXML, someone wants to put in random HTML where one child
> > HTML
> > > tag has an id and wants to write code that addresses that id.
> > >
> > > The cheap option is to only support #1 by creating an HTML component
> with
> > > an "html" property.  Everything else needs more thinking, IMO.
> > >
> >
> > 2 and 3 sound like terrible ways to code :-)
> >
> >
> > >
> > > >
> > > >That brings up a related concern.  We need to sanitize such html
> content
> > > >during runtime [1]
> > >
> > > IMO, those are just utility functions.  Not everybody needs
> sanitization,
> > > IMO, so PAYG.
> > >
> >
> > Hmm, to play the devil's advocate, security should not be pay-as-you-go.
> > This should be opt-in by default.  Someone will have to go the extra mile
> > to turn it off.
> >
> > This is the sort of thing that will go out in the wild and folks will get
> > affected by it soon enough.  We will then need to push out an emergency
> > release to fix an XSS attack made possible by FlexJS.
> >
> > Either that or we call the default implementation 'InsecureHTMLText' or
> > something like that.
> >
> >
> > >
> > > >>
> > > >>Not really sure why this is required.  I am looking for usage
> patterns
> > > >>like
> > > >>this:
> > > >>
> > > >><Panel>
> > > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
> > > >>    <Image></Image>
> > > >></Panel>
> > > >>
> > > >><TabNavigator>
> > > >>    <Tab>
> > > >>        <Button />
> > > >>        <HTMLText />
> > > >>    </Tab>
> > > >>    <Tab><HTMLText></Tab>
> > > >></TabNavigator>
> > > >>
> > > >>I guess the HTMLText component has to be a UIBase for this to work,
> > > >>right?
> > > >>
> > > >>Maybe I am not understanding the point you are trying to make.
> > > >
> > > >The above would likely create an HTML DOM like:
> > > >
> > > ><Div className="Panel">
> > > >  <Span>the HTML from myFancyHTMLText</Span>
> > > >  <Img />
> > > ></Div>
> > > >
> > > >
> > > >Carlos asked earlier about getting rid of the Span since we all know
> it
> > is
> > > >legit to have the HTML DOM look like:
> > > >
> > > ><Div className="Panel">
> > > >  The HTML from MyFancyHTMLTExt
> > > >  <img />
> > > ></div>
> > > >
> > > >
> > > >I doubt if this HTML can be generated.  Are you sure there will be a
> > > >linebreak after the text?
> > >
> > > No.  I just added that to show the "children".
> > >
> > > >
> > > >That looks a TextNode element.  Which is lightweight than innerHTML
> But
> > > >are we sure we don't want formatting for such text?  If we want to be
> > able
> > > >to format, we need to use a p or a span element.
> > >
> > > AIUI, a TextNode is just plain text.  If the above was:
> > >
> > > <div className="Panel">
> > >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
> > >   <img />
> > > </div>
> > >
> > > There would be a TextNode for "The", a Bold node for "HTML", another
> > > TextNode for "from" etc.
> > >
> >
> > What I meant was that HTML could be achieved by using the
> > document.createTextNode() function which creates a TextNode element.
> i.e.
> > no need for a wrapping element like P or Span.  Sorry for the confusion.
> >
> >
> > >
> > >
> > > This doesn't feel right to me.  All of us seem tempted to want to
> define
> > a
> > > scrap of complex HTML separate from other child controls in a
> container.
> > > If there was an HTML control, it would still add a wrapping element.
> If
> > > you pull of a trick where the HTML control just injects the content,
> you
> > > run into more complexity dealing with numElements and childIndex.  It
> > > would be what the browser says it would be, but not quite as obvious
> from
> > > the MXML.
> > >
> > > On the other hand we have those thin-wrapping components like Div, and
> A
> > > and you ought to be a able to put in HTML content without it being
> > wrapped
> > > by another layer.
> > >
> >
> > Yes, I am in agreement with you here.  A div or span with innerHTML is
> more
> > than adequate for this usecase.
> >
> >
> > >
> > > >There is a cost in both development time and runtime performance to
> > > >generalizing this.  Should we do it?
> > > >
> > > >
> > > >Hmm,  I don't think this requires a change to MXML parsing.
> > >
> > > I think it does.  The default property is expected to be an array of
> > > Ichild elements.  When you have random HTML in the default property the
> > > compiler won't accept XML TextNodes in many places and where it does,
> it
> > > tries to concatenate TextNodes which is what we don't want.
> > >
> >
> > I see.  I did not realize this point.  In any case, I would advice not
> > adding a random TextNode element like this.  This also brings more
> security
> > issues [1]
> >
> > Thanks,
> > Om
> >
> > [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-
> text-methods/
> >
> >
> >
> > >
> > > Other opinions welcome...
> > > -Alex
> > >
> > >
> >
>

Re: [FlexJS] How to add html content?

[flex capacitor <fl...@gmail.com>]

I have a few thoughts on that. I need a component like this in the past for
the times I had separate HTML content already created but needed to be
integrated into a Flex JS app. I would suggest a contentBefore,
contentAfter and contentOverride properties maybe as a bead or a full
separate component.

Those would be child tag properties that would pass the raw content through
enclosed in CDATA tags or not and the container or bead would have a
sanitize properties that could be set to true or false.

The purpose would be to allow HTML embed content. Say you want to drop a
Google maps widget or rich text editor into your Flex JS app. You don't
want the compiler to parse that code. You would just want app to write the
raw HTML to the document in the container it is declared in. You would be
responsible for the security as the author and how to talk to it.

The before and after properties would allow things like HTML comments or
other uses. In the past you had php code that wraps HTML markup but now it
could be used for some of the other frameworks out there to use markup to
perform other tasks.

How that will work with the Flex JS model new App(); I'm not sure.

On Jan 1, 2017 3:16 AM, "OmPrakash Muppirala" <bi...@gmail.com> wrote:

> On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
>
> >
> >
> > On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
> > Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
> > >
> > >Okay, I see your point now.  To be clear, I did not set out to write
> HTML
> > >code.  The bio in team.json is a html snippet.  So, I am just trying to
> > >display it as a piece of formatted data.  Even in other projects, I do
> > >need
> > >this kind of thing quite often.
> >
> > IMO, this is use case #1: non-interactive HTML content.  We could just
> > have an HTML component with an "html" property.  But it would want to
> wrap
> > the content in a <div> or <span>
> >
>
> This is all I wanted.  I implemented this and it seems to work fine.
>
>
> >
> > Case #2: In MXML, someone wants to mix FlexJS elements with random HTML.
> >
> > Case #3: In MXML, someone wants to put in random HTML where one child
> HTML
> > tag has an id and wants to write code that addresses that id.
> >
> > The cheap option is to only support #1 by creating an HTML component with
> > an "html" property.  Everything else needs more thinking, IMO.
> >
>
> 2 and 3 sound like terrible ways to code :-)
>
>
> >
> > >
> > >That brings up a related concern.  We need to sanitize such html content
> > >during runtime [1]
> >
> > IMO, those are just utility functions.  Not everybody needs sanitization,
> > IMO, so PAYG.
> >
>
> Hmm, to play the devil's advocate, security should not be pay-as-you-go.
> This should be opt-in by default.  Someone will have to go the extra mile
> to turn it off.
>
> This is the sort of thing that will go out in the wild and folks will get
> affected by it soon enough.  We will then need to push out an emergency
> release to fix an XSS attack made possible by FlexJS.
>
> Either that or we call the default implementation 'InsecureHTMLText' or
> something like that.
>
>
> >
> > >>
> > >>Not really sure why this is required.  I am looking for usage patterns
> > >>like
> > >>this:
> > >>
> > >><Panel>
> > >>    <HTMLText>{myFancyHTMLText}</HTMLText>
> > >>    <Image></Image>
> > >></Panel>
> > >>
> > >><TabNavigator>
> > >>    <Tab>
> > >>        <Button />
> > >>        <HTMLText />
> > >>    </Tab>
> > >>    <Tab><HTMLText></Tab>
> > >></TabNavigator>
> > >>
> > >>I guess the HTMLText component has to be a UIBase for this to work,
> > >>right?
> > >>
> > >>Maybe I am not understanding the point you are trying to make.
> > >
> > >The above would likely create an HTML DOM like:
> > >
> > ><Div className="Panel">
> > >  <Span>the HTML from myFancyHTMLText</Span>
> > >  <Img />
> > ></Div>
> > >
> > >
> > >Carlos asked earlier about getting rid of the Span since we all know it
> is
> > >legit to have the HTML DOM look like:
> > >
> > ><Div className="Panel">
> > >  The HTML from MyFancyHTMLTExt
> > >  <img />
> > ></div>
> > >
> > >
> > >I doubt if this HTML can be generated.  Are you sure there will be a
> > >linebreak after the text?
> >
> > No.  I just added that to show the "children".
> >
> > >
> > >That looks a TextNode element.  Which is lightweight than innerHTML  But
> > >are we sure we don't want formatting for such text?  If we want to be
> able
> > >to format, we need to use a p or a span element.
> >
> > AIUI, a TextNode is just plain text.  If the above was:
> >
> > <div className="Panel">
> >   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
> >   <img />
> > </div>
> >
> > There would be a TextNode for "The", a Bold node for "HTML", another
> > TextNode for "from" etc.
> >
>
> What I meant was that HTML could be achieved by using the
> document.createTextNode() function which creates a TextNode element.  i.e.
> no need for a wrapping element like P or Span.  Sorry for the confusion.
>
>
> >
> >
> > This doesn't feel right to me.  All of us seem tempted to want to define
> a
> > scrap of complex HTML separate from other child controls in a container.
> > If there was an HTML control, it would still add a wrapping element.  If
> > you pull of a trick where the HTML control just injects the content, you
> > run into more complexity dealing with numElements and childIndex.  It
> > would be what the browser says it would be, but not quite as obvious from
> > the MXML.
> >
> > On the other hand we have those thin-wrapping components like Div, and A
> > and you ought to be a able to put in HTML content without it being
> wrapped
> > by another layer.
> >
>
> Yes, I am in agreement with you here.  A div or span with innerHTML is more
> than adequate for this usecase.
>
>
> >
> > >There is a cost in both development time and runtime performance to
> > >generalizing this.  Should we do it?
> > >
> > >
> > >Hmm,  I don't think this requires a change to MXML parsing.
> >
> > I think it does.  The default property is expected to be an array of
> > Ichild elements.  When you have random HTML in the default property the
> > compiler won't accept XML TextNodes in many places and where it does, it
> > tries to concatenate TextNodes which is what we don't want.
> >
>
> I see.  I did not realize this point.  In any case, I would advice not
> adding a random TextNode element like this.  This also brings more security
> issues [1]
>
> Thanks,
> Om
>
> [1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-text-methods/
>
>
>
> >
> > Other opinions welcome...
> > -Alex
> >
> >
>

Re: [FlexJS] How to add html content?

[piotrz <pi...@gmail.com>]

Om,

In my opinion the way how we are adding now html text by InnerHTML bead is
quite good. We have one centralized way without messing MXML. 

Can we just inside InnerHTML:

1) Add this text as textNode - would it be working ? - We are more safe with
textNode
2) Add as a second step escapeHTML function as author of this article [1]
suggest ?

[1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-text-methods/

Is this make sense ?

Piotr





-----
Apache Flex PMC
piotrzarzycki21@gmail.com
--
View this message in context: http://apache-flex-development.2333347.n4.nabble.com/FlexJS-How-to-add-html-content-tp57697p57717.html
Sent from the Apache Flex Development mailing list archive at Nabble.com.

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/2/17, 9:38 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>On Jan 2, 2017 9:06 AM, "Alex Harui" <ah...@adobe.com> wrote:
>
>Are you saying that Angular and Jquery have ways of preventing you from
>writing to innerHTML directly?  Otherwise it is opt-in.  You must use the
>APIs they offer.
>
>
>No, you cant do that unless you can change the way html/javascript works.
>
>If you use their framework APIs, security us opt-out by default.

So, if I understand correctly, you have to opt-in to using their secure
APIs right?  I'm totally fine with us providing secure components and APIs
that composite a trusted API surface with some security checking and
recommending that folks use the secure version by default.  Then those
that are in trusted environments can skip the extra code.

>
>
>The goal for me is to implement basic security features in FlexJS.  I dont
>want to adhere to an ideology blindly.  There are going to be execeptions
>to the pay as you go philosophy and basic security is one of them.

I don't see any advantage to not implementing what you want in a PAYG way.
 How would folks opt-out and not carry or run that code?  Opt-out in
FlexJS is supposed to be done by changing the list of beads or changing to
a lighter weight component set.  I don't think that conflicts with what
you want to do.

>
>
>
>Or is the goal to be able to make your app easier to analyze by some of
>these penetration testing tools?
>
>
>
>And then what?  This insecure, unsanitized html capabilities will be one
>of
>the first things caught by any decent pen-test tools.

I was just trying to understand your goals.  Remember that for the
wrapping components (not for folks writing directly against the typedefs
APIs), we can present just about any API we want.  Right now there is no
innerHTML property available on the wrapping components so folks cannot
screw themselves over by directly slapping some un-sanitized HTML into one
of our containers, but they probably can do so for Label and Button.
Sounds like you are building a component that does allows for HTML in our
containers which is fine.  But besides standard sanitization, we could go
even further if you want and explore having HTML be an actual type in our
framework.  Then you can't just assign a string to the html property of
various widgets.  And that might make for even better security or analysis
of the security of an application.  The web services might return an
UnsecuredHTML if the request is cross-domain or something like that.  IOW,
we really can block direct access to innerHTML if we want to.

>
>
>Whatever the goal, it doesn't seem right to me to try to sanitize in
>HTMLText or Label.  IIRC, my training is to check people at the door and
>trust them after instead of having everyone check every person they talk
>to before they talk to them.  Once the bad person/data is in the door, it
>is too late.
>
>
>Lets agree to to diaagree here.  Let me add the code and then we can
>review/discuss at that point.
>
>
>Can you bug your security team and see if they think an HTMLText widget is
>the right place, or have you already checked with them?
>
>
>No, I have not.  But from my discussions with them in the past, this is a
>vector for XSS attacks and they would be interested in having basic
>protection by default.  Other frameworks do this because they got dinged
>in
>the past.
>

I can check with my security folks, but I suspect they will first ask:
"how did that HTML get into the app in the first place?"  And the answer
will be that someone typed it in, or it came in via a web service.  And
they will say that that is where the sanitization should take place.  It
doesn't make sense to me to have an HTTPService return a result that needs
to go into two HTMLText widgets and have the sanitization run twice as it
goes into each widget.  Seems like you could create an HTMLSanitizerBead
that goes on the HTTPService strand and sanitizes the results.  Then
create a component set with that bead baked in.

For the team page, since it uses a small static "database", really some
other tool should sanitize it prior to deployment.  But in other cases,
where the web service result is "deserialized" into ValueObjects is where
the sanitization should occur.  That's what I mean by checking people at
the door.

My 2 cents.  I'd love to hear what others think.
-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Jan 2, 2017 9:06 AM, "Alex Harui" <ah...@adobe.com> wrote:



On 1/2/17, 12:30 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>On Mon, Jan 2, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 1/2/17, 12:01 AM, "omuppi1@gmail.com on behalf of OmPrakash
>>Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>>
>> >
>> >AngularJS: https://docs.angularjs.org/api/ng/directive/ngBindHtml (By
>> >default the HTML is loaded in a secure way, i.e. sanitization is
>> >attempted)
>> >
>> >Jquery: https://api.jquery.com/jquery.parsehtml/ (By default, Jquery
>>does
>> >not run scripts in the parsed HTML)
>>
>> These look like opt-in utility functions.  Am I missing something?
>>
>
>No, they are opt-out functionalities.  That is, it is on by default; you
>need to actively do something to turn it off.  What is your definition for
>opt-in?

Are you saying that Angular and Jquery have ways of preventing you from
writing to innerHTML directly?  Otherwise it is opt-in.  You must use the
APIs they offer.


No, you cant do that unless you can change the way html/javascript works.

If you use their framework APIs, security us opt-out by default.



>
>In the AngularJS example, by default ng-bind-html tries to sanitize the
>html.  If the sanitizer is not loaded, an exception is thrown, but the
>HTML
>content is not rendered.
>
>In the jquery example, by default, no scripts are run in the loaded html.
>If you want to load the scripts in the loaded HTML  (i.e opt-out of
>sanitizing) , you need to set a variable.
>


>>
>> If we create opt-in utility functions, you are welcome to build them
>>into
>> the heavier component sets.
>
>
>I am saying we add security features as opt-out functionality.

That's fine for the heavier component sets as a composition of Basic/HTML
components and utility functions.  We should really start building such a
heavier set.  However, IMO, there are going to be plenty of apps that work
in a trusted environment and shouldn't have to pay the price of runtime
sanitization.

>
>
>>   But I would still recommend doing so at the
>> point of input and not by wrapping the html setter on UI widgets.  For
>> example, having an HTTPServiceThatReturnsSanitizedHTML would be my
>>strong
>> preference.  And a TextAreaForTypingInHTML class.  That was my training.
>> It should be safer, and result in better performance.  I can
>>double-check
>> with Adobe security experts if you want me to.
>>
>
>
>FlexJS already presents a hard enough barrier for anyone trying to render
>HTML content directly.  My suggestion is to add a HTMLText component that
>makes it easy to add such HTML to the DOM.  So, theoretically, this is the
>only place where we will need to sanitize the HTML before displaying it.

I guess we might want to stop and agree on goals.  Is the goal to be able
to advertise FlexJS as the framework that, if you use it, you'll never be
subjected to security issue?  That's a pretty serious undertaking and
hopefully not something we need to do for 1.0. I think there would be many
more things than an HTMLText component needed.


The goal for me is to implement basic security features in FlexJS.  I dont
want to adhere to an ideology blindly.  There are going to be execeptions
to the pay as you go philosophy and basic security is one of them.



Or is the goal to be able to make your app easier to analyze by some of
these penetration testing tools?



And then what?  This insecure, unsanitized html capabilities will be one of
the first things caught by any decent pen-test tools.


Whatever the goal, it doesn't seem right to me to try to sanitize in
HTMLText or Label.  IIRC, my training is to check people at the door and
trust them after instead of having everyone check every person they talk
to before they talk to them.  Once the bad person/data is in the door, it
is too late.


Lets agree to to diaagree here.  Let me add the code and then we can
review/discuss at that point.


Can you bug your security team and see if they think an HTMLText widget is
the right place, or have you already checked with them?


No, I have not.  But from my discussions with them in the past, this is a
vector for XSS attacks and they would be interested in having basic
protection by default.  Other frameworks do this because they got dinged in
the past.




>
>In summary, I am suggesting that we sanitize html only on the the HTMLText
>component (and perhaps the Label component?) and not all components.  That
>would be similar to what you are suggesting.
>
>Also, the sanitization can happen in a Util class as a static function, so
>the component itself will not become heavier.

Again, as long as it is PAYG and Composition-based, it is fine to start
out with not trusting in the heavier sets.   We don't want folks who work
in trusted environments to complain that FlexJS is too slow because they
are constantly updating some HTML in a label and it runs a scan on the
string on every update.


That is the exact reason I am suggesting we add an option to turn off
sanitizing in an trusted environment.  That is what angularjs does.  The
mechanism is detailed in the earlier link I sent.

Thanks,
Om



My 2 cents.  I'd love to hear what others think.
-Alex

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/2/17, 12:30 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>On Mon, Jan 2, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 1/2/17, 12:01 AM, "omuppi1@gmail.com on behalf of OmPrakash
>>Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>>
>> >
>> >AngularJS: https://docs.angularjs.org/api/ng/directive/ngBindHtml (By
>> >default the HTML is loaded in a secure way, i.e. sanitization is
>> >attempted)
>> >
>> >Jquery: https://api.jquery.com/jquery.parsehtml/ (By default, Jquery
>>does
>> >not run scripts in the parsed HTML)
>>
>> These look like opt-in utility functions.  Am I missing something?
>>
>
>No, they are opt-out functionalities.  That is, it is on by default; you
>need to actively do something to turn it off.  What is your definition for
>opt-in?

Are you saying that Angular and Jquery have ways of preventing you from
writing to innerHTML directly?  Otherwise it is opt-in.  You must use the
APIs they offer.

>
>In the AngularJS example, by default ng-bind-html tries to sanitize the
>html.  If the sanitizer is not loaded, an exception is thrown, but the
>HTML
>content is not rendered.
>
>In the jquery example, by default, no scripts are run in the loaded html.
>If you want to load the scripts in the loaded HTML  (i.e opt-out of
>sanitizing) , you need to set a variable.
>


>>
>> If we create opt-in utility functions, you are welcome to build them
>>into
>> the heavier component sets.
>
>
>I am saying we add security features as opt-out functionality.

That's fine for the heavier component sets as a composition of Basic/HTML
components and utility functions.  We should really start building such a
heavier set.  However, IMO, there are going to be plenty of apps that work
in a trusted environment and shouldn't have to pay the price of runtime
sanitization.

>
>
>>   But I would still recommend doing so at the
>> point of input and not by wrapping the html setter on UI widgets.  For
>> example, having an HTTPServiceThatReturnsSanitizedHTML would be my
>>strong
>> preference.  And a TextAreaForTypingInHTML class.  That was my training.
>> It should be safer, and result in better performance.  I can
>>double-check
>> with Adobe security experts if you want me to.
>>
>
>
>FlexJS already presents a hard enough barrier for anyone trying to render
>HTML content directly.  My suggestion is to add a HTMLText component that
>makes it easy to add such HTML to the DOM.  So, theoretically, this is the
>only place where we will need to sanitize the HTML before displaying it.

I guess we might want to stop and agree on goals.  Is the goal to be able
to advertise FlexJS as the framework that, if you use it, you'll never be
subjected to security issue?  That's a pretty serious undertaking and
hopefully not something we need to do for 1.0. I think there would be many
more things than an HTMLText component needed.

Or is the goal to be able to make your app easier to analyze by some of
these penetration testing tools?

Whatever the goal, it doesn't seem right to me to try to sanitize in
HTMLText or Label.  IIRC, my training is to check people at the door and
trust them after instead of having everyone check every person they talk
to before they talk to them.  Once the bad person/data is in the door, it
is too late.

Can you bug your security team and see if they think an HTMLText widget is
the right place, or have you already checked with them?


>
>In summary, I am suggesting that we sanitize html only on the the HTMLText
>component (and perhaps the Label component?) and not all components.  That
>would be similar to what you are suggesting.
>
>Also, the sanitization can happen in a Util class as a static function, so
>the component itself will not become heavier.

Again, as long as it is PAYG and Composition-based, it is fine to start
out with not trusting in the heavier sets.   We don't want folks who work
in trusted environments to complain that FlexJS is too slow because they
are constantly updating some HTML in a label and it runs a scan on the
string on every update.

My 2 cents.  I'd love to hear what others think.
-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Mon, Jan 2, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 1/2/17, 12:01 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
> >On Sun, Jan 1, 2017 at 11:44 PM, Alex Harui <ah...@adobe.com> wrote:
> >
> >>
> >>
> >> On 1/1/17, 11:35 PM, "omuppi1@gmail.com on behalf of OmPrakash
> >>Muppirala"
> >> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
> >>
> >> >On Sun, Jan 1, 2017 at 10:18 PM, Alex Harui <ah...@adobe.com> wrote:
> >> >
> >> >>
> >> >>
> >> >> On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash
> >> Muppirala"
> >> >> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
> >> >>
> >> >> >
> >> >> >Hmm, to play the devil's advocate, security should not be
> >> >>pay-as-you-go.
> >> >> >This should be opt-in by default.  Someone will have to go the extra
> >> >>mile
> >> >> >to turn it off.
> >> >> >
> >> >> >This is the sort of thing that will go out in the wild and folks
> >>will
> >> >>get
> >> >> >affected by it soon enough.  We will then need to push out an
> >>emergency
> >> >> >release to fix an XSS attack made possible by FlexJS.
> >> >> >
> >> >> >Either that or we call the default implementation
> >>'InsecureHTMLText' or
> >> >> >something like that.
> >> >>
> >> >> Well, the article you posted specifically mentions "sanitizing any
> >>HTML
> >> >> code submitted by a user."
> >> >>
> >> >> IMO, that is different from HTML code entered by a developer or
> >>sucked
> >> >>in
> >> >> from a database.  There are other opportunities to sanitize that
> >> >>non-user
> >> >> HTML that won't have runtime performance issues.
> >> >>
> >> >
> >> >We don't always have control over the database from which the html
> >>snippet
> >> >is loaded from.  Heck, I have access to flex.apache.org and I don't
> >>even
> >> >know if the HTML in team.json has any insecure tags/js code.  Also, if
> >>I
> >> >am
> >> >going to load data from a third party web resource, I better sanitize
> >>any
> >> >HTML they throw at me.  They might not have diligently cleaned every
> >>html
> >> >snippet.
> >> >
> >> >For example, I might create an app that shows movie showtimes, user
> >> >reviews
> >> >and let them buy tickets.  The movie showtimes comes from Fandango's
> >>REST
> >> >APIs and the reviews come from RottenTomatoes' REST APIs.  If
> >> >RottenTomatoes does not sanitize their user entered reviews and saves
> >>them
> >> >as HTML and we consume it, we will be putting our app at risk.
> >> >
> >> >This may seem like an uncommon usecase to you right now.  But at work,
> >>I
> >> >have an app sec team that routinely does penetration tests against
> >>every
> >> >third party open source code we use.  These sort of insecure features
> >>get
> >> >flagged and we are blocked from using that framework/library until that
> >> >issue has been publicly resolved.  I can imagine several other
> >>companies
> >> >being so strict about security of their web apps.
> >>
> >> Which popular JS frameworks have builtin sanitization
> >
> >
> >
> >
> >AngularJS: https://docs.angularjs.org/api/ng/directive/ngBindHtml (By
> >default the HTML is loaded in a secure way, i.e. sanitization is
> >attempted)
> >
> >Jquery: https://api.jquery.com/jquery.parsehtml/ (By default, Jquery does
> >not run scripts in the parsed HTML)
>
> These look like opt-in utility functions.  Am I missing something?
>

No, they are opt-out functionalities.  That is, it is on by default; you
need to actively do something to turn it off.  What is your definition for
opt-in?

In the AngularJS example, by default ng-bind-html tries to sanitize the
html.  If the sanitizer is not loaded, an exception is thrown, but the HTML
content is not rendered.

In the jquery example, by default, no scripts are run in the loaded html.
If you want to load the scripts in the loaded HTML  (i.e opt-out of
sanitizing) , you need to set a variable.



>
>
> >
> >React: https://facebook.github.io/react/docs/dom-elements.html (No
> >sanitization(yet) , but you have to explicitly use the api
> >called: dangerouslySetInnerHTML)
> >
>
> >
> >
> >> and have wrapped the
> >> innerHTML setter on all HTMLElements?
> >>
> >
> >Yes, you can do this with direct javascript.  But this is exactly why
> >people use frameworks.  i.e. a framework is supposed to protect users from
> >shooting themselves in their foot.
> >
>
> If we create opt-in utility functions, you are welcome to build them into
> the heavier component sets.


I am saying we add security features as opt-out functionality.


>   But I would still recommend doing so at the
> point of input and not by wrapping the html setter on UI widgets.  For
> example, having an HTTPServiceThatReturnsSanitizedHTML would be my strong
> preference.  And a TextAreaForTypingInHTML class.  That was my training.
> It should be safer, and result in better performance.  I can double-check
> with Adobe security experts if you want me to.
>


FlexJS already presents a hard enough barrier for anyone trying to render
HTML content directly.  My suggestion is to add a HTMLText component that
makes it easy to add such HTML to the DOM.  So, theoretically, this is the
only place where we will need to sanitize the HTML before displaying it.

In summary, I am suggesting that we sanitize html only on the the HTMLText
component (and perhaps the Label component?) and not all components.  That
would be similar to what you are suggesting.

Also, the sanitization can happen in a Util class as a static function, so
the component itself will not become heavier.

Thanks,
Om

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/2/17, 12:01 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>On Sun, Jan 1, 2017 at 11:44 PM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 1/1/17, 11:35 PM, "omuppi1@gmail.com on behalf of OmPrakash
>>Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>>
>> >On Sun, Jan 1, 2017 at 10:18 PM, Alex Harui <ah...@adobe.com> wrote:
>> >
>> >>
>> >>
>> >> On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash
>> Muppirala"
>> >> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>> >>
>> >> >
>> >> >Hmm, to play the devil's advocate, security should not be
>> >>pay-as-you-go.
>> >> >This should be opt-in by default.  Someone will have to go the extra
>> >>mile
>> >> >to turn it off.
>> >> >
>> >> >This is the sort of thing that will go out in the wild and folks
>>will
>> >>get
>> >> >affected by it soon enough.  We will then need to push out an
>>emergency
>> >> >release to fix an XSS attack made possible by FlexJS.
>> >> >
>> >> >Either that or we call the default implementation
>>'InsecureHTMLText' or
>> >> >something like that.
>> >>
>> >> Well, the article you posted specifically mentions "sanitizing any
>>HTML
>> >> code submitted by a user."
>> >>
>> >> IMO, that is different from HTML code entered by a developer or
>>sucked
>> >>in
>> >> from a database.  There are other opportunities to sanitize that
>> >>non-user
>> >> HTML that won't have runtime performance issues.
>> >>
>> >
>> >We don't always have control over the database from which the html
>>snippet
>> >is loaded from.  Heck, I have access to flex.apache.org and I don't
>>even
>> >know if the HTML in team.json has any insecure tags/js code.  Also, if
>>I
>> >am
>> >going to load data from a third party web resource, I better sanitize
>>any
>> >HTML they throw at me.  They might not have diligently cleaned every
>>html
>> >snippet.
>> >
>> >For example, I might create an app that shows movie showtimes, user
>> >reviews
>> >and let them buy tickets.  The movie showtimes comes from Fandango's
>>REST
>> >APIs and the reviews come from RottenTomatoes' REST APIs.  If
>> >RottenTomatoes does not sanitize their user entered reviews and saves
>>them
>> >as HTML and we consume it, we will be putting our app at risk.
>> >
>> >This may seem like an uncommon usecase to you right now.  But at work,
>>I
>> >have an app sec team that routinely does penetration tests against
>>every
>> >third party open source code we use.  These sort of insecure features
>>get
>> >flagged and we are blocked from using that framework/library until that
>> >issue has been publicly resolved.  I can imagine several other
>>companies
>> >being so strict about security of their web apps.
>>
>> Which popular JS frameworks have builtin sanitization
>
>
>
>
>AngularJS: https://docs.angularjs.org/api/ng/directive/ngBindHtml (By
>default the HTML is loaded in a secure way, i.e. sanitization is
>attempted)
>
>Jquery: https://api.jquery.com/jquery.parsehtml/ (By default, Jquery does
>not run scripts in the parsed HTML)

These look like opt-in utility functions.  Am I missing something?


>
>React: https://facebook.github.io/react/docs/dom-elements.html (No
>sanitization(yet) , but you have to explicitly use the api
>called: dangerouslySetInnerHTML)
>

>
>
>> and have wrapped the
>> innerHTML setter on all HTMLElements?
>>
>
>Yes, you can do this with direct javascript.  But this is exactly why
>people use frameworks.  i.e. a framework is supposed to protect users from
>shooting themselves in their foot.
>

If we create opt-in utility functions, you are welcome to build them into
the heavier component sets.  But I would still recommend doing so at the
point of input and not by wrapping the html setter on UI widgets.  For
example, having an HTTPServiceThatReturnsSanitizedHTML would be my strong
preference.  And a TextAreaForTypingInHTML class.  That was my training.
It should be safer, and result in better performance.  I can double-check
with Adobe security experts if you want me to.

What do others think?
-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Sun, Jan 1, 2017 at 11:44 PM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 1/1/17, 11:35 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
> >On Sun, Jan 1, 2017 at 10:18 PM, Alex Harui <ah...@adobe.com> wrote:
> >
> >>
> >>
> >> On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash
> Muppirala"
> >> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
> >>
> >> >
> >> >Hmm, to play the devil's advocate, security should not be
> >>pay-as-you-go.
> >> >This should be opt-in by default.  Someone will have to go the extra
> >>mile
> >> >to turn it off.
> >> >
> >> >This is the sort of thing that will go out in the wild and folks will
> >>get
> >> >affected by it soon enough.  We will then need to push out an emergency
> >> >release to fix an XSS attack made possible by FlexJS.
> >> >
> >> >Either that or we call the default implementation 'InsecureHTMLText' or
> >> >something like that.
> >>
> >> Well, the article you posted specifically mentions "sanitizing any HTML
> >> code submitted by a user."
> >>
> >> IMO, that is different from HTML code entered by a developer or sucked
> >>in
> >> from a database.  There are other opportunities to sanitize that
> >>non-user
> >> HTML that won't have runtime performance issues.
> >>
> >
> >We don't always have control over the database from which the html snippet
> >is loaded from.  Heck, I have access to flex.apache.org and I don't even
> >know if the HTML in team.json has any insecure tags/js code.  Also, if I
> >am
> >going to load data from a third party web resource, I better sanitize any
> >HTML they throw at me.  They might not have diligently cleaned every html
> >snippet.
> >
> >For example, I might create an app that shows movie showtimes, user
> >reviews
> >and let them buy tickets.  The movie showtimes comes from Fandango's REST
> >APIs and the reviews come from RottenTomatoes' REST APIs.  If
> >RottenTomatoes does not sanitize their user entered reviews and saves them
> >as HTML and we consume it, we will be putting our app at risk.
> >
> >This may seem like an uncommon usecase to you right now.  But at work, I
> >have an app sec team that routinely does penetration tests against every
> >third party open source code we use.  These sort of insecure features get
> >flagged and we are blocked from using that framework/library until that
> >issue has been publicly resolved.  I can imagine several other companies
> >being so strict about security of their web apps.
>
> Which popular JS frameworks have builtin sanitization




AngularJS: https://docs.angularjs.org/api/ng/directive/ngBindHtml (By
default the HTML is loaded in a secure way, i.e. sanitization is attempted)

Jquery: https://api.jquery.com/jquery.parsehtml/ (By default, Jquery does
not run scripts in the parsed HTML)

React: https://facebook.github.io/react/docs/dom-elements.html (No
sanitization(yet) , but you have to explicitly use the api
called: dangerouslySetInnerHTML)



> and have wrapped the
> innerHTML setter on all HTMLElements?
>

Yes, you can do this with direct javascript.  But this is exactly why
people use frameworks.  i.e. a framework is supposed to protect users from
shooting themselves in their foot.


>
> This is not how I was trained to handle these scenarios, but maybe things
> have changed since I last went through security training.  IIRC, you are
> supposed to sanitize the HTML on its return from the database/web service
> or when the user submits the input, not when you pass it on to the UI
> widgets.
>
> -Alex
>
>
>

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/1/17, 11:35 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>On Sun, Jan 1, 2017 at 10:18 PM, Alex Harui <ah...@adobe.com> wrote:
>
>>
>>
>> On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
>> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>>
>> >
>> >Hmm, to play the devil's advocate, security should not be
>>pay-as-you-go.
>> >This should be opt-in by default.  Someone will have to go the extra
>>mile
>> >to turn it off.
>> >
>> >This is the sort of thing that will go out in the wild and folks will
>>get
>> >affected by it soon enough.  We will then need to push out an emergency
>> >release to fix an XSS attack made possible by FlexJS.
>> >
>> >Either that or we call the default implementation 'InsecureHTMLText' or
>> >something like that.
>>
>> Well, the article you posted specifically mentions "sanitizing any HTML
>> code submitted by a user."
>>
>> IMO, that is different from HTML code entered by a developer or sucked
>>in
>> from a database.  There are other opportunities to sanitize that
>>non-user
>> HTML that won't have runtime performance issues.
>>
>
>We don't always have control over the database from which the html snippet
>is loaded from.  Heck, I have access to flex.apache.org and I don't even
>know if the HTML in team.json has any insecure tags/js code.  Also, if I
>am
>going to load data from a third party web resource, I better sanitize any
>HTML they throw at me.  They might not have diligently cleaned every html
>snippet.
>
>For example, I might create an app that shows movie showtimes, user
>reviews
>and let them buy tickets.  The movie showtimes comes from Fandango's REST
>APIs and the reviews come from RottenTomatoes' REST APIs.  If
>RottenTomatoes does not sanitize their user entered reviews and saves them
>as HTML and we consume it, we will be putting our app at risk.
>
>This may seem like an uncommon usecase to you right now.  But at work, I
>have an app sec team that routinely does penetration tests against every
>third party open source code we use.  These sort of insecure features get
>flagged and we are blocked from using that framework/library until that
>issue has been publicly resolved.  I can imagine several other companies
>being so strict about security of their web apps.

Which popular JS frameworks have builtin sanitization and have wrapped the
innerHTML setter on all HTMLElements?

This is not how I was trained to handle these scenarios, but maybe things
have changed since I last went through security training.  IIRC, you are
supposed to sanitize the HTML on its return from the database/web service
or when the user submits the input, not when you pass it on to the UI
widgets.

-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Sun, Jan 1, 2017 at 10:18 PM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
> <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
> >
> >Hmm, to play the devil's advocate, security should not be pay-as-you-go.
> >This should be opt-in by default.  Someone will have to go the extra mile
> >to turn it off.
> >
> >This is the sort of thing that will go out in the wild and folks will get
> >affected by it soon enough.  We will then need to push out an emergency
> >release to fix an XSS attack made possible by FlexJS.
> >
> >Either that or we call the default implementation 'InsecureHTMLText' or
> >something like that.
>
> Well, the article you posted specifically mentions "sanitizing any HTML
> code submitted by a user."
>
> IMO, that is different from HTML code entered by a developer or sucked in
> from a database.  There are other opportunities to sanitize that non-user
> HTML that won't have runtime performance issues.
>

We don't always have control over the database from which the html snippet
is loaded from.  Heck, I have access to flex.apache.org and I don't even
know if the HTML in team.json has any insecure tags/js code.  Also, if I am
going to load data from a third party web resource, I better sanitize any
HTML they throw at me.  They might not have diligently cleaned every html
snippet.

For example, I might create an app that shows movie showtimes, user reviews
and let them buy tickets.  The movie showtimes comes from Fandango's REST
APIs and the reviews come from RottenTomatoes' REST APIs.  If
RottenTomatoes does not sanitize their user entered reviews and saves them
as HTML and we consume it, we will be putting our app at risk.

This may seem like an uncommon usecase to you right now.  But at work, I
have an app sec team that routinely does penetration tests against every
third party open source code we use.  These sort of insecure features get
flagged and we are blocked from using that framework/library until that
issue has been publicly resolved.  I can imagine several other companies
being so strict about security of their web apps.


>
> Also, the article mentions there being more than one way to sanitize, so
> we should let folks choose what to use and when to use it.


> Or am I missing something?
>

We should have a default approach that satisfies most common scenarios.  Of
course, folks are welcome to add their own sanitizing logic by extending
the base component.

Thanks,
Om


>
> -Alex
>
>

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 1/1/17, 1:15 AM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>
>Hmm, to play the devil's advocate, security should not be pay-as-you-go.
>This should be opt-in by default.  Someone will have to go the extra mile
>to turn it off.
>
>This is the sort of thing that will go out in the wild and folks will get
>affected by it soon enough.  We will then need to push out an emergency
>release to fix an XSS attack made possible by FlexJS.
>
>Either that or we call the default implementation 'InsecureHTMLText' or
>something like that.

Well, the article you posted specifically mentions "sanitizing any HTML
code submitted by a user."

IMO, that is different from HTML code entered by a developer or sucked in
from a database.  There are other opportunities to sanitize that non-user
HTML that won't have runtime performance issues.

Also, the article mentions there being more than one way to sanitize, so
we should let folks choose what to use and when to use it.

Or am I missing something?

-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Sun, Jan 1, 2017 at 12:15 AM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
> Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
> >
> >Okay, I see your point now.  To be clear, I did not set out to write HTML
> >code.  The bio in team.json is a html snippet.  So, I am just trying to
> >display it as a piece of formatted data.  Even in other projects, I do
> >need
> >this kind of thing quite often.
>
> IMO, this is use case #1: non-interactive HTML content.  We could just
> have an HTML component with an "html" property.  But it would want to wrap
> the content in a <div> or <span>
>

This is all I wanted.  I implemented this and it seems to work fine.


>
> Case #2: In MXML, someone wants to mix FlexJS elements with random HTML.
>
> Case #3: In MXML, someone wants to put in random HTML where one child HTML
> tag has an id and wants to write code that addresses that id.
>
> The cheap option is to only support #1 by creating an HTML component with
> an "html" property.  Everything else needs more thinking, IMO.
>

2 and 3 sound like terrible ways to code :-)


>
> >
> >That brings up a related concern.  We need to sanitize such html content
> >during runtime [1]
>
> IMO, those are just utility functions.  Not everybody needs sanitization,
> IMO, so PAYG.
>

Hmm, to play the devil's advocate, security should not be pay-as-you-go.
This should be opt-in by default.  Someone will have to go the extra mile
to turn it off.

This is the sort of thing that will go out in the wild and folks will get
affected by it soon enough.  We will then need to push out an emergency
release to fix an XSS attack made possible by FlexJS.

Either that or we call the default implementation 'InsecureHTMLText' or
something like that.


>
> >>
> >>Not really sure why this is required.  I am looking for usage patterns
> >>like
> >>this:
> >>
> >><Panel>
> >>    <HTMLText>{myFancyHTMLText}</HTMLText>
> >>    <Image></Image>
> >></Panel>
> >>
> >><TabNavigator>
> >>    <Tab>
> >>        <Button />
> >>        <HTMLText />
> >>    </Tab>
> >>    <Tab><HTMLText></Tab>
> >></TabNavigator>
> >>
> >>I guess the HTMLText component has to be a UIBase for this to work,
> >>right?
> >>
> >>Maybe I am not understanding the point you are trying to make.
> >
> >The above would likely create an HTML DOM like:
> >
> ><Div className="Panel">
> >  <Span>the HTML from myFancyHTMLText</Span>
> >  <Img />
> ></Div>
> >
> >
> >Carlos asked earlier about getting rid of the Span since we all know it is
> >legit to have the HTML DOM look like:
> >
> ><Div className="Panel">
> >  The HTML from MyFancyHTMLTExt
> >  <img />
> ></div>
> >
> >
> >I doubt if this HTML can be generated.  Are you sure there will be a
> >linebreak after the text?
>
> No.  I just added that to show the "children".
>
> >
> >That looks a TextNode element.  Which is lightweight than innerHTML  But
> >are we sure we don't want formatting for such text?  If we want to be able
> >to format, we need to use a p or a span element.
>
> AIUI, a TextNode is just plain text.  If the above was:
>
> <div className="Panel">
>   The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
>   <img />
> </div>
>
> There would be a TextNode for "The", a Bold node for "HTML", another
> TextNode for "from" etc.
>

What I meant was that HTML could be achieved by using the
document.createTextNode() function which creates a TextNode element.  i.e.
no need for a wrapping element like P or Span.  Sorry for the confusion.


>
>
> This doesn't feel right to me.  All of us seem tempted to want to define a
> scrap of complex HTML separate from other child controls in a container.
> If there was an HTML control, it would still add a wrapping element.  If
> you pull of a trick where the HTML control just injects the content, you
> run into more complexity dealing with numElements and childIndex.  It
> would be what the browser says it would be, but not quite as obvious from
> the MXML.
>
> On the other hand we have those thin-wrapping components like Div, and A
> and you ought to be a able to put in HTML content without it being wrapped
> by another layer.
>

Yes, I am in agreement with you here.  A div or span with innerHTML is more
than adequate for this usecase.


>
> >There is a cost in both development time and runtime performance to
> >generalizing this.  Should we do it?
> >
> >
> >Hmm,  I don't think this requires a change to MXML parsing.
>
> I think it does.  The default property is expected to be an array of
> Ichild elements.  When you have random HTML in the default property the
> compiler won't accept XML TextNodes in many places and where it does, it
> tries to concatenate TextNodes which is what we don't want.
>

I see.  I did not realize this point.  In any case, I would advice not
adding a random TextNode element like this.  This also brings more security
issues [1]

Thanks,
Om

[1] http://benv.ca/2012/10/02/you-are-probably-misusing-DOM-text-methods/



>
> Other opinions welcome...
> -Alex
>
>

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 12/31/16, 11:23 PM, "omuppi1@gmail.com on behalf of OmPrakash
Muppirala" <omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:
>
>Okay, I see your point now.  To be clear, I did not set out to write HTML
>code.  The bio in team.json is a html snippet.  So, I am just trying to
>display it as a piece of formatted data.  Even in other projects, I do
>need
>this kind of thing quite often.

IMO, this is use case #1: non-interactive HTML content.  We could just
have an HTML component with an "html" property.  But it would want to wrap
the content in a <div> or <span>

Case #2: In MXML, someone wants to mix FlexJS elements with random HTML.

Case #3: In MXML, someone wants to put in random HTML where one child HTML
tag has an id and wants to write code that addresses that id.

The cheap option is to only support #1 by creating an HTML component with
an "html" property.  Everything else needs more thinking, IMO.

>
>That brings up a related concern.  We need to sanitize such html content
>during runtime [1]

IMO, those are just utility functions.  Not everybody needs sanitization,
IMO, so PAYG.

>>
>>Not really sure why this is required.  I am looking for usage patterns
>>like
>>this:
>>
>><Panel>
>>    <HTMLText>{myFancyHTMLText}</HTMLText>
>>    <Image></Image>
>></Panel>
>>
>><TabNavigator>
>>    <Tab>
>>        <Button />
>>        <HTMLText />
>>    </Tab>
>>    <Tab><HTMLText></Tab>
>></TabNavigator>
>>
>>I guess the HTMLText component has to be a UIBase for this to work,
>>right?
>>
>>Maybe I am not understanding the point you are trying to make.
>
>The above would likely create an HTML DOM like:
>
><Div className="Panel">
>  <Span>the HTML from myFancyHTMLText</Span>
>  <Img />
></Div>
>
>
>Carlos asked earlier about getting rid of the Span since we all know it is
>legit to have the HTML DOM look like:
>
><Div className="Panel">
>  The HTML from MyFancyHTMLTExt
>  <img />
></div>
>
>
>I doubt if this HTML can be generated.  Are you sure there will be a
>linebreak after the text?

No.  I just added that to show the "children".

>
>That looks a TextNode element.  Which is lightweight than innerHTML  But
>are we sure we don't want formatting for such text?  If we want to be able
>to format, we need to use a p or a span element.

AIUI, a TextNode is just plain text.  If the above was:

<div className="Panel">
  The <b>HTML</b> from <strong>MyFancyHTMLTExt</strong>.
  <img />
</div>

There would be a TextNode for "The", a Bold node for "HTML", another
TextNode for "from" etc.


This doesn't feel right to me.  All of us seem tempted to want to define a
scrap of complex HTML separate from other child controls in a container.
If there was an HTML control, it would still add a wrapping element.  If
you pull of a trick where the HTML control just injects the content, you
run into more complexity dealing with numElements and childIndex.  It
would be what the browser says it would be, but not quite as obvious from
the MXML.

On the other hand we have those thin-wrapping components like Div, and A
and you ought to be a able to put in HTML content without it being wrapped
by another layer.

>There is a cost in both development time and runtime performance to
>generalizing this.  Should we do it?
>
>
>Hmm,  I don't think this requires a change to MXML parsing.

I think it does.  The default property is expected to be an array of
Ichild elements.  When you have random HTML in the default property the
compiler won't accept XML TextNodes in many places and where it does, it
tries to concatenate TextNodes which is what we don't want.

Other opinions welcome...
-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Dec 31, 2016 5:23 PM, "Alex Harui" <ah...@adobe.com> wrote:



On 12/31/16, 4:40 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>
>The question is does a HTMLText component exist in the default component
>set?  That is a common enough pattern that we do seem to need it to be
>part
>of the default component set.  Much like a button or an image.

Not yet.  Feel free to make DivWithText extending UIBase.  Really, my
original bet was that FlexJS was more about creating interactive sets of
controls and less on displaying HTML markup.  But it looks like I'm wrong
about that since this topic keeps coming up.


Okay, I see your point now.  To be clear, I did not set out to write HTML
code.  The bio in team.json is a html snippet.  So, I am just trying to
display it as a piece of formatted data.  Even in other projects, I do need
this kind of thing quite often.

That brings up a related concern.  We need to sanitize such html content
during runtime [1]


>
>Right now, we do not have a good way to display HTML content, while with
>direct HTML/JS development, that is a no-brainer operation.  We cannot
>ship
>without an easy way to display HTML.  Given that the runtime cost of this
>component is almost nothing, we really don't lose anything by having such
>a
>component.
>
>
>>
>> That said, it might be worth revisiting whether we can create
>>non-IUIBase
>> children in the default property for Containers.
>
>
>Not really sure why this is required.  I am looking for usage patterns
>like
>this:
>
><Panel>
>    <HTMLText>{myFancyHTMLText}</HTMLText>
>    <Image></Image>
></Panel>
>
><TabNavigator>
>    <Tab>
>        <Button />
>        <HTMLText />
>    </Tab>
>    <Tab><HTMLText></Tab>
></TabNavigator>
>
>I guess the HTMLText component has to be a UIBase for this to work, right?
>
>Maybe I am not understanding the point you are trying to make.

The above would likely create an HTML DOM like:

<Div className="Panel">
  <Span>the HTML from myFancyHTMLText</Span>
  <Img />
</Div>


Carlos asked earlier about getting rid of the Span since we all know it is
legit to have the HTML DOM look like:

<Div className="Panel">
  The HTML from MyFancyHTMLTExt
  <img />
</div>


I doubt if this HTML can be generated.  Are you sure there will be a
linebreak after the text?

That looks a TextNode element.  Which is lightweight than innerHTML  But
are we sure we don't want formatting for such text?  If we want to be able
to format, we need to use a p or a span element.

What happens to the layout is a different question.  TextNode and span are
inline.  Whereas p is a block element.


IOW, no wrapping HTMLElement for the text.  The MXML parser doesn't really
support random text nodes right now, and the UIBase parent/child is pretty
much expecting HTMLElements as children.

There is a cost in both development time and runtime performance to
generalizing this.  Should we do it?


Hmm,  I don't think this requires a change to MXML parsing.  I would rather
use a div and set innerHTML and be done with it.  There is also an
insertAdjacentHTML method that is apparently quite fast in some usecases.
[2]

Thanks,
Om

[1] https://en.m.wikipedia.org/wiki/HTML_sanitization
[2] https://developer.mozilla.org/en-US/docs/Web/API/Element/
insertAdjacentHTML

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 12/31/16, 4:40 PM, "omuppi1@gmail.com on behalf of OmPrakash Muppirala"
<omuppi1@gmail.com on behalf of bigosmallm@gmail.com> wrote:

>
>The question is does a HTMLText component exist in the default component
>set?  That is a common enough pattern that we do seem to need it to be
>part
>of the default component set.  Much like a button or an image.

Not yet.  Feel free to make DivWithText extending UIBase.  Really, my
original bet was that FlexJS was more about creating interactive sets of
controls and less on displaying HTML markup.  But it looks like I'm wrong
about that since this topic keeps coming up.

>
>Right now, we do not have a good way to display HTML content, while with
>direct HTML/JS development, that is a no-brainer operation.  We cannot
>ship
>without an easy way to display HTML.  Given that the runtime cost of this
>component is almost nothing, we really don't lose anything by having such
>a
>component.
>
>
>>
>> That said, it might be worth revisiting whether we can create
>>non-IUIBase
>> children in the default property for Containers.
>
>
>Not really sure why this is required.  I am looking for usage patterns
>like
>this:
>
><Panel>
>    <HTMLText>{myFancyHTMLText}</HTMLText>
>    <Image></Image>
></Panel>
>
><TabNavigator>
>    <Tab>
>        <Button />
>        <HTMLText />
>    </Tab>
>    <Tab><HTMLText></Tab>
></TabNavigator>
>
>I guess the HTMLText component has to be a UIBase for this to work, right?
>
>Maybe I am not understanding the point you are trying to make.

The above would likely create an HTML DOM like:

<Div className="Panel">
  <Span>the HTML from myFancyHTMLText</Span>
  <Img />
</Div>

Carlos asked earlier about getting rid of the Span since we all know it is
legit to have the HTML DOM look like:

<Div className="Panel">
  The HTML from MyFancyHTMLTExt
  <img />
</div>

IOW, no wrapping HTMLElement for the text.  The MXML parser doesn't really
support random text nodes right now, and the UIBase parent/child is pretty
much expecting HTMLElements as children.

There is a cost in both development time and runtime performance to
generalizing this.  Should we do it?

-Alex

Re: [FlexJS] How to add html content?

[OmPrakash Muppirala <bi...@gmail.com>]

On Sat, Dec 31, 2016 at 3:10 PM, Alex Harui <ah...@adobe.com> wrote:

>
>
> On 12/31/16, 8:52 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com>
> wrote:
>
> >Hi Alex,
> >
> >although I think that is a valid approach for other of components, I think
> >this is not in this case. Imagine users need to extend lots of containers
> >to append html text. I don't think that as an easy way. For that reason I
> >use to discuss with you how to do that.
> >
> >In use cases where the need is isolated and focused only on that case, I
> >think that's the way to go, but considere how many MDL containers we
> >hace....that approach would be very cumbersome for final users.
> >
> >For example in Grids.mxml I have
> >
> ><mdl:GridCell column="1"><mdl:beads><js:InnerHTML
> >text="1"/></mdl:beads></mdl:GridCell>
> >
> >Just to output a "1" inside a div. I think that, although more verbose is
> >the way to use in final app.For that case in particular...
>
> Well, IMO, we are in the business of looking for patterns and
> encapsulating them into components.  The whole point of composition is,
> once people get tired of typing "js:InnerHTML text=" that someone, maybe
> us, will publish a component that is GridCell with InnerHTML via a text or
> html property, just to save typing.  Can't really prevent it.
>

The question is does a HTMLText component exist in the default component
set?  That is a common enough pattern that we do seem to need it to be part
of the default component set.  Much like a button or an image.

Right now, we do not have a good way to display HTML content, while with
direct HTML/JS development, that is a no-brainer operation.  We cannot ship
without an easy way to display HTML.  Given that the runtime cost of this
component is almost nothing, we really don't lose anything by having such a
component.


>
> That said, it might be worth revisiting whether we can create non-IUIBase
> children in the default property for Containers.


Not really sure why this is required.  I am looking for usage patterns like
this:

<Panel>
    <HTMLText>{myFancyHTMLText}</HTMLText>
    <Image></Image>
</Panel>

<TabNavigator>
    <Tab>
        <Button />
        <HTMLText />
    </Tab>
    <Tab><HTMLText></Tab>
</TabNavigator>

I guess the HTMLText component has to be a UIBase for this to work, right?

Maybe I am not understanding the point you are trying to make.

Thanks,
Om




> We can probably modify
> the compiler to do it, but then components that need to handle mixed
> content have to have code that checks for mixed content which slows up
> startup time when lots of children are being created and added.
>
> Thoughts?
> -Alex
>
>

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

On 12/31/16, 8:52 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com> wrote:

>Hi Alex,
>
>although I think that is a valid approach for other of components, I think
>this is not in this case. Imagine users need to extend lots of containers
>to append html text. I don't think that as an easy way. For that reason I
>use to discuss with you how to do that.
>
>In use cases where the need is isolated and focused only on that case, I
>think that's the way to go, but considere how many MDL containers we
>hace....that approach would be very cumbersome for final users.
>
>For example in Grids.mxml I have
>
><mdl:GridCell column="1"><mdl:beads><js:InnerHTML
>text="1"/></mdl:beads></mdl:GridCell>
>
>Just to output a "1" inside a div. I think that, although more verbose is
>the way to use in final app.For that case in particular...

Well, IMO, we are in the business of looking for patterns and
encapsulating them into components.  The whole point of composition is,
once people get tired of typing "js:InnerHTML text=" that someone, maybe
us, will publish a component that is GridCell with InnerHTML via a text or
html property, just to save typing.  Can't really prevent it.

That said, it might be worth revisiting whether we can create non-IUIBase
children in the default property for Containers.  We can probably modify
the compiler to do it, but then components that need to handle mixed
content have to have code that checks for mixed content which slows up
startup time when lots of children are being created and added.

Thoughts?
-Alex

Re: [FlexJS] How to add html content?

[Carlos Rovira <ca...@codeoscopic.com>]

Hi Alex,

although I think that is a valid approach for other of components, I think
this is not in this case. Imagine users need to extend lots of containers
to append html text. I don't think that as an easy way. For that reason I
use to discuss with you how to do that.

In use cases where the need is isolated and focused only on that case, I
think that's the way to go, but considere how many MDL containers we
hace....that approach would be very cumbersome for final users.

For example in Grids.mxml I have

<mdl:GridCell column="1"><mdl:beads><js:InnerHTML
text="1"/></mdl:beads></mdl:GridCell>

Just to output a "1" inside a div. I think that, although more verbose is
the way to use in final app.For that case in particular...



2016-12-31 16:52 GMT+01:00 Alex Harui <ah...@adobe.com>:

> IMO, you could also create a new component called CardOfHTML (or something
> like that) and instead of extending ContainerBase, extend UIBase.  It
> would have "text" and "html" properties like Label and TextButton.  Then
> you could just do:
>
> <mdl:CardOfHTML>
>   This is some <h3>HTML</h3>content
> </mdL:CardOfHTML>
>
> You may need to wrap the content in a <p> or other top-level tag for now
> and specify XHTML as the default namespace.  IMO, we want these sorts of
> patterns to work since it is most like HTML coding.
>
> -Alex
>
> On 12/31/16, 3:14 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
> <carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com>
> wrote:
>
> >Hi Om,
> >
> >You can:
> >
> >* Use js:TextNode but this only supports plain text
> >* use a combination of js:TextNode with other components (js:Span,
> >js:Div...)
> >* use InnerHTML bead that support html text but removes the rest of nodes
> >
> >You can find examples of all this in MDLExample (you can search in code
> >for
> >this)
> >
> >
> >2016-12-31 10:21 GMT+01:00 OmPrakash Muppirala <bi...@gmail.com>:
> >
> >> I need to add html content in mdl:Card.  Is there a component that I can
> >> simply add to the display list and set htmlText?
> >>
> >> I see an InnerHTML bead.  That does not not seem to work when added to
> >>the
> >> display list.
> >>
> >> Thanks,
> >> Om
> >>
> >
> >
> >
> >--
> >
> >Carlos Rovira
> >Director General
> >M: +34 607 22 60 05
> >http://www.codeoscopic.com
> >http://www.avant2.es
> >
> >Este mensaje se dirige exclusivamente a su destinatario y puede contener
> >información privilegiada o confidencial. Si ha recibido este mensaje por
> >error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
> >proceda a su destrucción.
> >
> >De la vigente Ley Orgánica de Protección de Datos (15/1999), le
> >comunicamos
> >que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
> >S.A. La finalidad de dicho tratamiento es facilitar la prestación del
> >servicio o información solicitados, teniendo usted derecho de acceso,
> >rectificación, cancelación y oposición de sus datos dirigiéndose a
> >nuestras
> >oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
> >necesaria.
>
>


-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.

Re: [FlexJS] How to add html content?

[Alex Harui <ah...@adobe.com>]

IMO, you could also create a new component called CardOfHTML (or something
like that) and instead of extending ContainerBase, extend UIBase.  It
would have "text" and "html" properties like Label and TextButton.  Then
you could just do:

<mdl:CardOfHTML>
  This is some <h3>HTML</h3>content
</mdL:CardOfHTML>

You may need to wrap the content in a <p> or other top-level tag for now
and specify XHTML as the default namespace.  IMO, we want these sorts of
patterns to work since it is most like HTML coding.

-Alex

On 12/31/16, 3:14 AM, "carlos.rovira@gmail.com on behalf of Carlos Rovira"
<carlos.rovira@gmail.com on behalf of carlos.rovira@codeoscopic.com> wrote:

>Hi Om,
>
>You can:
>
>* Use js:TextNode but this only supports plain text
>* use a combination of js:TextNode with other components (js:Span,
>js:Div...)
>* use InnerHTML bead that support html text but removes the rest of nodes
>
>You can find examples of all this in MDLExample (you can search in code
>for
>this)
>
>
>2016-12-31 10:21 GMT+01:00 OmPrakash Muppirala <bi...@gmail.com>:
>
>> I need to add html content in mdl:Card.  Is there a component that I can
>> simply add to the display list and set htmlText?
>>
>> I see an InnerHTML bead.  That does not not seem to work when added to
>>the
>> display list.
>>
>> Thanks,
>> Om
>>
>
>
>
>-- 
>
>Carlos Rovira
>Director General
>M: +34 607 22 60 05
>http://www.codeoscopic.com
>http://www.avant2.es
>
>Este mensaje se dirige exclusivamente a su destinatario y puede contener
>información privilegiada o confidencial. Si ha recibido este mensaje por
>error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
>proceda a su destrucción.
>
>De la vigente Ley Orgánica de Protección de Datos (15/1999), le
>comunicamos
>que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
>S.A. La finalidad de dicho tratamiento es facilitar la prestación del
>servicio o información solicitados, teniendo usted derecho de acceso,
>rectificación, cancelación y oposición de sus datos dirigiéndose a
>nuestras
>oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
>necesaria.

Re: [FlexJS] How to add html content?

[Carlos Rovira <ca...@codeoscopic.com>]

Hi Om,

You can:

* Use js:TextNode but this only supports plain text
* use a combination of js:TextNode with other components (js:Span,
js:Div...)
* use InnerHTML bead that support html text but removes the rest of nodes

You can find examples of all this in MDLExample (you can search in code for
this)


2016-12-31 10:21 GMT+01:00 OmPrakash Muppirala <bi...@gmail.com>:

> I need to add html content in mdl:Card.  Is there a component that I can
> simply add to the display list and set htmlText?
>
> I see an InnerHTML bead.  That does not not seem to work when added to the
> display list.
>
> Thanks,
> Om
>



-- 

Carlos Rovira
Director General
M: +34 607 22 60 05
http://www.codeoscopic.com
http://www.avant2.es

Este mensaje se dirige exclusivamente a su destinatario y puede contener
información privilegiada o confidencial. Si ha recibido este mensaje por
error, le rogamos que nos lo comunique inmediatamente por esta misma vía y
proceda a su destrucción.

De la vigente Ley Orgánica de Protección de Datos (15/1999), le comunicamos
que sus datos forman parte de un fichero cuyo responsable es CODEOSCOPIC
S.A. La finalidad de dicho tratamiento es facilitar la prestación del
servicio o información solicitados, teniendo usted derecho de acceso,
rectificación, cancelación y oposición de sus datos dirigiéndose a nuestras
oficinas c/ Paseo de la Habana 9-11, 28036, Madrid con la documentación
necesaria.