Outsourcing front-end platforms
    & cross-domain issues


                     Andrey Legaev
08.08.2009           andrey...
What is the outsourcing?
Wikipedia

Outsourcing is subcontracting a process,
such as product design or manufacturing, to
a...
Outsourcing in web-technologies:
       Server-to-server
Outsourcing in web-technologies:
    3rd party service pages
Outsourcing in web-technologies:
     Front-End Embedding
Possible solutions
Flash Object embedding (YouTube)
Embedding via IFrame
DHTML embedding
Silverlight, Java Applets, etc.
Flash Object embedding
Interaction with the main document
   You are able to communicate with the page via
   JavaScript s...
Embedding via IFrame
Interaction with the main document
    You can’t interact with main document because of
    same-orig...
DHTML embedding
Interaction with the main document
    You are able to do anything with the main document;

Interaction wi...
DHTML embedding:
  Solving cross-domain issues
Hidden IFRAME:
   Can send GET and POST requests
   We can’t obtain result ...
HTML mark-up should look nice
     with all doctypes
No DOCTYPE given
Unrecognized DOCTYPE
HTML 3.2
HTML 4.0 Strict
HTML 4...
Hardcode all CSS
       Isolate you JavaScript
Don’t use DIVs, TABLEs will help you;
Hardcode all styles in style=“” attri...
DHTML embedding:
       Session handling issues
HTTP session handling approaches:
  Cookies;
  Hidden field;
  URL contain...
DHTML embedding:
       Session handling issues
               3rd party cookies aren’t supported
Cookies
               b...
3rd Party Cookies Support

Test description                                    MSIE7     MSIE8       FF3   Safari     Oper...
Front-End Embedding:
          Performance issues

Load is equal to sum of all integrated sites load.
Front-End Embedding:
 Performance issues
Scalability Suggestions
Your resources is loaded in addition to main
content – make them small as possible;
Use scripts mi...
Related Links
Browser Security Handbook
P3P: Platform for Privacy Preferences
Project

flXHR + jQuery.ajax(options.xhr)
Ya...
Upcoming SlideShare
Loading in …5
×

Outsourcing Front End Platforms Cross Domain

1,273 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,273
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Outsourcing Front End Platforms Cross Domain

  1. 1. Outsourcing front-end platforms & cross-domain issues Andrey Legaev 08.08.2009 andrey@legaev.com
  2. 2. What is the outsourcing? Wikipedia Outsourcing is subcontracting a process, such as product design or manufacturing, to a third-party company.
  3. 3. Outsourcing in web-technologies: Server-to-server
  4. 4. Outsourcing in web-technologies: 3rd party service pages
  5. 5. Outsourcing in web-technologies: Front-End Embedding
  6. 6. Possible solutions Flash Object embedding (YouTube) Embedding via IFrame DHTML embedding Silverlight, Java Applets, etc.
  7. 7. Flash Object embedding Interaction with the main document You are able to communicate with the page via JavaScript statements evaluating. Your component is separated from main document. Interaction with your server You can interact with your server without limitations (crossdomain.xml)
  8. 8. Embedding via IFrame Interaction with the main document You can’t interact with main document because of same-origin policy limitations Interaction with your server You can interact with your server without limitations (because of same domain) Other issues You have to override everything in CSS because of Styles inheritance Your JavaScript code is completely isolated from the main document
  9. 9. DHTML embedding Interaction with the main document You are able to do anything with the main document; Interaction with your server Any interaction with your server is prohibited because of cross- domain issues; you have to use hacks and workarounds. Other issues Your code is working inside foreign site: Your HTML mark-up should look nice with all doctypes; You have to override all of CSS properties with maximum priority (inline-styles); Your JavaScript may conflict with site’s JavaScript libraries.
  10. 10. DHTML embedding: Solving cross-domain issues Hidden IFRAME: Can send GET and POST requests We can’t obtain result of the query Proxies based on Flash (Java, Silverlight, etc.): Time to load plugin (0.2-1.5 sec) Could do any requests with right crossdomain.xml configuration Dynamic <script> tag creation: Can’t send POST requests Caching issues Proxy sub-page and interaction via location.hash . Suitable for commands transmition Could be used for data transmition (~1KB limit) May cause issues with the “Back” browser’s button
  11. 11. HTML mark-up should look nice with all doctypes No DOCTYPE given Unrecognized DOCTYPE HTML 3.2 HTML 4.0 Strict HTML 4.0 Transitional HTML 4.01 Strict HTML 4.01 Transitional XHTML 1.0 Strict XHTML 1.0 Transitional XHTML 1.0 Strict w/XML XHTML 1.0 Transitional w/XML XHTML 1.0 Frameset w/XML
  12. 12. Hardcode all CSS Isolate you JavaScript Don’t use DIVs, TABLEs will help you; Hardcode all styles in style=“” attribute: Used & unused CSS rules. Use following wrapper for all your JS blocks: (function () { // your code })(); Don’t use global variables
  13. 13. DHTML embedding: Session handling issues HTTP session handling approaches: Cookies; Hidden field; URL containing session identifier.
  14. 14. DHTML embedding: Session handling issues 3rd party cookies aren’t supported Cookies by all browsers; Is not suitable for DHTML Hidden field embedding; URL Required additional effort on client- parameter side.
  15. 15. 3rd Party Cookies Support Test description MSIE7 MSIE8 FF3 Safari Opera Chrome Are restrictions on third-party cookies YES YES NO YES NO NO on in default config? Option to change third-party cookie persisten YES YES YES YES YES handling? t only Is P3P policy override supported? YES YES NO NO n/a NO Does interaction with the IFRAME NO NO NO YES n/a NO override cookie blocking? Are third-party cookies permitted YES YES YES YES n/a YES within same domain? http://code.google.com/p/browsersec/wiki/Part2#Third-party_cookie_rules
  16. 16. Front-End Embedding: Performance issues Load is equal to sum of all integrated sites load.
  17. 17. Front-End Embedding: Performance issues
  18. 18. Scalability Suggestions Your resources is loaded in addition to main content – make them small as possible; Use scripts minification/obfuscation; Wrap HTML & CSS for widgets to JavaScript, use only one request to fetch functionality and HTML & CSS; Use deep caching for the static data; Move static data (scripts & images) to light web- server; Use CDN
  19. 19. Related Links Browser Security Handbook P3P: Platform for Privacy Preferences Project flXHR + jQuery.ajax(options.xhr) Yahoo UI Library: Cross-domain ajax sample

×