Merge pull request #551 from Microsoft/beaconFix

pass text/plain data to sendBeacon

JavaScript/JavaScriptSDK.Tests/E2ETests/SenderE2E.tests.ts

@@ -44,7 +44,7 @@ class SenderE2ETests extends TestClass {
             steps: [
                 () => {
                     if (!(<any>navigator).sendBeacon) {
-                        (<any>navigator)['sendBeacon'] = (url: any, data: any) => { };
+                        (<any>navigator)['sendBeacon'] = (url: any, data: any) => { return true; };
                     }
 
                     var config = Microsoft.ApplicationInsights.Initialization.getDefaultConfig();
@@ -58,8 +58,15 @@ class SenderE2ETests extends TestClass {
                 () => {
                     Assert.ok(this.beaconSpy.calledOnce);
 
-                    var payload = <string>this.beaconSpy.args[0][1];
-                    Assert.ok(payload.indexOf('{"baseType":"EventData","baseData":{"ver":2,"name":"test"}}') >= 0);
+                    var payload = this.beaconSpy.args[0][1];
+                    Assert.equal("text/plain;charset=utf-8", payload.type);
+
+                    let reader = new FileReader();
+                    reader.addEventListener('loadend', (e) => {
+                      let text = (<any>e).srcElement.result;
+                      Assert.ok(text.indexOf('{"baseType":"EventData","baseData":{"ver":2,"name":"test"}}') >= 0);
+                    });
+                    reader.readAsText(payload);
                 }
             ]
         });

JavaScript/JavaScriptSDK/Sender.ts

@@ -22,7 +22,7 @@ interface XDomainRequest extends XMLHttpRequestEventTarget {
 
 declare var XDomainRequest: {
     prototype: XDomainRequest;
-    new (): XDomainRequest;
+    new(): XDomainRequest;
 };
 
 module Microsoft.ApplicationInsights {
@@ -443,8 +443,12 @@ module Microsoft.ApplicationInsights {
             var url = this._config.endpointUrl();
             var batch = this._buffer.batchPayloads(payload);
 
+            // Chrome only allows CORS-safelisted values for the sendBeacon data argument
+            // see: https://bugs.chromium.org/p/chromium/issues/detail?id=720283
+            let plainTextBatch = new Blob([batch], { type: 'text/plain;charset=UTF-8' });
+            
             // The sendBeacon method returns true if the user agent is able to successfully queue the data for transfer. Otherwise it returns false.
-            var queued = (<any>navigator).sendBeacon(url, batch);
+            var queued = navigator.sendBeacon(url, plainTextBatch);
 
             if (queued) {
                 this._buffer.markAsSent(payload);