Embed Size (px)
DESCRIPTION
Citation preview
What is the outsourcing?
Wikipedia
Outsourcing is subcontracting a process, such as product design or manufacturing, to a third-party company.
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 IFrameDHTML embedding Silverlight, Java Applets, etc.
Flash Object embeddingInteraction 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 serverYou can interact with your server without limitations (crossdomain.xml)
Embedding via IFrameInteraction with the main document
You can’t interact with main document because of same-origin policy limitations
Interaction with your serverYou can interact with your server without limitations (because of same domain)
Other issuesYou have to override everything in CSS because of Styles inheritanceYour JavaScript code is completely isolated from the main document
DHTML embeddingInteraction with the main document
You are able to do anything with the main document;
Interaction with your serverAny interaction with your server is prohibited because of cross-domain issues; you have to use hacks and workarounds.
Other issuesYour 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.
DHTML embedding: Solving cross-domain issues
Hidden IFRAME:Can send GET and POST requestsWe 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 requestsCaching issues
Proxy sub-page and interaction via location.hash .Suitable for commands transmitionCould be used for data transmition (~1KB limit)May cause issues with the “Back” browser’s button
HTML mark-up should look nice with all doctypes
No DOCTYPE givenUnrecognized DOCTYPEHTML 3.2HTML 4.0 StrictHTML 4.0 TransitionalHTML 4.01 StrictHTML 4.01 TransitionalXHTML 1.0 StrictXHTML 1.0 TransitionalXHTML 1.0 Strict w/XMLXHTML 1.0 Transitional w/XMLXHTML 1.0 Frameset w/XML
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
DHTML embedding: Session handling issues
HTTP session handling approaches:Cookies;Hidden field; URL containing session identifier.
DHTML embedding: Session handling issues
Cookies 3rd party cookies aren’t supported by all browsers;
Hidden field Is not suitable for DHTML embedding;
URL parameter
Required additional effort on client-side.
3rd Party Cookies Support
Test description MSIE7 MSIE8 FF3 Safari Opera Chrome
Are restrictions on third-party cookies on in default config? YES YES NO YES NO NO
Option to change third-party cookie handling? YES YES YES YES persisten
t only YES
Is P3P policy override supported? YES YES NO NO n/a NO
Does interaction with the IFRAME override cookie blocking? NO NO NO YES n/a NO
Are third-party cookies permitted within same domain? YES YES YES YES n/a YES
http://code.google.com/p/browsersec/wiki/Part2#Third-party_cookie_rules
Front-End Embedding: Performance issues
Load is equal to sum of all integrated sites load.
Front-End Embedding: Performance issues
Scalability SuggestionsYour 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
Related Links
Browser Security HandbookP3P: Platform for Privacy Preferences Project
flXHR + jQuery.ajax(options.xhr) Yahoo UI Library: Cross-domain ajax sample
