Option 1: Rewrite the gadget on the fly, separate conflict element
O
adding a prefix or leveraging third party client side isolation solutio
such as Caja to do the isolation.
1) Add a prefix to the conflict elemen
1) Add a prefix to the conflict
1
HTML content on server side. ModuleId is unique to each gadget instance,
so use it as a prefix.
* Add a prefix to every global function and
* Add a prefix to
1. *Function definition: function methodName(){}
2. *Find the me
2. *Find the methodName using regular expression
3. *Global replace methodName to _moduleId_ metho
definition and reference
* Add the moduleId prefix as the parent c
* Add the moduleId
* Find all the fixed DOM id, add a moduleId prefix to the fixed
replace all the references to make it only apply to its self instance.
2)
2) Leverage Caja to do the rewrite (this method isolate on gadet type
2
level. So it will not fix the conflicting global variable and conflicti
DOM element issue, still need extra work to fix that) Caja is a system
th
that transforms ordinary HTML and JavaScript into a restricted form of
JavaScript. The transformation is called "cajoling", and the result is
"cajoled script". The cajoled script is then run within a security sandb
created in your browser. This provides a way to safely include arbitrary
t
third-party content on any Web page. Seems Caja is more of a JavaScript
scrubbing to prevent malware. Currently Caja works mostly in an iframe,
such as shindig, Yahoo.
Issues when leveraging Caja to render gadget i
Issues when leveraging
I
1. Caja can't support external JavaScript and CSS, n
1
ones.
2. If the gadget is rendered inline, only one gadget instance can w
2. I
2
well. If there are two gadget instance, Caja will report errors when
t
taming the functions at client. As for the same gadget, the cajoled sc
is the same. Still need differentiate them.
3. Rendering inline, the posi
3. Rendering inline, the position of the c
3
Cajoled script did something to change the Dom structure.
Pro: No impac
Pro: No impact to existing gadget. All the rewritten wil
P
the shindig rendering service internally.
Con: This method requires on
Con: This method requires one strong too
C
syntax to do the replace, do the javascript syntax analysis to find the
m
method definition and replacement as well as the fixed DOM id definition.
Currently there isn't a available tool to leverage. Also, to the
develope
developers, they might get confused as their code has been replace
they debug their gadget on the client side.
<Kris>I was hoping we shoul
<Kris>I was hoping we should keep Caja out
<
Cajoling has many limitations tha are still getting worked out. Once
have the base working exploring caja for sandoxing gadgets will be a good
option. Another option is to explore OAHub for sandboxing the gadgets
</K
</Kris>
Option 2: Add additional restriction into gadget XML to isol
Option
O
instances under inline model. Define one scope object to gadget definition
to scope all the JavaScript/CSS/HTML under that object. Each gadget
instan
instance has one scope object. Scope object for each gadget instance
different. This approach requires the gadget developer to adhere to some
guidelines to rewrite their gadget. This approach is similar to IBM iWdget
isolation solution.
The gadget developer only responsible for declaring t
The gadget develop
T
encapsulate the functions to the scope, but not control the instance.
S
Shindig will create the instance and make sure every call is controlled
that instance. Shindig will create a global context and make the scope as
a property just like iWidget. This requires adding a snippet of script
wh
when rendering. To separate the added snippet script and the script in t
gadget, the gadget developer should delegate the life cycle of gadget to
S
Shindig instead of itself. For example, the developer shouldn't
callgadg
callgadgets.util.registerOnLoadHandleronLoad function on the scop
such as: this.onLoad = function() {this.getHtml();}; and call this
functi
function by Shindig. The snippet is like: first define a contextImpl
object (This will be implemented as a new feature call core.context to
make it can be utilized by rendering in iframe. For if the rewritten
g
gadget need be rendered in iframe, still need call the onLoad function
which is in the contextImpl.):
function contextImpl(obj,gid){
this.s
function contextImpl(obj,gid)
f
this.scope = obj;
this.scope.c
this.scope.context
this.getGID = function(){re
this.getRootElement = function(){};
th
this.getElementById = function(id,ro
this.onLoad = function(){
gadgets.util.reg
gadgets.util.registerOnLoa
if(obj.onLoad){
obj.onLoad.apply(obj);
}
});
obj.onLoad.apply
}
});
}
};
The co
})
}
}
};
T
T
other method for developer to use, such as getElementById.etc.
Then w
Then when rendering, Shindig will inject some code to create
T
superclass, like:
__GID__context = new contextImpl(new scopeNam
__GID__context =
_
__GID__context.onLoad(); Common guidelines:
1.Defin
_
1.Define an object to encapsulate the func
1
it from each other. It is important that all JavaScript variables and
fu
functions are scoped down to a gadget instance by using the &this8
JavaScript keyword. This implies that the gadget developer is using an
Scope object which is scoped to each gadget instance.
2. Leverage M
2. Leverage ModuleId as the prefix. Every artifact
2
scoped to its instance id which is the moduleId. This value can be
rep
replaced by the real value at run time.
<div id="__MODULE_ID___cont
<div id="__MODULE_ID___content_div" clas
id="0_content_div" class="content"> </div>
This makes the ID attribute
This makes the ID attributes safe against o
instances of the same type. If you are omitting the use of the MODULE
constant, you may experience ID clashes which may result in your gadgets
not working correctly.
3. Define an onLoad function to each gadget, don
3. Define an onLoad f
3
gadgets.util.registerOnLoadHandlerClear and simple to sol
conflict issue.
2) Developers can easily navigate each gadget 's context
2) Developers
2
firebug.
Con:
1) Require gadget developer to rewrite his gadg
Con
C
1)
1
2) Require add an attribute "scope" to the gadget spec and then use t
2
scope value to encapsulate the whole functions.
A sample gadget aft
A sample gadget after rewritten:
<?xml
A
<?xml version="1.0" encoding="U
<
<Module>
<ModulePrefs title="SampleGad
<ModulePr
scope="org.apache.shindig.smapleGadget">
<R
<Require feature="settitle"/>
<Require f
<Require feature="dynamic-heig
</ModulePrefs>
<Content type="html">
<![CDA
<Content type="
<![CDATA[
<style type
<style typ
.org-apache-shindig-smap
.org-apache-shindig-smapleGadget a:visited {color:#5
.org-apache-shindig-smapleGadget .content{ margin: 20px 40px
.org-apache-shindig-smapleGadget .button{
background:none repe
background:none repeat scroll 0 0 Cornflow
margin:0 30px;
}
</style>
<script type="text/ja
}
</style>
<s
</
<script t
gadgets.window.setTitle('Communi
org = {apache: {shindig: {smapleGadget: {~}}}};
org.apa
org.apache.shindig.smapleGadget = function (){
var state = 0;
var prefs = new gadgets.Prefs(~
var prefs = new
var entries = prefs.getInt("num_entries");
this
this.getPref = function(){
return prefs;
return prefs;
};
this.c
};
this.cha
t
t
state ++;
};
this.getState
};
this
t
t
alert(state);
};
this.ge
};
this.get
t
t
var params = {};
params[ga
params[gadgets.io
params[gadgets.io.RequestParameters.CONTENT_TYPE] =
gadge
gadgets.io.ContentType.FEED;
params[gadgets.io.Reque
params[gadgets.io.RequestPara
var url = "http:~//localhost:8080/vulcan/shindig/container/community.xml
gadgets.io.makeRequest(url, this.processRes, params);
};
this.processRe
};
this.processRes = function(obj){
var feed = obj
t
t
var feed = obj.data;
var html =
var html = "";
html
html += "<div><
html += "<div>" + feed.Author + "</div><br>";
i
if (feed.Entry) {
for (var i = 0; i < feed.En
for (var i = 0; i
html += "<div>"
+ "<a target='_blank' href='"
+ "<a target='_b
+ feed.Entry[i].Title
+ "</a> ";
html += "</div>";
}
}
+ "</a> ";
html += "<
html += "</
}
}
document.get
}
do
gadgets.window.adjustHeight();
};
this.onLoad = function() {
};
this.onLoad = function()
t
t
this.getHtml();
};
};
};
};
</scri
};
<
<
<div id=
<
<h3>
<span >My Communities</span>
</h3>
<div id="~__GID~__content_
<span
</h3>
<div id="~__GID~__co
<div
<
<input type="button" class="button" value="Change Sta
<
onclick="~__GID~__context.scope.changeState(); return fals
<input type="button" class="button" value="Read State"
onclick
onclick="~__GID~__context.scope.getState(); return false
</div>
]]>
</Content>
</Module>
Conclusion: Optio
<
]]>
]
</Co
</Module>
Conclu
C
replacement on the fly. For gadget developers, they might get confused a
gadget client side code is rewritten by Shindig server. Option 1 requries
a strong HTML/CSS/JavaScript syntax analysizer. Option 2 add additional
r
restrictions to gadget spec to support gadget instance isolation with
i
inline rendering model. It is developer's responsibility to handle the
conflict.
Do you think it make sense?
Thanks
Best Regards,
Q
Do you t
D
Thanks
Best Regards,
T
Best Re
Qiao Yun, Su
Q
IBM Project Vulcan De
China Software Development Lab(
Email:[email protected]
Tel: (86-10)
Tel: (86-10) 82451085
�n��: �k���s�C
Address: 2F, NO. 28 BUILDING, ZHONG GUAN CUN SOFTWARE PARK, NO.8
DONGBEIWANG WESTEN ROAD, BEIJING, 100Address: 2F, NO. 28 BUILDING, ZHONG GUAN
CUN SOFTWARE PARK, NO.8
DONGBEIWANG WESTEN ROAD, BEIJING, 100193
From:
Jasvir Nagra <[email protected]>
To:
[email protected]
Date:
11/03/2010 01:50 PM
Subject:
Re: Inline gadget rendering as a feature
Sorry that was perhaps less than helpful. I looked over the thread you
referenced and I think a few clarifications are needed. I realized there
is
a mis-interpretation that Caja is primarily aimed at "addressing malware
and
security concerns". The point is that the accidental problems that you
mention above _are_ the security concerns Caja is concerned with - when
they
occur in trusted code, they cause the functionality to break. We simply
happen to treat both this unintended incorrectness in trusted code along
with deliberate attack by untrusted code as different instances of the
same
class of problem - that of isolation.
If you are willing to ignore the javascript problem - which is the source
of
most of the complexity - you be mostly able to isolate html and css by:
* rewriting all ids with a instance-based prefix
* creating a new div with an class id that has an instance-based prefix
* clipping to this div (this prevents a gadget from accidentally using
absolute positioning)
* rewriting all classes in the gadget to be scope to that instance-based
prefix
If you are not rewriting javascript, the problem then becomes one of
asking
that gadget developers use your apis to get and set html elements in the
gadget (including when setting innerHTML) so that they actually get the
right elements and don't accidentally clobber another gadget instance that
has been inlined.
On Tue, Nov 2, 2010 at 10:20 PM Jasvir Nagra <[email protected]>wrote:
> This is just one of the many problems with inlining two or more gadgets
> gets you. The others include but aren't limited to:
>
> * css styles defined in one gadget will apply on other gadgets with
> elements, classes, ids or other selectors that match
> * javascript functions and globals between gadgets that conflict
> * event handlers in one gadget bind to the wrong instance
> * modification of javascript prototype objects in one gadget conflict
with
> others
> * xml namespaces defined in one gadget bleed into another
>
> What you need is to be able to turn a block of html, css and javascript
> into a closed function that you're able to instantiate multiple times,
with
> each instance getting a fresh copy of those properties it wishes to be
able
> to modify. This is the property that Caja gives you. Cajoling a block
of
> html, css and javascript gives you a block of html and javascript that
is
> safe for inlining multiple times. The difficulty in the case of Shindig
> (which we are working on resolving and why inlining with Caja is not
checked
> in today) arises not from inlining html and css which are solved
problems
> but from exposing the opensocial and other gadget apis to inlined code.
> These apis modify the javascript prototypes and other DOM objects on
behalf
> of gadgets and are a means by which otherwise isolated gadgets may
interfere
> with each other.
>
> On Tue, Nov 2, 2010 at 9:43 PM, Kai Feng Zhang <[email protected]>
wrote:
>
>> The first problem inline gadget rendering needs to solve is about
>> namespacing conflict.
>>
>> Since some gadget declare a unique identifier for some element in dom,
>> such
>> as <div id="hello">, if this gadget is rendered with inline multiple
times
>> on same page, it's a problem of element id conflict.
>>
>> As our former implementation(in original patch to support inline) is
based
>> on the iWidget context concept and request the gadget developer to
rewrite
>> their gadget with a scope, which will generate a unique identifier for
>> each
>> element in inline gadget, to avoid namespacing conflict issue.
>>
>> It might be a little reluctant for gadget developer to accept and it
also
>> needs effort to rewrite thousands of existing gadgets. So we did not
>> enable
>> this implementation in our new inline patch.
>> https://issues.apache.org/jira/browse/SHINDIG-1402
>>
>> But currently seems we didn't find a better way to solve it. So could
>> someone please review and propose any better way to do solve this
>> namespacing problem?
>>
>>
>> Thanks.
>>
>> Best Regards,
>>
>> Kevin, Zhang Kai Feng
>> IBM Project Vulcan Development
>> IBM China Software Development Lab
>>
>>
>>
>> On Wed, Nov 3, 2010 at 12:29 PM, Kai Feng Zhang <[email protected]>
>> wrote:
>>
>> > Hi,
>> >
>> > We originally posted inlining work directly into the existing
container
>> > shindig-container/server side components... see
>> > https://issues.apache.org/jira/browse/SHINDIG-1402
>> >
>> > After reviewing some of these changes and learning more about the
>> features,
>> > we've stepped back and refactored those changes as a feature on the
>> common
>> > container. I add a new patch, which is based on new common container
as
>> well
>> > as its new patch: https://issues.apache.org/jira/browse/SHINDIG-1460
>> >
>> > After apply the patch, access
>> > http://localhost:8080/container/helloworld_common3.html you would see
>> the
>> > inline gadget and iframe gadget being rendered on same page, though
they
>> are
>> > helloworld gadgets. Gadget requires "inline" feature will be
rendered
>> as
>> > inline one.
>> >
>> > Have to say that introducing inline rendering would cause much
problem
>> for
>> > gadget features, since most of them are design specially for iframe
>> > rendering gadget. We will post the impacted aspects in following
>> comments.
>> >
>> >
>> >
>> > Best Regards,
>> >
>> > Kevin, Zhang Kai Feng
>> > IBM Project Vulcan Development
>> > IBM China Software Development Lab
>> >
>> >
>>
>
>
