1. Outsourcing front-end platforms
& cross-domain issues
Andrey Legaev
08.08.2009 andrey@legaev.com

2. What is the outsourcing?
Wikipedia
Outsourcing is subcontracting a process,
such as product design or manufacturing, to
a third-party company.

3. Outsourcing in web-technologies:
Server-to-server

4. Outsourcing in web-technologies:
3rd party service pages

5. Outsourcing in web-technologies:
Front-End Embedding

6. Possible solutions
Flash Object embedding (YouTube)
Embedding via IFrame
DHTML embedding
Silverlight, Java Applets, etc.

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. 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. 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. 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. 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. 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. DHTML embedding:
Session handling issues
HTTP session handling approaches:
Cookies;
Hidden field;
URL containing session identifier.

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. 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. Front-End Embedding:
Performance issues
Load is equal to sum of all integrated sites load.

17. Front-End Embedding:
Performance issues

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. Related Links
Browser Security Handbook
P3P: Platform for Privacy Preferences
Project
flXHR + jQuery.ajax(options.xhr)
Yahoo UI Library: Cross-domain ajax
sample