Merge pull request #145 from andybons/andybons/prefix

Add attribute and header detection to automatically strip JSON response prefixes

Author: rictic

iron-ajax.html

@@ -283,6 +283,23 @@
         notify: true
       },
 
+      /**
+       * Prefix to be stripped from a JSON response before parsing it.
+       *
+       * In order to prevent an attack using CSRF with Array responses
+       * (http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx/)
+       * many backends will mitigate this by prefixing all JSON response bodies
+       * with a string that would be nonsensical to a JavaScript parser.
+       *
+       * In the case where the server returns a prefix via the `X-JSON-Prefix`
+       * header, this attribute can be omitted as the value of the header will
+       * supercede the value passed here.
+       */
+      jsonPrefix: {
+        type: String,
+        value: ''
+      },
+
       _boundHandleResponse: {
         type: Function,
         value: function() {
@@ -292,8 +309,8 @@
     },
 
     observers: [
-      '_requestOptionsChanged(url, method, params.*, headers,' +
-        'contentType, body, sync, handleAs, withCredentials, timeout, auto)'
+      '_requestOptionsChanged(url, method, params.*, headers, contentType, ' +
+          'body, sync, handleAs, jsonPrefix, withCredentials, timeout, auto)'
     ],
 
     /**
@@ -380,6 +397,7 @@
      *   body: (ArrayBuffer|ArrayBufferView|Blob|Document|FormData|null|string|undefined|Object),
      *   headers: (Object|undefined),
      *   handleAs: (string|undefined),
+     *   jsonPrefix: (string|undefined),
      *   withCredentials: (boolean|undefined)}}
      */
     toRequestOptions: function() {
@@ -390,6 +408,7 @@
         body: this.body,
         async: !this.sync,
         handleAs: this.handleAs,
+        jsonPrefix: this.jsonPrefix,
         withCredentials: this.withCredentials,
         timeout: this.timeout
       };

iron-request.html

@@ -56,7 +56,7 @@
         notify: true,
         readOnly: true,
         value: function() {
-         return null;
+          return null;
         }
       },
 
@@ -177,6 +177,7 @@
      *   body: (ArrayBuffer|ArrayBufferView|Blob|Document|FormData|null|string|undefined|Object),
      *   headers: (Object|undefined),
      *   handleAs: (string|undefined),
+     *   jsonPrefix: (string|undefined),
      *   withCredentials: (boolean|undefined)}} options -
      *     url The url to which the request is sent.
      *     method The HTTP method to use, default is GET.
@@ -204,6 +205,29 @@
         });
       }.bind(this))
 
+      xhr.addEventListener('readystatechange', function () {
+        if (xhr.readyState === 2 && options.async !== false) {
+          // Headers have been received.
+          var jsonPrefix = xhr.getResponseHeader('X-JSON-Prefix') ||
+              options.jsonPrefix;
+          var handleAs = options.handleAs;
+
+          // If a JSON prefix is present, the responseType must be 'text' or the
+          // browser won’t be able to parse the response.
+          if (!!jsonPrefix || !handleAs) {
+            handleAs = 'text';
+          }
+          // In IE, `xhr.responseType` is an empty string when the response
+          // returns. Hence, caching it as `xhr._responseType`.
+          xhr.responseType = xhr._responseType = handleAs;
+
+          // Cache the JSON prefix, if it exists.
+          if (!!jsonPrefix) {
+            xhr._jsonPrefix = jsonPrefix;
+          }
+        }
+      }.bind(this));
+
       xhr.addEventListener('error', function (error) {
         this._setErrored(true);
         this._updateStatus();
@@ -269,17 +293,10 @@
         );
       }, this);
 
-      var body = this._encodeBodyObject(options.body, headers['content-type']);
-
-      // In IE, `xhr.responseType` is an empty string when the response
-      // returns. Hence, caching it as `xhr._responseType`.
-      if (options.async !== false) {
-        xhr.responseType = xhr._responseType = (options.handleAs || 'text');
-      }
       xhr.withCredentials = !!options.withCredentials;
       xhr.timeout = options.timeout;
 
-
+      var body = this._encodeBodyObject(options.body, headers['content-type']);
 
       xhr.send(
         /** @type {ArrayBuffer|ArrayBufferView|Blob|Document|FormData|
@@ -301,6 +318,15 @@
       var xhr = this.xhr;
       var responseType = xhr.responseType || xhr._responseType;
       var preferResponseText = !this.xhr.responseType;
+      var prefixHeader = xhr.getResponseHeader('X-JSON-Prefix');
+      if (prefixHeader) {
+        // If a JSON prefix header is set, the response must be interpretted as
+        // text so that the prefix can be stripped. Otherwise the browser will
+        // try and fail to.
+        responseType = 'text';
+      }
+      var prefixLen = (prefixHeader && prefixHeader.length) ||
+          (xhr._jsonPrefix && xhr._jsonPrefix.length) || 0;
 
       try {
         switch (responseType) {
@@ -315,7 +341,7 @@
               // That is to say, we try to parse as JSON, but if anything goes
               // wrong return null.
               try {
-                return JSON.parse(xhr.responseText);;
+                return JSON.parse(xhr.responseText);
               } catch (_) {
                 return null;
               }
@@ -329,8 +355,20 @@
           case 'arraybuffer':
             return xhr.response;
           case 'text':
-          default:
+          default: {
+            // If `prefixLen` is set, it implies the response should be parsed
+            // as JSON once the prefix of length `prefixLen` is stripped from
+            // it. Emulate the behavior above where null is returned on failure
+            // to parse.
+            if (prefixLen) {
+              try {
+                return JSON.parse(xhr.responseText.substring(prefixLen));
+              } catch (_) {
+                return null;
+              }
+            }
             return xhr.responseText;
+          }
         }
       } catch (e) {
         this.rejectCompletes(new Error('Could not parse response. ' + e.message));

test/iron-request.html

@@ -43,6 +43,21 @@
           '{"success":true}'
         ]);
 
+        server.respondWith('GET', '/responds_to_get_with_prefixed_json', [
+          200,
+          jsonResponseHeaders,
+          '])}while(1);</x>{"success":true}'
+        ]);
+
+        server.respondWith('GET', '/responds_to_get_with_prefixed_json_and_header', [
+          200,
+          {
+            'Content-Type': 'application/json',
+            'X-JSON-Prefix': '])}while(1);</x>'
+          },
+          '])}while(1);</x>{"success":true}'
+        ]);
+
         server.respondWith('GET', '/responds_to_get_with_500', [
           500,
           {},
@@ -136,6 +151,41 @@
           });
         });
 
+        test('setting jsonPrefix correctly strips it from the response', function () {
+          var options = {
+            url: '/responds_to_get_with_prefixed_json',
+            handleAs: 'json',
+            jsonPrefix: '])}while(1);</x>'
+          };
+
+          request.send(options);
+          expect(server.requests.length).to.be.equal(1);
+          expect(server.requests[0].requestHeaders['accept']).to.be.equal(
+              'application/json');
+          server.respond();
+
+          return request.completes.then(function() {
+            expect(request.response).to.deep.eq({success: true});
+          });
+        });
+
+        test('json prefix is correctly stripped from the response with header', function () {
+          var options = {
+            url: '/responds_to_get_with_prefixed_json_and_header',
+            handleAs: 'json'
+          };
+
+          request.send(options);
+          expect(server.requests.length).to.be.equal(1);
+          expect(server.requests[0].requestHeaders['accept']).to.be.equal(
+              'application/json');
+          server.respond();
+
+          return request.completes.then(function() {
+            expect(request.response).to.deep.eq({success: true});
+          });
+        });
+
         test('responseType cannot be configured via handleAs option, when async is false', function () {
           var options = Object.create(successfulRequestOptions);
           options.handleAs = 'json';