Overview of Force.com Canvas, a technology that enables you to rapidly integrate third party web applications (on-premise or cloud) into a Salesforce environment, showing their user interface within a secure iframe. Covers how Canvas works and basic operation, and also provides tips from a recent development project on browser issues, multi-tab support, and more. UPDATED 8 Mar 2014: No need to download to see builds. I have removed all the builds and made many content updates to explain things better.

1. © Cloudfind Ltd 2011-2014
Integrating Web Apps with
Force.com Canvas
Richard Donkin
richard@cloudfindhq.com
@rdonkin
Cloudfind Ltd
http://cloudfindhq.com

2. 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
3

4. Ideal World

5. Real World

6. Ideal World
“All our apps are on Salesforce!”

7. Real World
ERP
Financials
Supply Chain
…
Field Service
Project Management
Industry-Specific
…
HR
Cloud Storage
CRM & Service
Marketing
Third Party Apps

8. Real World
ERP
Financials
Supply Chain
…
Field Service
Project Management
Industry-Specific
…
HR
Cloud Storage
CRM & Service
Marketing
Third 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

9. Real World
ERP
Financials
Supply Chain
…
Field Service
Project Management
Industry-Specific
…
HR
Cloud Storage
CRM & Service
Marketing
Third Party Apps
Force.com Canvas “frame”

10. Real World
ERP
Financials
Supply Chain
…
Field Service
Project Management
Industry-Specific
…
HR
Cloud Storage
CRM & Service
Marketing
Third Party Apps
Force.com Canvas “frame”
Any Salesforce Page
Any Web Application

11. Canvas as a UI integrator
ERP
Financials
Supply Chain
…
Field Service
Project Management
Industry-Specific
…
HR
Cloud Storage
Any Web
Application
(full page or part)
Any Salesforce Page
Force.com Canvas
Canvas
Any Web Application
Salesforce1
CRM & Service
Marketing
Third 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
12

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
13

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
14

15. 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

16. 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

17. 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
18

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
19

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
20
$ 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
21

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
22

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
23

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?
24

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
25

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 tab
2. Get org ID from Canvas signed request
3. Get random number + timestamp
4. 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 URL
2. 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
26

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!
27

28. 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

29. Thank You
Richard Donkin
richard@cloudfindhq.com
@rdonkin
http://cloudfindhq.com
@CloudfindHQ
Presentation delivered at the
Salesforce 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
30