adam peller interoperable ajax tools and mashups

Interoperable Ajax Tools and Mashups

Jon FerraioloAdam PellerIBM and OpenAjax Alliance

Sept. 14, 2009

2Interoperable Ajax Tools and Mashups

Agenda

Introducing OpenAjax Alliance Interoperability with Ajax Tools – OpenAjax

Metadata Interoperability with Ajax Mashups –

OpenAjax Hub Demo, Wrap-up, Q&A




3Interoperable Ajax Tools and Mashups 3

OpenAjax Alliance

Consortium of leading vendors, open source projects, and individual members

Mission is to promote success of Open Web technologies, particularly Ajax (HTML + JavaScript + …)

Key focus is interoperability - ability to mix and match solutions from Ajax technology providers

Consortium of leading vendors, open source projects, and individual members

Mission is to promote success of Open Web technologies, particularly Ajax (HTML + JavaScript + …)

Key focus is interoperability - ability to mix and match solutions from Ajax technology providers

4Interoperable Ajax Tools and Mashups 4

Membership

120 members, mostly companies, some individuals

Big guys: Cisco, Google, IBM, Oracle, SAP

Ajax toolkits: Backbase, Dojo, DWR, jQuery, Laszlo

Tools: Adobe, Aptana, Eclipse, IBM/Rational, Microsoft

Mobile: FranceTelecom/Orange, Opera, Vodafone

Other standards organizations: Eclipse, HR-XML, W3C

Ajax “users”: American Greetings, Fidelity, MITRE

120 members, mostly companies, some individuals

Big guys: Cisco, Google, IBM, Oracle, SAP

Ajax toolkits: Backbase, Dojo, DWR, jQuery, Laszlo

Tools: Adobe, Aptana, Eclipse, IBM/Rational, Microsoft

Mobile: FranceTelecom/Orange, Opera, Vodafone

Other standards organizations: Eclipse, HR-XML, W3C

Ajax “users”: American Greetings, Fidelity, MITRE


OpenAjax Alliance Scope of Activities

Interoperability Ajax IDEs (OpenAjax Metadata for JS APIs and Widgets)

today’s focus Mashups and widgets (OpenAjax Hub 2.0 & Metadata) today’s

focus Ajax client libraries (OpenAjax Registry)

Browser wishlist 2008: chaired by Nexaweb and IBM 2009: chaired by Microsoft

Ajax Security White paper: “Ajax and Mashup Security” Mashup single sign-on

Mobile Ajax White paper: “Introduction to Mobile Ajax for Developers” Device APIs initiative (2007-2008, transitioned to OMTP and W3C)

Ajax Accessibility RIA accessible tooling – conformance requirements, tools and

best practices

Marketing, education and evangelism

Interoperability Ajax IDEs (OpenAjax Metadata for JS APIs and Widgets)

today’s focus Mashups and widgets (OpenAjax Hub 2.0 & Metadata) today’s

focus Ajax client libraries (OpenAjax Registry)

Browser wishlist 2008: chaired by Nexaweb and IBM 2009: chaired by Microsoft

Ajax Security White paper: “Ajax and Mashup Security” Mashup single sign-on

Mobile Ajax White paper: “Introduction to Mobile Ajax for Developers” Device APIs initiative (2007-2008, transitioned to OMTP and W3C)

Ajax Accessibility RIA accessible tooling – conformance requirements, tools and

best practices

Marketing, education and evangelism


Agenda








What should be possible

(JSDT and WTP)

Ajax Developer Tools:

(and many more ….)

Ajax Toolkits:

• Dojo/Dijit

• ExtJS

• jQuery/jQueryUI

• MooTools

• Prototype

• qooxdoo

• script.aculo.us

• Spry

• YUI

(and countless more ….)

Plug-and-Play Interoperability


Key IDE features to enable

Code assistCode assist WYSIWYG authoringwith widgets

WYSIWYG authoringwith widgets


What we have today A sparse matrix

Only a small percentage of matches between N toolkits x M tools

Monolithic tool/toolkit combinations In order to use a particular developer tool, you have to commit to a

particular platform Examples: Backbase, Dreamweaver CS3, Ext 2.0 IDE, TIBCO GI,

WaveMaker

A handful of tools support multiple Ajax toolkits by leveraging abstractions Aptana:

• Intelligent code assist for Dojo, Ext, jQuery, MochiKit, MooTools, Prototype, script.ac.ulous, Spry

• Achievable via ScriptDocXML and OpenAjax Metadata (for JavaScript APIs)

Adobe Dreamweaver CS4• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via Dreamweaver Extensions and OpenAjax Metadata (for

Ajax widgets) Eclipse JSDT

• Intelligent code assist for OpenAjax Metadata (for JavaScript APIs) IBM Rational Application Developer

• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via OpenAjax Metadata (for Ajax widgets)

A sparse matrix Only a small percentage of matches between N toolkits x M tools

Monolithic tool/toolkit combinations In order to use a particular developer tool, you have to commit to a

particular platform Examples: Backbase, Dreamweaver CS3, Ext 2.0 IDE, TIBCO GI,

WaveMaker

A handful of tools support multiple Ajax toolkits by leveraging abstractions Aptana:

• Intelligent code assist for Dojo, Ext, jQuery, MochiKit, MooTools, Prototype, script.ac.ulous, Spry

• Achievable via ScriptDocXML and OpenAjax Metadata (for JavaScript APIs)

Adobe Dreamweaver CS4• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via Dreamweaver Extensions and OpenAjax Metadata (for

Ajax widgets) Eclipse JSDT

• Intelligent code assist for OpenAjax Metadata (for JavaScript APIs) IBM Rational Application Developer

• Widget support for any Ajax library (Dojo, jQueryUI, Ext, Spry, YUI, etc.)• Achievable via OpenAjax Metadata (for Ajax widgets)

10


Leading developer tools came together in the OpenAjax Alliance

IDE Working Group Aptana Studio

Adobe Dreamweaver (Spry toolkit)

Eclipse JSDT

Microsoft Visual Studio (ASP.NET AJAX toolkit)

IBM Rational Application Developer

Sun jMaki/Netbeans

TIBCO (GI toolkit)

OpenLink SW (OAT framework)

Aptana Studio

Adobe Dreamweaver (Spry toolkit)

Eclipse JSDT

Microsoft Visual Studio (ASP.NET AJAX toolkit)


Sun jMaki/Netbeans

TIBCO (GI toolkit)

OpenLink SW (OAT framework)

11


Advantages of universal plug&play

Standards improve industry efficiency Ajax tools only have to consume a single standard format

in order to work with all toolkits Ajax toolkits only have to generate a single standard

format in order to work with all tools Tools and toolkits don’t have to have one-off meetings to

coordinate integration efforts (and continue to meet with each new release)

Standards unlock innovation Toolkit and tool developers can work on important new

features

Ajax developers can choose best-of-breed solutions Ajax should not have to commit to a particular toolkit in

order to use a particular developer tool

Standards improve industry efficiency Ajax tools only have to consume a single standard format

in order to work with all toolkits Ajax toolkits only have to generate a single standard

format in order to work with all tools Tools and toolkits don’t have to have one-off meetings to

coordinate integration efforts (and continue to meet with each new release)

Standards unlock innovation Toolkit and tool developers can work on important new

features

Ajax developers can choose best-of-breed solutions Ajax should not have to commit to a particular toolkit in

order to use a particular developer tool

12


Solution: OpenAjax Metadata OpenAjax Metadata for JavaScript APIs

Embraced an industry leader: Aptana ScriptDoc XML Standard stuff: <class>, <namespace>, <method>,

<parameter>, etc. Open source

• JSDoc to OpenAjax Metadata (extension to JSDoc Toolkit)• YUI to OpenAjax Metadata (and probably vice versa)

OpenAjax Metadata for Widgets Embraced an industry leader: Adobe Dreamweaver

widget format Standard stuff: <widget>, <content>, <require>,

<author>, <icon>, etc. Open source

• OpenAjax widget loader• Sample widgets• Reference implementation of a simple mashup editor

OpenAjax Metadata for JavaScript APIs Embraced an industry leader: Aptana ScriptDoc XML Standard stuff: <class>, <namespace>, <method>,

<parameter>, etc. Open source

• JSDoc to OpenAjax Metadata (extension to JSDoc Toolkit)• YUI to OpenAjax Metadata (and probably vice versa)

OpenAjax Metadata for Widgets Embraced an industry leader: Adobe Dreamweaver

widget format Standard stuff: <widget>, <content>, <require>,

<author>, <icon>, etc. Open source

• OpenAjax widget loader• Sample widgets• Reference implementation of a simple mashup editor

13


OpenAjax Metadata: why XML (vs JSON)?

Started from two existing XML formats JavaScript APIs: Aptana ScriptDoc XML Widgets: Adobe Dreamweaver widget format

XML had a couple of advantages Validation – could provide validation tool for developers to

check their files Extensibility – via namespaces (Dreamweaver uses this in a

couple of places)

But OAA members realize the benefits of JSON, so: Designed XML format so that there was a straightforward

mapping into JSON Architected the open source implementation into two

phases• Step 1: XML to JSON preprocessor (can be done on server or

batch process)• Step 2: All subsequent logic uses the JSON

Future version of OpenAjax Metadata might define a JSON option version 1.1?

Started from two existing XML formats JavaScript APIs: Aptana ScriptDoc XML Widgets: Adobe Dreamweaver widget format

XML had a couple of advantages Validation – could provide validation tool for developers to

check their files Extensibility – via namespaces (Dreamweaver uses this in a

couple of places)

But OAA members realize the benefits of JSON, so: Designed XML format so that there was a straightforward

mapping into JSON Architected the open source implementation into two

phases• Step 1: XML to JSON preprocessor (can be done on server or

batch process)• Step 2: All subsequent logic uses the JSON

Future version of OpenAjax Metadata might define a JSON option version 1.1?

14


OpenAjax Metadata for JavaScript APIs

Sample JavaScript with JSDoc

/** * Processes a method found in the JSDoc data structure. * Produces an OpenAjax 'method' element. * @param {object} method JSDoc object that holds info on this method * @param {number} indent Current indent level for pretty printing */ this.method_element = function(method, indent) { … }

Corresponding OpenAjax Metadata

<method name="method_element"> <description> Processes a method found in the JSDoc data structure. Produces an OpenAjax 'method' element. </description> <parameter name="method" datatype="Object" usage="required"> <description>JSDoc object that holds info on method</description> </parameter> <parameter name="indent" datatype="Number" usage="required"> <description>Current indent level for pretty printing</description> </parameter> </method>





15











16



Main elements

<alias> <ancestor> <class> <constructor> <event> <exception> <globals> <handlerFunction> <interface> <method> <mix> <mixin> <namespace> <parameter> <property> <returnType> <singleton>

Main elements

<alias> <ancestor> <class> <constructor> <event> <exception> <globals> <handlerFunction> <interface> <method> <mix> <mixin> <namespace> <parameter> <property> <returnType> <singleton>

Other features

Localization (compatible with OpenSocial) Descriptive metadata:<description>, <shortDescription>, <example>, etc. Datatypes: ‘datatype’ and ‘format’

attributes‘format’ is mostly for widgets. Gives hint to IDE about what

type of special UI to use within property editor. For example, format=“color” might result in color picker.

Enumerations: <enum>, <options>, <option>

Object literals: <config> Required vs. optional #Occurrences (e.g., zero or more, exactly

one, …) Function prototype definitions<parameter name=“foo” datatype=“Function”> <parameter name=“opts” datatype=“Object”/></parameter> Factory methods Compatibility metadata<userAgent>, <available>, <deprecated> Variable substitutionPrimary usage scenario are widgets.

Other features

Localization (compatible with OpenSocial) Descriptive metadata:<description>, <shortDescription>, <example>, etc. Datatypes: ‘datatype’ and ‘format’

attributes‘format’ is mostly for widgets. Gives hint to IDE about what

type of special UI to use within property editor. For example, format=“color” might result in color picker.

Enumerations: <enum>, <options>, <option>

Object literals: <config> Required vs. optional #Occurrences (e.g., zero or more, exactly

one, …) Function prototype definitions<parameter name=“foo” datatype=“Function”> <parameter name=“opts” datatype=“Object”/></parameter> Factory methods Compatibility metadata<userAgent>, <available>, <deprecated> Variable substitutionPrimary usage scenario are widgets.

17


Tool support (JS APIs) Eclipse provides JavaScript

code assist via JSDT using OpenAjax Metadata

Has been shipping support for OpenAjax Metadata since late 2008

Aptana provides JavaScript code assist for any of the following:

ScriptDocXML or OpenAjax Metadata files (two formats are very similar)

ScriptDoc inline comments (similar to JSDoc)

http://aptana.com/dev/index.php/Adding_support_for_a_new_Ajax_library#Adding_Code_Assist

Microsoft Visual Studio Regular attendee in

committee meetings, valuable contributions, but no public statements so far about product support

Eclipse provides JavaScript code assist via JSDT using OpenAjax Metadata

Has been shipping support for OpenAjax Metadata since late 2008

Aptana provides JavaScript code assist for any of the following:

ScriptDocXML or OpenAjax Metadata files (two formats are very similar)

ScriptDoc inline comments (similar to JSDoc)

http://aptana.com/dev/index.php/Adding_support_for_a_new_Ajax_library#Adding_Code_Assist

Microsoft Visual Studio Regular attendee in

committee meetings, valuable contributions, but no public statements so far about product support

Mozilla Bespin Under consideration

18


OpenAjax Metadata for Widgets<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>

<widget name="Dojo Calendar" id="http://openajax.org/samples/widgets/calendar" spec="1.0" jsClass="Calendar" width="155" height="185" sandbox="true" xmlns="http://openajax.org/metadata"> <require type="javascript" src="calendar.js"/> <library name="dojo" version="1.3“ src="http://ajax.googleapis.com/ajax/libs/dojo/1.3/"> <preload> djConfig = { isDebug: false, parseOnLoad: false, afterOnLoad: true }; </preload> <require type="javascript" src="dojo/dojo.xd.js"/> <require type="css" src="dojo/resources/dojo.css"/> <require type="css" src="dijit/themes/dijit.css"/> <require type="css" src="dijit/themes/dijit_rtl.css"/> <require type="css" src="dijit/themes/tundra/Calendar.css"/> <require type="css" src="dijit/themes/tundra/Calendar_rtl.css"/> </library> <property name="date" datatype="Date" defaultValue="" sharedAs="date"/> <content> <![CDATA[ <div id="__WID___calendar" class="tundra" style="background-color:#f5f5f5" dojoType="dijit._Calendar" /> ]]> </content></widget>

19




<widget> is the root element.

20




<library> and <require> elements identify the dependencies, such as the Ajax libraries and supplemental files (e.g., calendar.js) needed by this widget.

21




<property> elements specify the list of widget parameters that should appear in property editor dialogs.

You can make the widget “mashable” by enabling cross-widget property sharing via the ‘sharedAs’ attribute and cross-widget pubsub via the <topic> element (not shown).

22




<content> element contains the HTML snippet for the visual rendering of the widget.

23


Industry support (Widgets) Dreamweaver CS4 uses OpenAjax

Widgets as a preferred way to import contributed widgets With CS4, transitioned from

Dreamweaver’s old proprietary widget format to OpenAjax’s format

Works with most Ajax toolkits: Dojo, ExtJS, jQueryUI, YUI, etc.

Can post your widgets at Dreamweaver Exchange

http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager:Developer%27s_Guide_to_the_WDF


IBM Blue Spruce: “Collaborative Web”

Demos or in process: IBM Mashup Center, TIBCO, SAP, RadWebTech

Dreamweaver CS4 uses OpenAjax Widgets as a preferred way to import contributed widgets With CS4, transitioned from

Dreamweaver’s old proprietary widget format to OpenAjax’s format

Works with most Ajax toolkits: Dojo, ExtJS, jQueryUI, YUI, etc.

Can post your widgets at Dreamweaver Exchange

http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager:Developer%27s_Guide_to_the_WDF


IBM Blue Spruce: “Collaborative Web”

Demos or in process: IBM Mashup Center, TIBCO, SAP, RadWebTech

24


OpenAjax Metadata 1.0: current status Specification – in final review phase

http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification Word-for-word proofreading of the spec Should finish review in Oct 2009 Then send to members for finalization and approval (Nov 2009?)

Open source implementations Eclipse JSDT has implemented the JavaScript API features OpenAjax widget loader has implemented the widget features

(@OAA) Sample mashup application uses the widget loader (@OAA) and

provides sample widgets JSDoc to OpenAjax Metadata converter (@OAA) YUI to Openajax Metadata converter (@OAA) Dojo XML file for API docs is 90% the same as OpenAjax Metadata

Commercial implementations (described earlier) Adobe Dreamweaver, Aptana, IBM Rational Application Developer,

Lotus Mashups, SAP, TIBCO

Formal language schema and validator http://www.openajax.org/schema/OpenAjaxMetadata/1.0/

ValidatorPage.php

Futures – version 1.1 of OpenAjax Metadata? JSON version of OpenAjax Metadata (in addition to current XML version)? JSDoc standards?

Specification – in final review phase http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification Word-for-word proofreading of the spec Should finish review in Oct 2009 Then send to members for finalization and approval (Nov 2009?)

Open source implementations Eclipse JSDT has implemented the JavaScript API features OpenAjax widget loader has implemented the widget features

(@OAA) Sample mashup application uses the widget loader (@OAA) and

provides sample widgets JSDoc to OpenAjax Metadata converter (@OAA) YUI to Openajax Metadata converter (@OAA) Dojo XML file for API docs is 90% the same as OpenAjax Metadata

Commercial implementations (described earlier) Adobe Dreamweaver, Aptana, IBM Rational Application Developer,

Lotus Mashups, SAP, TIBCO

Formal language schema and validator http://www.openajax.org/schema/OpenAjaxMetadata/1.0/

ValidatorPage.php

Futures – version 1.1 of OpenAjax Metadata? JSON version of OpenAjax Metadata (in addition to current XML version)? JSDoc standards?

http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification

http://www.openajax.org/member/wiki/OpenAjax_Metadata_1.0_Specification

25

Demo: OpenAjax Sample Mashup Application

http://www.openajax.org/samples/mashupapp/gadgets/samples/ from OpenAjax interopFest 2008 Test implementation for metadata spec

http://www.openajax.org/samples/mashupapp/gadgets/samples/ from OpenAjax interopFest 2008 Test implementation for metadata spec

25

26


OpenAjax Hub 1.0 – an example

OpenAjax Hub 1.0 Example

This is a mockup of a Web application that uses UI controls from multiple Ajax toolkits.

Assume multiple Ajax toolkits:• UTILS.js – Various utils, inc. XHR

• CALENDAR.js – Calendar control

• DATAGRID.js – Powerful tables

• CHARTS.js – Charting utilities

The visual controls need to react to new server data and to each other and update their views appropriately.

27


Example – under the hood

<html> <head> ... <script type="text/javascript" src="OpenAjax.js"/> <script type="text/javascript" src="UTILS.js"/> <script type="text/javascript" src="CALENDAR.js"/> <script type="text/javascript" src="CHARTS.js"/> <script type="text/javascript" src="DATAGRID.js"/> <script type="text/javascript"> ... function MyCalendarCallback(...) { OpenAjax.hub.publish("myapp.newdate", newdate); } ... function NewDateCallback(eventname, publisherData, subscriberData) { ...update the given visualization widget... } OpenAjax.hub.subscribe("myapp.newdate", NewDateCallback); ... </script> </head> ...

28

Demo: OpenAjax Sample Mashup Pub-Sub example

http://www.openajax.org/samples/mashupapp/gadgets/samples/ data visualization example

http://www.openajax.org/samples/mashupapp/gadgets/samples/ data visualization example

http://www.openajax.org/samples/mashupapp/gadgets/samples/




29


Agenda







30

Mashup Applications

Combining data sources or services to create a new application

Easy, fast integration

Combining data sources or services to create a new application

Easy, fast integration

30

31


Two types of mashups

Programmer mashups Web developer creates a mashup by coding in HTML

and JavaScript

End-user mashups Non-programmer builds a mashup using mashup

assembly software

OpenAjax Hub Applies to both But particularly focused on special requirements of

end-user mashups

Programmer mashups Web developer creates a mashup by coding in HTML

and JavaScript

End-user mashups Non-programmer builds a mashup using mashup

assembly software

OpenAjax Hub Applies to both But particularly focused on special requirements of

end-user mashups

32


End-user mashups – the self-service business pattern

33


Business value of end-user mashups

• Faster, cheaper delivery of applications• Save time and money through reuse and

lightweight integration techniques• Lower skill set needed to assembly new

applications• Support innovation and new business

opportunities• Users empowered to innovate and explore• Gain valuable insights• Due to remixing enterprise and web

information• Better align IT and business• Do-it-yourself IT will be expected by

Facebook generation • Extend reach and value of SOA• Service reuse illuminates the business value

of SOA

34


Mashup software

• Mashup tools• Widget and feed discovery• Application assembly• Instant deployment

• Mashable Widgets • Pre-packaged, remixable mini-applications• Usually tied to a back-end web service• Sometimes leveraging previous investment in

SOA• Public or company-private

35

IBM Lotus Mashups

36

IBM Project “Blue Spruce”

collaborativeinteractive mashups

37


Widget innovation – no shortage

Widgets are the natural evolution path for Web Services and SOA•A widget represents the pre-packaged browser UI for a Web Services (SOA or WOA)•Already common in consumer space (e.g., Google Maps)•Will grow over time within Enterprise IT

38


End-User Mashup Step 1: Widget and Feed

Discovery and Cataloging

Widget Catalog•Widget-A (public data feed)•Widget-B (customized public data feed)•Widget-C (company data feed)•Widget-D (personal data)•Widget-E (3rd party widget)•Widget-F (company widget)•etc.

• Feeds• Widgets• Other data

Public site 1

Personal data

Company site 2

Public site 2

Public site 3

Company site 1

Public site 4

Data transform

Data merge and transform

(Feeds are packaged as widgets)

39


End-user Mashup Step 2: Mashup Assembly

Widget CatalogWidget-AWidget-BWidget-CWidget-DWidget-EWidget-Fetc.

Web browser

URL: http://example.com/mashup_builder

Widget-C Widget-E

Widget-AUser drags widgets from widget catalog and drops onto the canvas

Using the mashup tool, the mashup designer links event publishers with event subscribers.

As a result, user actions on one particular widget will cause a message to be sent to the other widgets, thereby triggering updates in those other widgets

40


As the mashup runs, widgets communicate with each other and

with various serversWeb browser


Widget-C Widget-E

Widget-A

Communicates in the background with one of the

company’s web servers

Company server

Communicates in the background with a public web server

Message passing

between the widgets

Public server 1


Public server 2

41


Industry challenges

Security The power of mashups –

comes largely from discovering and integrating great widgets from 3rd parties

But 3rd party widgets might be malicious

Security The power of mashups –

comes largely from discovering and integrating great widgets from 3rd parties

But 3rd party widgets might be malicious

42


Mashup security challengeWeb browser


Widget-C Widget-E

Widget-A

Communicates in the background with one of the

company’s web servers

Company server

(trusted)


Message passing

between the widgets

Public server 1

(untrusted)


Public server 2

(untrusted)

What if one of the widgets is malicious? • Is it able to bridge across to other widget’s client-side

JavaScript to access company and user private information (get and set)?

• Is it able to piggyback user credentials to access other servers?

43


Browser Security

Browsers only offer limited ability to isolate components IFRAMEs from different domains (and subdomains)

cannot communicate with each other via DOM bridging or JavaScript bridging

In practice, two main techniques for isolating 3rd party components IFRAMEs isolation – untrusted components placed into

IFRAMEs with different domains (and subdomains) JavaScript containment – restrict untrusted components

to a well-defined subset the JavaScript language to prevent access to global JavaScript environment and other components (e.g., ADsafe, Caja). Note: ADsafe is built into JSLint.

OpenAjax Hub 2.0 uses IFRAME isolation approach Allows use of Ajax toolkits that use JavaScript features

that Caja disallows

Browsers only offer limited ability to isolate components IFRAMEs from different domains (and subdomains)

cannot communicate with each other via DOM bridging or JavaScript bridging

In practice, two main techniques for isolating 3rd party components IFRAMEs isolation – untrusted components placed into

IFRAMEs with different domains (and subdomains) JavaScript containment – restrict untrusted components

to a well-defined subset the JavaScript language to prevent access to global JavaScript environment and other components (e.g., ADsafe, Caja). Note: ADsafe is built into JSLint.

OpenAjax Hub 2.0 uses IFRAME isolation approach Allows use of Ajax toolkits that use JavaScript features

that Caja disallows

44


OpenAjax Hub 2.0 OpenAjax Hub 2.0 – framework for secure mashups

Client-side JavaScript Runs in today’s browsers (without plugins) Untrusted widgets are isolated into secure sandboxes

• Using IFRAMEs and browser same-domain policy Trusted widgets can be placed inline

• Using DIVs for lower overhead and faster performance All inter-widget communication managed by container

application• Mashup app provides callbacks that implement policy manager

Based on “SMash” technology from IBM Research Open-sourced (openajaxallianc.sourceforge.net) in August

2007 Research Paper describing SMash in WWW 2008 Conference

Cross-widget messaging via pub-sub APIs Key APIs: hubClient.publish() and hubClient.subscribe()

High-level APIs, independent of implementation technology Fragment communication, HTML5 postMessage, etc.

OpenAjax Hub 2.0 – framework for secure mashups Client-side JavaScript Runs in today’s browsers (without plugins) Untrusted widgets are isolated into secure sandboxes

• Using IFRAMEs and browser same-domain policy Trusted widgets can be placed inline

• Using DIVs for lower overhead and faster performance All inter-widget communication managed by container

application• Mashup app provides callbacks that implement policy manager

Based on “SMash” technology from IBM Research Open-sourced (openajaxallianc.sourceforge.net) in August

2007 Research Paper describing SMash in WWW 2008 Conference

Cross-widget messaging via pub-sub APIs Key APIs: hubClient.publish() and hubClient.subscribe()

High-level APIs, independent of implementation technology Fragment communication, HTML5 postMessage, etc.

45


Web browser


Widget-A

Widget-B

Malicious Widget

Communicates in the background with one of the company’s web servers

Company server

Communicates in background with a trustworthy public server

Trustworthy Public Server

Communicates in background with a malicious public server

Malicious Public Server

OpenAjax Hub 2.0 – Widget Isolation and Messaging Mediator

Hub 2.0 only permits cross-widget communication via a mediated publish/subscribe messaging bus

Hub 2.0 isolates each widget into its own sandbox

OpenAjax Hub 2.0 Security Overview

46


Hub 2.0 Initialization

5

Web browser

URL: http://example.com/mashup_builder/my_mashup2

Using the Managed Hub

Load OpenAjax Hub1

Create a “ManagedHub” instance, identifying security manager callbacks

2

Create containers for each component in the mashup and then load/initialize the components within those containers

3

4

As application runs, components publish messages to other components

3

Typically at initialization time, components subscribe to message topics of interest

Container

HubClient

Component-A HTML/JavaScript

Container

HubClient

Component-B HTML/JavaScript

OpenAjax.hub

ManagedHub instance

1

2

2

Security manager callbacks

3

Component subscribes to message topics: OpenAjax.hub.HubClient.subscribe(…);

4

Component publishes messages on Hub: OpenAjax.hub.HubClient.publish(…);

5

47


Run-time message passing with Hub 2.0

Web browser

URL: http://example.com/mashup_builder/my_mashup2

Managed Hub Message Passing

OpenAjax.hub

ManagedHub instance

Security manager callbacks

Component-B publishes a message1

IFrame container marshalls the message across browser frames

2

IFrame container sends message to Managed Hub

3

Security manager callbacks decide whether to let the message through

4

5

Component-A’s callback is invoked6

Message sent to Component-A’s container

4

IframeContainer

HubClient

Component-B HTML/JavaScriptComponent publishes messages on Hub: OpenAjax.hub.HubClient.publish(…); 1

<iframe> (for component isolation)

InlineContainer

HubClient

Component-A HTML/JavaScriptComponent subscribes to message topics: function MyCallBack() {…} OpenAjax.hub.HubClient.subscribe(…);

<div> (inline component)

2

6

3

5

48


OpenAjax Hub 2.0: current status

Specification – approved July 2009 Open source

Commercial-grade open source implementation Comprehensive test suite Sample mashup application uses Hub 2.0 and OA widget

loaders

White papers on OpenAjax site “Introducing OpenAjax Hub 2.0 and Secure Mashups” “OpenAjax Hub 2.0 and Mashup Assembly Applications”

Industry support – demos, in process, or stated intentions IBM Mashup Center (primary contributor to Hub 2.0 effort) TIBCO (primary contributor to Hub 2.0 effort) JackBe, RadWebTech, SAP (demo’d in 2008), Software AG Financial companies (internally)

Next step Samples that show how to use Hub 2.0 with single sign-on

technologies such as OpenID and SAML

Specification – approved July 2009 Open source

Commercial-grade open source implementation Comprehensive test suite Sample mashup application uses Hub 2.0 and OA widget

loaders

White papers on OpenAjax site “Introducing OpenAjax Hub 2.0 and Secure Mashups” “OpenAjax Hub 2.0 and Mashup Assembly Applications”

Industry support – demos, in process, or stated intentions IBM Mashup Center (primary contributor to Hub 2.0 effort) TIBCO (primary contributor to Hub 2.0 effort) JackBe, RadWebTech, SAP (demo’d in 2008), Software AG Financial companies (internally)

Next step Samples that show how to use Hub 2.0 with single sign-on

technologies such as OpenID and SAML

49


Mashup and Widget Interoperability

Reminder: two challenges to overcome with mashups Security (discussed in previous slides) Interoperability (this slide)

Two widget interoperability standards OpenAjax Widgets (within OpenAjax Metadata specs)

• Includes “mashable widgets” extensions• Pubsub metadata (via <topic> element)• Shared property metadata (via ‘sharedAs’ attribute on <property>

element)• Widget APIs (onLoad, onUnload, adjustDimensions, etc.)

OpenSocial Gadgets• 90% overlap with OpenAjax Widgets• But last 10% is important – e.g., mashup wiring metadata (topics and

props), inline widgets, Ajax library sharing

Two widget standards? One possible approach Have mashup applications support both OA Widgets and OS

Gadgets Use Hub 2.0 underneath for security Work with OpenSocial, Shindig to address remaining 10% needed

for user-built mashups For widgets requiring certain key features, use OA Widgets (for

time being)

Note: OpenAjax Alliance and OpenSocial Foundation are in discussions about coordinating efforts

Reminder: two challenges to overcome with mashups Security (discussed in previous slides) Interoperability (this slide)

Two widget interoperability standards OpenAjax Widgets (within OpenAjax Metadata specs)

• Includes “mashable widgets” extensions• Pubsub metadata (via <topic> element)• Shared property metadata (via ‘sharedAs’ attribute on <property>

element)• Widget APIs (onLoad, onUnload, adjustDimensions, etc.)

OpenSocial Gadgets• 90% overlap with OpenAjax Widgets• But last 10% is important – e.g., mashup wiring metadata (topics and

props), inline widgets, Ajax library sharing

Two widget standards? One possible approach Have mashup applications support both OA Widgets and OS

Gadgets Use Hub 2.0 underneath for security Work with OpenSocial, Shindig to address remaining 10% needed

for user-built mashups For widgets requiring certain key features, use OA Widgets (for

time being)

Note: OpenAjax Alliance and OpenSocial Foundation are in discussions about coordinating efforts

50


Agenda







51

DaVinci builder

DEMO DEMO

51

52


Thank you! Any questions?

For more information:

Web site: http://www.openajax.org

Wiki: http://www.openajax.org/member/wiki

Blog: http://www.openajax.org/blog

Mail list: [email protected]

Email: Adam Peller ([email protected])

Jon Ferraiolo ([email protected])

For more information:

Web site: http://www.openajax.org

Wiki: http://www.openajax.org/member/wiki

Blog: http://www.openajax.org/blog

Mail list: [email protected]

Email: Adam Peller ([email protected])

Jon Ferraiolo ([email protected])