MANNING Ben Vinegar Anton Kovalyov FOREWORD BY Paul Irish www.it-ebooks.info Third-Party JavaScript www.it-ebooks.info www.it-ebooks.info Third-Party JavaScript BEN VINEGAR ANTON KOVALYOV MANNING Shelter Island www.it-ebooks.info For online information and ordering of this and other Manning books, please visit www.manning.com. The publisher offers discounts on this book when ordered in quantity. For more information, please contact Special Sales Department Manning Publications Co. 20 Baldwin Road PO Box 261 Shelter Island, NY 11964 Email: orders@manning.com ©2013 by Manning Publications Co. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by means electronic, mechanical, photocopying, or otherwise, without prior written permission of the publisher. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as trademarks. Where those designations appear in the book, and Manning Publications was aware of a trademark claim, the designations have been printed in initial caps or all caps. Recognizing the importance of preserving what has been written, it is Manning’s policy to have the books we publish printed on acid-free paper, and we exert our best efforts to that end. Recognizing also our responsibility to conserve the resources of our planet, Manning books are printed on paper that is at least 15 percent recycled and processed without the use of elemental chlorine. Manning Publications Co. Development editor: Renae Gregoire 20 Baldwin Road Technical proofreaders: Alex Sexton, John J. Ryan III PO Box 261 Copyeditor: Benjamin Berg Shelter Island, NY 11964 Proofreader: Katie Tennant Typesetter: Dottie Marsico Cover designer: Marija Tudor ISBN 9781617290541 Printed in the United States of America 1 2 3 4 5 6 7 8 9 10 – MAL – 18 17 16 15 14 13 www.it-ebooks.info v brief contents 1 ■ Introduction to third-party JavaScript 1 2 ■ Distributing and loading your application 21 3 ■ Rendering HTML and CSS 48 4 ■ Communicating with the server 77 5 ■ Cross-domain iframe messaging 105 6 ■ Authentication and sessions 131 7 ■ Security 152 8 ■ Developing a third-party JavaScript SDK 172 9 ■ Performance 202 10 ■ Debugging and testing 224 www.it-ebooks.info www.it-ebooks.info vii contents foreword xii preface xv acknowledgments xvii about this book xix about the authors xxii about the cover illustration xxiii 1 Introduction to third-party JavaScript 1 1.1 Defining third-party JavaScript 2 1.2 The many uses of third-party JavaScript 4 Embedded widgets 6 ■ Analytics and metrics 8 Web service API wrappers 10 1.3 Developing a bare-bones widget 13 Server-side JavaScript generation 14 ■ Distributing widgets as iframes 16 1.4 Challenges of third-party development 17 Unknown context 17 ■ Shared environment 18 Browser restrictions 19 1.5 Summary 20 www.it-ebooks.info CONTENTSviii 2 Distributing and loading your application 21 2.1 Configuring your environment for third-party development 22 Publisher test page 23 ■ The web server 23 ■ Simulating multiple domains 24 2.2 Loading the initial script 26 Blocking script includes 26 ■ Nonblocking scripts with async and defer 27 ■ Dynamic script insertion 29 2.3 The initial script file 31 Aliasing window and undefined 31 ■ Basic application flow 32 2.4 Loading additional files 33 JavaScript files 34 ■ Libraries 36 2.5 Passing script arguments 38 Using the query string 38 ■ Using the fragment identifier 41 Using custom data attributes 42 ■ Using global variables 43 2.6 Fetching application data 45 2.7 Summary 47 3 Rendering HTML and CSS 48 3.1 Outputting HTML 49 Using document.write 49 ■ Appending to a known location 50 Appending multiple widgets 52 ■ Decoupling render targets 54 3.2 Styling your HTML 55 Using inline styles 55 ■ Loading CSS files 56 ■ Embedding CSS in JavaScript 58 3.3 Defensive HTML and CSS 61 Namespaces 61 ■ CSS specificity 62 ■ Overspecifying CSS 64 3.4 Embedding content in iframes 66 Src-less iframes 68 ■ External iframes 70 ■ Inheriting styles 71 ■ When to refrain from using iframes? 75 3.5 Summary 76 4 Communicating with the server 77 4.1 AJAX and the browser same-origin policy 78 Rules for determining same origin 80 ■ Same-origin policy and script loading 80 www.it-ebooks.info CONTENTS ix 4.2 JSON with padding (JSONP) 82 Loading JSON via script elements 82 ■ Dynamic callback functions 84 ■ Limitations and security concerns 86 4.3 Subdomain proxies 88 Changing a document’s origin using document.domain 89 Cross-origin messaging using subdomain proxies 91 Combining subdomain proxies with JSONP 94 ■ Internet Explorer and subdomain proxies 97 ■ Security implications 98 4.4 Cross-origin resource sharing 99 Sending simple HTTP requests 99 ■ Transferring cookies with CORS 102 ■ Sending preflight requests 102 Browser support 103 4.5 Summary 104 5 Cross-domain iframe messaging 105 5.1 HTML5 window.postMessage API 106 Sending messages using window.postMessage 107 Receiving messages sent to a window 109 ■ Browser support 110 5.2 Fallback techniques 112 Sending messages using window.name 112 ■ Sending messages using the URL fragment identifier 115 ■ Sending messages using Flash 118 5.3 Simple cross-domain messaging with easyXDM 120 Loading and initializing easyXDM 121 ■ Sending simple messages using easyXDM.Socket 123 ■ Defining JSON-RPC interfaces using easyXDM.Rpc 125 5.4 Summary 129 6 Authentication and sessions 131 6.1 Third-party cookies 132 Setting and reading sessions 133 ■ Disabling third-party cookies 134 ■ Internet Explorer and P3P headers 136 Detecting when cookies are unavailable 138 6.2 Setting third-party cookies 140 Using dedicated windows 141 ■ Iframe workaround (Safari only) 144 ■ Single-page sessions for Chrome and Firefox 146 www.it-ebooks.info [...]... pictures xxiii www.it-ebooks.info www.it-ebooks.info Introduction to third-party JavaScript This chapter covers  Explaining third-party JavaScript  Real-world examples of third-party applications  Walk-through implementation of a simple embedded widget  Identifying third-party development challenges Third-party JavaScript is a pattern of JavaScript programming that enables the creation of highly distributable... website provider is considered to be third-party www.it-ebooks.info 3 Defining third-party JavaScript Figure 1.1 Websites today make use of a large number of third-party services When you try to apply this definition to JavaScript, things become muddy Many developers have differing opinions on what exactly constitutes third-party JavaScript Some classify it as any JavaScript code that providers don’t... many uses of third-party JavaScript Third-party service (you) 1 Third party authors JavaScript snippet JavaScript snippet Publisher website 2 Publisher places snippet in their HTML source JavaScript snippet 3 Browser requests website from publisher Publisher website publisher.com (second party) Web browser (first party) JavaScript snippet 4 Browser parses HTML – snippet initiates requests to third-party. .. bowels of third-party JavaScript, you need to learn the fundamentals In this chapter, we’ll better define third-party JavaScript, look at realworld implementations from a number of companies, go over a simple implementation of a third-party application, and discuss the numerous challenges facing thirdparty development Let’s start with trying to get a better handle on what third-party JavaScript is and... consists of ten chapters, as follows: Chapter 1 is an introduction to Third-party JavaScript It teaches readers what third-party JavaScript is, and also describes common real-world use-cases It finishes xix www.it-ebooks.info xx ABOUT THIS BOOK with a quick sample third-party application, and highlights some of the difficulties of third-party web development Chapter 2 instructs readers on how to actually... understand what third-party scripts are is to see how they’re used in practice In the next section, we’ll go over some real-world examples of third-party scripts in the wild If you don’t know what they are by the time we’re finished, then our status as third-rate technical authors will be cemented Onward! 1.2 The many uses of third-party JavaScript We’ve established that third-party JavaScript is code... concerns Third-party JavaScript isn’t all gravy Writing these applications is far from trivial There are plenty of pitfalls and hackery you’ll need to overcome before you can ship third-party JavaScript that will hold its own in the wild Luckily, this book will show you how by guiding you through the complete development of a full-featured third-party application But before we dive into the bowels of third-party. .. book Third-party JavaScript is independent client code executing on a publisher’s website, but served from a remote web address It’s used in the creation of highly distributed web applications, from social widgets to analytics trackers to full-featured embedded applications This book serves as an introduction to third-party JavaScript application development It teaches readers not only how to write JavaScript. .. Figure 1.2 A script-loading snippet placed on the publisher’s web page loads third-party JavaScript code www.it-ebooks.info 6 CHAPTER 1 Introduction to third-party JavaScript Armed with the power of remote web page manipulation, the question remains: what is it good for? In this section, we’ll look at some real-world use cases of third-party scripts:  Embedded widgets—Small interactive applications embedded... ecosystems Small companies can benefit from third-party JavaScript too Let’s say you’re the owner of a B2B (business-to-business) web application that hosts web forms to collect information from your customers’ clients You have potential customers out there who’d love to use your application, but are hesitant to redirect their users to an external website With third-party JavaScript, you can have customers . the cover illustration xxiii 1 Introduction to third-party JavaScript 1 1.1 Defining third-party JavaScript 2 1.2 The many uses of third-party JavaScript 4 Embedded widgets 6 ■ Analytics and. Vinegar Anton Kovalyov FOREWORD BY Paul Irish www.it-ebooks.info Third-Party JavaScript www.it-ebooks.info www.it-ebooks.info Third-Party JavaScript BEN VINEGAR ANTON KOVALYOV MANNING Shelter Island www.it-ebooks.info For. an introduction to third-party JavaScript application develop- ment. It teaches readers not only how to write JavaScript code that executes in third- party contexts, but also third-party web development