© Cloudfind Ltd 2011-2014

Integrating Web Apps with Force.com Canvas

Richard Donkin

richard@cloudfindhq.com

@rdonkin

Cloudfind Ltd

http://cloudfindhq.com

About Cloudfind

Smart tagging makes it simple to find and manage files in the cloud

Brings collateral into Salesforce so that teams close deals faster

3

Agenda

• Integration challenges• Canvas overview• Tips for development

Ideal World

Real World

Ideal World

“All our apps are on Salesforce!”

Real World

ERPFinancialsSupply Chain…

Field ServiceProject ManagementIndustry-Specific…

HR

Cloud Storage

CRM & ServiceMarketingThird Party Apps

Real World

ERPFinancialsSupply Chain…

Field ServiceProject ManagementIndustry-Specific…

HR

Cloud Storage

CRM & ServiceMarketingThird Party Apps

Canvas integration via Cloudfind app:

Show auto tagged files from cloud

storage in Salesforce

No need to hunt through folders in

cloud storage

Real World

ERPFinancialsSupply Chain…

Field ServiceProject ManagementIndustry-Specific…

HR

Cloud Storage

CRM & ServiceMarketingThird Party Apps

Force.com Canvas “frame”

Real World

ERPFinancialsSupply Chain…

Field ServiceProject ManagementIndustry-Specific…

HR

Cloud Storage

CRM & ServiceMarketingThird Party Apps

Force.com Canvas “frame”

Any Salesforce Page

Any Web Application

Canvas as a UI integrator

ERPFinancialsSupply Chain…

Field ServiceProject ManagementIndustry-Specific…

HR

Cloud Storage

Any Web Application

(full page or part)

Any Salesforce Page

Force.com Canvas

Canvas

Any Web Application

Salesforce1

CRM & ServiceMarketingThird Party Apps

12

Why not use a Force.com UI for web apps?

Assume you have a web app outside Salesforce

Using Force.com, build a new UI for the app:

• Existing skills for Salesforce developers

• Easy data integration via Apex

• Classic model used by ISVs

But…

• Must replicate UI and integrate with app

• Two UIs: one for Salesforce, one for non-Salesforce

• Existing app must have an API• Or source code to add an API

13

Why use Canvas to embed UI for web app?

With Canvas:• Just embed the UI – no re-building, easy integration• Same app can work outside Salesforce• Use any programming language• Deployment options:

• PaaS (Heroku) – easy setup• IaaS (Amazon AWS), or on-premise – full control

• Multi-core, SSDs, memory caches, NoSQL, …

• Deployment model is “pay for capacity”:

• Good for intensive processing, e.g. file tagging

• Force.com limits mostly not affected by Canvas apps• Can use Force.com CPU and API calls for data integration not

UI logic

14

Where can you embed a web app?

Many of the places Visualforce works, including:

• Custom tab

• Object detail page

• Chatter page

• Chatter feed (GA in Spring ‘14)

• Chatter publisher (GA in Spring ‘14)

And it all works in …

• iOS/Android app, plus mobile web app in browser

• Swipe to see related objects including Canvas app

• Canvas apps can be on Salesforce1 menu

How to embed with Canvas

Realistic Visualforce example:<apex:page> <apex:canvasApp namespacePrefix="myapp" applicationName=“myapp” height="600px" width="100%" parameters=”{{id:'{!Account.Id}', name: '{!JSENCODE(Account.Name)}'}” /><apex:page>

• Always set width to 100% to allow horizontal resizing• And use 100% when including in page layout

• Take care of parameter encoding to prevent XSS vulnerablities• JSON is easily processed in most languages

• Same source code for Salesforce1 mobile use

Canvas-enabling a web app (1)

If you have source code access for the app:• Make the app work in iframe, and with Canvas• Quite easy – mostly standard web app techniques

Can open new tab if required – e.g. Google OAuth2

Salesforce UI

Canvas iframe Canvas Web App

Canvas Signed Request, and AJAX

User authorizes

Cloudfind app

Cloudfind confirmation

page

Outside Canvas

Canvas-enabling a web app (2)

If you don’t have source code for enterprise app:• Write a small custom app on top of the main app

• Call into main app’s API as required• Best for a few functions only

• Or… generic proxy for the main app

Salesforce UI

Canvas iframe Custom Canvas App

Canvas Signed Request, and AJAX

Enterprise app

App API

18

How Canvas works

Salesforce provides context for the Canvas “frame”

• User’s authentication is passed through:• Signed Request – no authorization step, some OAuth

permissions• OAuth Web Server flow – allows background API use

• Plus standard info: org, time zone, etc• Plus your own parameters – embed via Visualforce• Canvas Framework SDK for Java, or roll your own

Use Canvas OAuth token for Salesforce access:• JavaScript + Canvas SDK

• Browser access to REST, SOAP and Chatter APIs• Or use standard APIs from your web app backend

19

Tips: Working inside an iframe

• Frame resizing• Make your app responsive – just like mobile• Horizontal is easy – not Canvas-specific• Vertical is more work – coding + OAuth token

• Framebusting and friends• Anti-clickjacking and framebusting in the web app

• These will stop app from working in iframe• Just turn off these features if you are entering app via

Canvas

20

Tips: Browser quirks

• IE fun:• Cookie setting requires a P3P header in HTTP response• Configure web server to deliver this on all pages

• Safari fun (iOS and OS X):• Cookie setting requires user interaction with non-framed page.

Two clicks per user device, not per session.• Try to set a cookie, and if you can’t…

• Show a ‘please register device’ page• User clicks Register

• Show ‘almost registered’ page in new browser tab• User clicks Finish Registration

• Set cookie • Allowed by Safari due to the button click interaction in this ‘first party’ tab

• JavaScript calls into main iframe to finish• Future sessions - cookie-setting in iframe will work

$ curl -si https://www.facebook.com/ | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here: http://fb.me/p3p"

21

Tips: Limits

• Canvas Limits• 2 API calls per Canvas frame load• 5K calls per user per day = 2,500 frame loads• High limits given typical usage

22

Tips: Security

• Canvas gives you:• No login/password management in web app• All Canvas users authenticated by Salesforce

• Reduced risk:• Less risk from ‘the wild Internet’ • Main threat: privilege escalation

• Standard web app security, including:• Encode inputs to prevent XSS• Using CSRF protection in forms• Preventing SQL injection• See Salesforce and OWASP guides

23

Tabs and Sessions for AJAX – The Problem

• Only affects AJAX web apps • Not unique to Canvas, but you may run into this• Mostly likely to hit power users or admins who have many

browser tabs open• “Two orgs” use case:

• User logs into two orgs in different tabs • not using Incognito window in browser

• Different URLs for Salesforce in each tab• e.g. sandbox on cs2 and production on na3

• Same Canvas web app behind both• App uses AJAX

• Simpler “two tabs” use case:• Two browser tabs open in one org• Also covered by this approach

24

Tabs and Sessions for AJAX – Problem Detail

• Multiple browser tabs for same Canvas web app • Single cookie-based session per user

• Single domain for the web app server across all tabs• AJAX app in iframe • HTTP requests from two tabs to AJAX API, for same user

session• App is getting requests from tab 1 and tab 2, each of which

is in different org, so they should use different app data• How do you keep the requests from each tab separate?

• Test case:• Login to org 1 in tab 1, then login to org 2 in tab 2• Return to tab 1 and click an AJAX button

• Backend of web app receives AJAX request• Should the app apply this request to org 1 or org 2 data?

25

Tabs and Sessions for AJAX – Solution

• Use ‘tab session’ state to distinguish between tabs • Each tab has its own unique state• Tab state stored within the user’s session state in your

web app• Tab 1, org 1 sandbox org state within web app• Tab 2, org 2 production org state

• Create a unique ID per tab by hashing per-tab info

• Append this ID to every URL sent to AJAX API

• Result: AJAX backend can tell which tab is calling

26

Tabs and Sessions for AJAX – Solution Detail

• User page load – signed request via POST:1. Pass tab-specific params (page name, object ID, …) to

identify the tab2. Get org ID from Canvas signed request 3. Get random number + timestamp4. Hash all these items and suffix hash to every URL in

iframe• User clicks on button – AJAX request via GET:

1. Extract the hash from incoming URL2. Use hash to access right ‘tab session’ state from cookie-

based session data • If not found in session, app should treat user as logged out

• Security:• Don’t trust the VF page to tell you info that is available via

Canvas signed request – e.g. org ID

27

Tabs and Sessions for AJAX – Summary

• Unique URL per tab …

• … enables separate app state per tab

• So your AJAX app supports many tabs, in many orgs at once!

Summary

Canvas has great potential

Great option for existing web apps

Lets you reach non-Salesforce users

Salesforce becomes the “single screen” to access your key applications

Thank YouRichard Donkin

richard@cloudfindhq.com@rdonkin

http://cloudfindhq.com @CloudfindHQ

Presentation delivered at theSalesforce Platform Developer User Group

Bristol, UK on 6th March 2014

30

Canvas Resources

http://bit.ly/ForceCanvas

• Main DeveloperForce page

http://www.salesforce.com/us/developer/docs/platform_connect/

• Canvas Developer Guide

http://www.are4.us/best-practices/salesforce-canvas/

• Architecture overview