Summary
Third-Party JavaScript guides web developers through the complete development of a full-featured third-party JavaScript application. You'll learn dozens of techniques for developing widgets that collect data for analytics, provide helpful overlays and dialogs, or implement features like chat or commenting. The concepts and examples throughout this book represent the best practices for this emerging field, based on thousands of real-world dev hours and results from millions of users.
About this Book
There's an art to writing third-party JavaScript—embeddable scripts that can plug into any website. They must adapt easily to unknown host environments, coexist with other applications, and manage the tricky security vulnerabilities you get when code and asset files are served from remote web addresses. Get it right and you have unlimited options for distributing your apps. This unique book shows you how.Third-Party JavaScript guides you through the ins and outs of building full-featured third-party JavaScript applications. You'll learn techniques for developing widgets that collect data for analytics, provide helpful overlays and dialogs, or implement features like chat and commenting. The concepts and examples throughout the book represent the best practices for this emerging field, based on thousands of real-world dev hours and results from millions of users.
Written for web developers who know JavaScript, this book requires no prior knowledge of third-party apps.
What's Inside
Writing conflict-free JavaScript, HTML, and CSS Making cross-domain requests from the browser How to overcome third-party cookie limitations Security vulnerabilities of third-party applicationsPurchase of the print book includes a free eBook in PDF, Kindle, and ePub formats from Manning Publications.
About the Authors
Ben Vinegar is an engineer at Disqus, a third-party JavaScript commenting platform. Anton Kovalyov is a software engineer at Mozilla. They are third-party applications experts whose work has been distributed on millions of websites
Table of Contents- Introduction to third-party JavaScript
- Distributing and loading your application
- Rendering HTML and CSS
- Communicating with the server
- Cross-domain iframe messaging
- Authentication and sessions
- Security
- Developing a third-party JavaScript SDK
- Performance
- Debugging and testing
Author(s): Ben Vinegar, Anton Kovalyov
Publisher: Manning Publications
Year: 2013
Language: English
Pages: 288
Tags: Библиотека;Компьютерная литература;HTML / CSS / JavaScript;
Third-Party JavaScript......Page 1
brief contents......Page 6
contents......Page 8
foreword......Page 14
preface......Page 16
acknowledgments......Page 18
Roadmap......Page 20
Author Online......Page 22
about the authors......Page 23
about the cover illustration......Page 24
1 Introduction to third-party JavaScript......Page 26
1.1 Defining third-party JavaScript......Page 27
1.2 The many uses of third-party JavaScript......Page 29
1.2.1 Embedded widgets......Page 31
1.2.2 Analytics and metrics......Page 33
1.2.3 Web service API wrappers......Page 35
1.3 Developing a bare-bones widget......Page 38
1.3.1 Server-side JavaScript generation......Page 39
1.3.2 Distributing widgets as iframes......Page 41
1.4.1 Unknown context......Page 42
1.4.2 Shared environment......Page 43
1.4.3 Browser restrictions......Page 44
1.5 Summary......Page 45
2 Distributing and loading your application......Page 46
2.1 Configuring your environment for third-party development......Page 47
2.1.2 The web server......Page 48
2.1.3 Simulating multiple domains......Page 49
2.2.1 Blocking script includes......Page 51
2.2.2 Nonblocking scripts with async and defer......Page 52
2.2.3 Dynamic script insertion......Page 54
2.3.1 Aliasing window and undefined......Page 56
2.3.2 Basic application flow......Page 57
2.4 Loading additional files......Page 58
2.4.1 JavaScript files......Page 59
2.4.2 Libraries......Page 61
2.5.1 Using the query string......Page 63
2.5.2 Using the fragment identifier......Page 66
2.5.3 Using custom data attributes......Page 67
2.5.4 Using global variables......Page 68
2.6 Fetching application data......Page 70
2.7 Summary......Page 72
3 Rendering HTML and CSS......Page 73
3.1.1 Using document.write......Page 74
3.1.2 Appending to a known location......Page 75
3.1.3 Appending multiple widgets......Page 77
3.1.4 Decoupling render targets......Page 79
3.2.1 Using inline styles......Page 80
3.2.2 Loading CSS files......Page 81
3.2.3 Embedding CSS in JavaScript......Page 83
3.3.1 Namespaces......Page 86
3.3.2 CSS specificity......Page 87
3.3.3 Overspecifying CSS......Page 89
3.4 Embedding content in iframes......Page 91
3.4.1 Src-less iframes......Page 93
3.4.2 External iframes......Page 95
3.4.3 Inheriting styles......Page 96
3.4.4 When to refrain from using iframes?......Page 100
3.5 Summary......Page 101
4 Communicating with the server......Page 102
4.1 AJAX and the browser same-origin policy......Page 103
4.1.2 Same-origin policy and script loading......Page 105
4.2.1 Loading JSON via script elements......Page 107
4.2.2 Dynamic callback functions......Page 109
4.2.3 Limitations and security concerns......Page 111
4.3 Subdomain proxies......Page 113
4.3.1 Changing a document’s origin using document.domain......Page 114
4.3.2 Cross-origin messaging using subdomain proxies......Page 116
4.3.3 Combining subdomain proxies with JSONP......Page 119
4.3.4 Internet Explorer and subdomain proxies......Page 122
4.3.5 Security implications......Page 123
4.4.1 Sending simple HTTP requests......Page 124
4.4.3 Sending preflight requests......Page 127
4.4.4 Browser support......Page 128
4.5 Summary......Page 129
5 Cross-domain iframe messaging......Page 130
5.1 HTML5 window.postMessage API......Page 131
5.1.1 Sending messages using window.postMessage......Page 132
5.1.2 Receiving messages sent to a window......Page 134
5.1.3 Browser support......Page 135
5.2.1 Sending messages using window.name......Page 137
5.2.2 Sending messages using the URL fragment identifier......Page 140
5.2.3 Sending messages using Flash......Page 143
5.3 Simple cross-domain messaging with easyXDM......Page 145
5.3.1 Loading and initializing easyXDM......Page 146
5.3.2 Sending simple messages using easyXDM.Socket......Page 148
5.3.3 Defining JSON-RPC interfaces using easyXDM.Rpc......Page 150
5.4 Summary......Page 154
6 Authentication and sessions......Page 156
6.1 Third-party cookies......Page 157
6.1.1 Setting and reading sessions......Page 158
6.1.2 Disabling third-party cookies......Page 159
6.1.3 Internet Explorer and P3P headers......Page 161
6.1.4 Detecting when cookies are unavailable......Page 163
6.2 Setting third-party cookies......Page 165
6.2.1 Using dedicated windows......Page 166
6.2.2 Iframe workaround (Safari only)......Page 169
6.2.3 Single-page sessions for Chrome and Firefox......Page 171
6.3 Securing sessions......Page 172
6.3.1 HTTPS and secure cookies......Page 173
6.3.2 Multilevel authentication......Page 174
6.4 Summary......Page 176
7 Security......Page 177
7.1 Cookies, sessions, and session theft......Page 178
7.2 Cross-site scripting......Page 179
7.2.1 XSS attacks......Page 180
7.2.2 XSS vulnerabilities in CSS......Page 182
7.2.3 Defending your application against XSS attacks......Page 184
7.3.1 XSRF attacks......Page 186
7.3.2 JSON hijacking......Page 188
7.3.3 Defending your application against XSRF attacks......Page 189
7.4.1 Publisher impersonation......Page 191
7.4.2 Clickjacking......Page 193
7.4.3 Denial of service......Page 195
7.5 Summary......Page 196
8 Developing a third-party JavaScript SDK......Page 197
8.1.1 Initialization......Page 200
8.1.2 Asynchronous loading......Page 201
8.1.3 Exposing public functions......Page 204
8.1.4 Event listeners......Page 205
8.2 Versioning......Page 207
8.2.1 URL versioning......Page 208
8.2.2 Versioned initialization......Page 210
8.3.1 Accessing web service APIs on the client......Page 213
8.3.2 Wrapping the Camera Stork API......Page 216
8.3.3 Identifying publishers......Page 220
8.3.4 User authorization and OAuth......Page 225
8.4 Summary......Page 226
9 Performance......Page 227
9.1 Optimizing payload......Page 228
9.1.1 Combining and minifying source code......Page 229
9.1.2 Reducing image requests......Page 230
9.1.3 Caching files......Page 232
9.1.4 Deferring HTTP requests......Page 233
9.2 Optimizing JavaScript......Page 238
9.2.1 Inside the browser: UI thread, repaint, and reflow......Page 239
9.2.2 Controlling expensive calls: throttle and debounce......Page 240
9.2.3 Deferring computation with setTimeout......Page 243
9.3.1 Optimistic user actions......Page 245
9.3.2 Rendering before document ready......Page 247
9.4 Summary......Page 248
10 Debugging and testing......Page 249
10.1 Debugging......Page 250
10.1.1 Serving development code in production......Page 252
10.1.2 Stepping through the code......Page 258
10.2 Testing......Page 262
10.2.1 Unit, integration, and regression tests......Page 263
10.2.2 Writing regression tests using QUnit......Page 265
10.2.3 Writing regression tests using Hiro......Page 268
10.3 Summary......Page 271
C......Page 274
D......Page 275
H......Page 276
L......Page 277
P......Page 278
S......Page 279
T......Page 280
Z......Page 281
brief contents......Page 6
contents......Page 8
foreword......Page 14
preface......Page 16
acknowledgments......Page 18
Roadmap......Page 20
Author Online......Page 22
about the authors......Page 23
about the cover illustration......Page 24
1 Introduction to third-party JavaScript......Page 26
1.1 Defining third-party JavaScript......Page 27
1.2 The many uses of third-party JavaScript......Page 29
1.2.1 Embedded widgets......Page 31
1.2.2 Analytics and metrics......Page 33
1.2.3 Web service API wrappers......Page 35
1.3 Developing a bare-bones widget......Page 38
1.3.1 Server-side JavaScript generation......Page 39
1.3.2 Distributing widgets as iframes......Page 41
1.4.1 Unknown context......Page 42
1.4.2 Shared environment......Page 43
1.4.3 Browser restrictions......Page 44
1.5 Summary......Page 45
2 Distributing and loading your application......Page 46
2.1 Configuring your environment for third-party development......Page 47
2.1.2 The web server......Page 48
2.1.3 Simulating multiple domains......Page 49
2.2.1 Blocking script includes......Page 51
2.2.2 Nonblocking scripts with async and defer......Page 52
2.2.3 Dynamic script insertion......Page 54
2.3.1 Aliasing window and undefined......Page 56
2.3.2 Basic application flow......Page 57
2.4 Loading additional files......Page 58
2.4.1 JavaScript files......Page 59
2.4.2 Libraries......Page 61
2.5.1 Using the query string......Page 63
2.5.2 Using the fragment identifier......Page 66
2.5.3 Using custom data attributes......Page 67
2.5.4 Using global variables......Page 68
2.6 Fetching application data......Page 70
2.7 Summary......Page 72
3 Rendering HTML and CSS......Page 73
3.1.1 Using document.write......Page 74
3.1.2 Appending to a known location......Page 75
3.1.3 Appending multiple widgets......Page 77
3.1.4 Decoupling render targets......Page 79
3.2.1 Using inline styles......Page 80
3.2.2 Loading CSS files......Page 81
3.2.3 Embedding CSS in JavaScript......Page 83
3.3.1 Namespaces......Page 86
3.3.2 CSS specificity......Page 87
3.3.3 Overspecifying CSS......Page 89
3.4 Embedding content in iframes......Page 91
3.4.1 Src-less iframes......Page 93
3.4.2 External iframes......Page 95
3.4.3 Inheriting styles......Page 96
3.4.4 When to refrain from using iframes?......Page 100
3.5 Summary......Page 101
4 Communicating with the server......Page 102
4.1 AJAX and the browser same-origin policy......Page 103
4.1.2 Same-origin policy and script loading......Page 105
4.2.1 Loading JSON via script elements......Page 107
4.2.2 Dynamic callback functions......Page 109
4.2.3 Limitations and security concerns......Page 111
4.3 Subdomain proxies......Page 113
4.3.1 Changing a document’s origin using document.domain......Page 114
4.3.2 Cross-origin messaging using subdomain proxies......Page 116
4.3.3 Combining subdomain proxies with JSONP......Page 119
4.3.4 Internet Explorer and subdomain proxies......Page 122
4.3.5 Security implications......Page 123
4.4.1 Sending simple HTTP requests......Page 124
4.4.3 Sending preflight requests......Page 127
4.4.4 Browser support......Page 128
4.5 Summary......Page 129
5 Cross-domain iframe messaging......Page 130
5.1 HTML5 window.postMessage API......Page 131
5.1.1 Sending messages using window.postMessage......Page 132
5.1.2 Receiving messages sent to a window......Page 134
5.1.3 Browser support......Page 135
5.2.1 Sending messages using window.name......Page 137
5.2.2 Sending messages using the URL fragment identifier......Page 140
5.2.3 Sending messages using Flash......Page 143
5.3 Simple cross-domain messaging with easyXDM......Page 145
5.3.1 Loading and initializing easyXDM......Page 146
5.3.2 Sending simple messages using easyXDM.Socket......Page 148
5.3.3 Defining JSON-RPC interfaces using easyXDM.Rpc......Page 150
5.4 Summary......Page 154
6 Authentication and sessions......Page 156
6.1 Third-party cookies......Page 157
6.1.1 Setting and reading sessions......Page 158
6.1.2 Disabling third-party cookies......Page 159
6.1.3 Internet Explorer and P3P headers......Page 161
6.1.4 Detecting when cookies are unavailable......Page 163
6.2 Setting third-party cookies......Page 165
6.2.1 Using dedicated windows......Page 166
6.2.2 Iframe workaround (Safari only)......Page 169
6.2.3 Single-page sessions for Chrome and Firefox......Page 171
6.3 Securing sessions......Page 172
6.3.1 HTTPS and secure cookies......Page 173
6.3.2 Multilevel authentication......Page 174
6.4 Summary......Page 176
7 Security......Page 177
7.1 Cookies, sessions, and session theft......Page 178
7.2 Cross-site scripting......Page 179
7.2.1 XSS attacks......Page 180
7.2.2 XSS vulnerabilities in CSS......Page 182
7.2.3 Defending your application against XSS attacks......Page 184
7.3.1 XSRF attacks......Page 186
7.3.2 JSON hijacking......Page 188
7.3.3 Defending your application against XSRF attacks......Page 189
7.4.1 Publisher impersonation......Page 191
7.4.2 Clickjacking......Page 193
7.4.3 Denial of service......Page 195
7.5 Summary......Page 196
8 Developing a third-party JavaScript SDK......Page 197
8.1.1 Initialization......Page 200
8.1.2 Asynchronous loading......Page 201
8.1.3 Exposing public functions......Page 204
8.1.4 Event listeners......Page 205
8.2 Versioning......Page 207
8.2.1 URL versioning......Page 208
8.2.2 Versioned initialization......Page 210
8.3.1 Accessing web service APIs on the client......Page 213
8.3.2 Wrapping the Camera Stork API......Page 216
8.3.3 Identifying publishers......Page 220
8.3.4 User authorization and OAuth......Page 225
8.4 Summary......Page 226
9 Performance......Page 227
9.1 Optimizing payload......Page 228
9.1.1 Combining and minifying source code......Page 229
9.1.2 Reducing image requests......Page 230
9.1.3 Caching files......Page 232
9.1.4 Deferring HTTP requests......Page 233
9.2 Optimizing JavaScript......Page 238
9.2.1 Inside the browser: UI thread, repaint, and reflow......Page 239
9.2.2 Controlling expensive calls: throttle and debounce......Page 240
9.2.3 Deferring computation with setTimeout......Page 243
9.3.1 Optimistic user actions......Page 245
9.3.2 Rendering before document ready......Page 247
9.4 Summary......Page 248
10 Debugging and testing......Page 249
10.1 Debugging......Page 250
10.1.1 Serving development code in production......Page 252
10.1.2 Stepping through the code......Page 258
10.2 Testing......Page 262
10.2.1 Unit, integration, and regression tests......Page 263
10.2.2 Writing regression tests using QUnit......Page 265
10.2.3 Writing regression tests using Hiro......Page 268
10.3 Summary......Page 271
C......Page 274
D......Page 275
H......Page 276
L......Page 277
P......Page 278
S......Page 279
T......Page 280
Z......Page 281