1 / 29

WEB308: Usability, SEO, Security: Common RIA and Ajax Mistakes (and Fixes)

WEB308: Usability, SEO, Security: Common RIA and Ajax Mistakes (and Fixes). Christian Wenz Arrabiata Solutions GmbH. Common Mistakes. Bookmarks/ maintaining state Back/ forward buttons Not robust w/r/t latency Too many concurrent HTTP requests SEO Security. Traditional Web Model.

giles
Download Presentation

WEB308: Usability, SEO, Security: Common RIA and Ajax Mistakes (and Fixes)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WEB308: Usability, SEO, Security:Common RIA and Ajax Mistakes (and Fixes) Christian Wenz Arrabiata Solutions GmbH

  2. Common Mistakes • Bookmarks/maintainingstate • Back/forwardbuttons • Not robust w/r/t latency • Toomanyconcurrent HTTP requests • SEO • Security

  3. Traditional Web Model Request Response Request Response Client Server

  4. RIA Model Request Response RIA Request Response Client Server

  5. Bookmarks • Applicationschangestate • Yetwith RIAs, the URL does not change (to avoid a pagerefresh) • Thus bydefaultbookmarksonlyrefertothestartpage

  6. Fixing Bookmarks • Cookies • Requirecookiesupport, not portable to otherbrowsersormachines (thelatterworkswithprofilesandsynchronization, though) • Puttingstateinformation in the URL • Must usehash/anchor, toavoidpagerefresh • Not visibletosearchengines • Becarefulwhenparsingthisinformation

  7. Back/Forward Buttons • Browsers‘ back/forwardbuttonsnavigatetothepreceding/successing URL • Whenthe URL doesn‘tchange, thebuttons do not work

  8. Fixing Back/Forward Buttons • Changingthe URL hashgives back/forwardbuttonssomethingtoworkwith • hashchangeevent in HTML5 • Not in olderbrowsers, though • Formaximumbrowsercompatibility, weneedactual HTTP requests • HTTP requests in themainbrowserwindowwouldcause a refresh, though • Solution: useiframes

  9. Fixing Back/Forward Buttons (2) Preservingstate Retrievingstate Browser Browser App changesstate App changesstate Data iswritten Data isread Iframe Iframe User clicks back/forwardbutton

  10. Historysupport in ASP.NET • EnableHistoryfeatureofScriptManager • Allowsaddingofhistorypoints • Provideseventhandlerfor back/forwardbuttonclick • Server API (usefulwhenusingUpdatePanels) • Client API

  11. Adding Back/Forward Button Support to an ASP.NET Application demo

  12. Historysupport in jQuery • Variouspluginoptions: • BBQ plugin(http://benalman.com/projects/jquery-bbq-plugin/) • hashchangeplugin (http://benalman.com/projects/jquery-hashchange-plugin/) • Historyplugin (http://tkyk.github.com/jquery-history-plugin/)

  13. Adding Back/Forward Button Support to a JavaScript Application demo

  14. HTTP: Latencyand Error Handling • HTTP requestsmaytake time • JavaScript does not feature a built-in processqueue • Potential sideeffectsifyou send multiple requests in a shortperiodof time iftheordermatters • Also, JavaScript does not provide a decenterrorhandlingif a requestfails (ortakestoolong) • Timeouts • Droppedconnections

  15. Fixing HTTP Latencyand Error Handling • Add randomlatencyduringtesting • Implement a customtimeouthandlin • Abort/restartconnectionsthattaketoolong • WhenusingASP.NET‘s JavaScript web serviceprocy, useset_timeout()toprovide a timeoutvalue

  16. Aborting/Restarting Long-Running Web Service Requests demo

  17. Concurrent HTTP Requests • The numberofconcurrent HTTP requeststothe same FQDN is limited • HTTP 1.1 RFC: a „client SHOULD NOT maintainmorethantwoconnectionswith a serverorproxy“ • Internet Explorer 8+, Firefox 3+: 6 connections • Other recentbrowsers: usually 4 or 6 connections, sometimesmore • Olderbrowsers: usually 2 or 4 connections • Youcannotcontrolwhathappens in otherbrowserinstancesortabs • But youcanlimittheresourcesyouareusing

  18. Fixing Concurrent HTTP Requests • Bufferdata on theclientandcombineseveralrequestsintoone • Uselong-livingconnections • Useone HTTP connectiontocontinuously send orretrievedata • Approach also called „Comet“

  19. Search Engine Optimization • Search engines do not reallyspeak JavaScript or Silverlight • Technically, theymightseeandindexdynamiccontent. • But don‘tbet on it • Dynamicallyloadedcontentis invisible tosearchengines • RIAs usuallyonlyhaveone URL (andthe URL hashis not usedbysearchengines)

  20. Fixing Search Engine Optimization • Provide all relevant contentasstatic HTML pages • Use links, ifpossible • Create an alternative versionofyoursitethatdoes not require JavaScript orplugins

  21. RIA in Search Engines demo

  22. Web Application Security • Using a RIA technologymightincreasetheattacksurface • Using a RIA technologymightrestrictwhatyourapplicationisallowedto do • Cross-Site Scripting (XSS) • Cross-Site Request Forgery (CSRF) • SQL Injection • …

  23. Cross-Site Request Forgery • Browsers send cookiesforfree … Other website Requestspage Sends script Victim (browser) Requestspage Attacker (website)

  24. RIA´s Same Origin Policy • Toprevent CSRF (andforsomeotherreasons), JavaScript, Silvelrightandother RIA technologiesimplement a „same originpolicy“ (SOP) • HTTP Requestsmayonlybesenttotheoriginserver (protocol, port, domainname) • With JavaScript, theoriginserveristheserverthe HTML comesfrom • With Silverlight (andotherplugins), theoriginserveristheserverthe Silverlight applicationcomesfrom • Policyfileshelptocircumventthisrestriction • Policyfilesneedtobeplaced on thetargetserver

  25. Fixing RIA Security • Audit all backend servicesfor XSS, SQL Injectionandothervulnerabilities • Protectagainst CSRF attacks • Keep in mindthattheclientcannotbecontrolled • Don‘tstore sensitive data in JavaScript or Silverlight • Do not trustdatabeingsentfromyourclientapplicationtotheserver • Mindtheusualsecurityadvice: Validateinput, escapeoutput

  26. ThankYou! • Questions? • Email: christian.wenz@arrabiata.de • WWW: http://www.arrabiata.net/ • Twitter: @chwenz

  27. Session Evaluations Tell us what you think, and you could win! All evaluations submitted are automatically entered into a daily prize draw*  Sign-in to the Schedule Builder at http://europe.msteched.com/topic/list/ * Details of prize draw rules can be obtained from the Information Desk.

  28. © 2010 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

More Related