Integrating Web Apps with Canvas


Published on

Overview of 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.

Published in: Technology
1 Like
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • Reality is that almost all companies will have quite a few apps that are not on the Salesforce platform, including intranet apps, intranet websites, and cloud apps. Even companies pushing the use of Salesforce as preferred platform are likely to have some off-platform apps.
  • Reference:P3P policies in Internet Explorer: third-party cookies in iframes – there are many hacks to try to bypass Apple’s policies. I don’t recommend these as they are fragile – with any Safari update, Apple can break these hacks as they regard them as bypassing their cookie policies, and in fact many such hacks have been broken – see The recommended approach here requires only two extra clicsk per device when first using the device, and then there are no clicks for later login sessions on the same device – and most importantly, it won’t break in the future as doesn’t try to bypass Apple’s policies.
  • Integrating Web Apps with Canvas

    1. 1. © Cloudfind Ltd 2011-2014 Integrating Web Apps with Canvas Richard Donkin @rdonkin Cloudfind Ltd
    2. 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. 3. Agenda • Integration challenges • Canvas overview • Tips for development 3
    4. 4. Ideal World
    5. 5. Real World
    6. 6. Ideal World “All our apps are on Salesforce!”
    7. 7. Real World ERP Financials Supply Chain … Field Service Project Management Industry-Specific … HR Cloud Storage CRM & Service Marketing Third Party Apps
    8. 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. 9. Real World ERP Financials Supply Chain … Field Service Project Management Industry-Specific … HR Cloud Storage CRM & Service Marketing Third Party Apps Canvas “frame”
    10. 10. Real World ERP Financials Supply Chain … Field Service Project Management Industry-Specific … HR Cloud Storage CRM & Service Marketing Third Party Apps Canvas “frame” Any Salesforce Page Any Web Application
    11. 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 Canvas Canvas Any Web Application Salesforce1 CRM & Service Marketing Third Party Apps
    12. 12. Why not use a UI for web apps? Assume you have a web app outside Salesforce Using, 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. 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 • limits mostly not affected by Canvas apps • Can use CPU and API calls for data integration not UI logic 13
    14. 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. 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. 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. 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. 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. 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. 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 | grep P3P P3P: CP="Facebook does not have a P3P policy. Learn why here:"
    21. 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. 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. 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. 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. 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. 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. 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. 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. 29. Thank You Richard Donkin @rdonkin @CloudfindHQ Presentation delivered at the Salesforce Platform Developer User Group Bristol, UK on 6th March 2014
    30. 30. Canvas Resources • Main DeveloperForce page • Canvas Developer Guide • Architecture overview 30
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.