Fix CSP bug in iOS9 (#358)

In iOS9 Safari, a request that violates the Content Security Policy (CSP) rules causes a `DOMException` to be thrown. Since v4.7.0, bugsnag calls `startSession()` synchronously upon startup, which means that any thrown error in that tick of the event loop results in the libary (and anything else in that synchronous execution context) to be unusable. The behaviour of iOS Safari was fixed in version 10, but since we support 9, this needs a workaround.

The xml-http-request transport mechanism already wrapped request.send() with a try/catch, but the error in this instance was coming from the request.open() call. The try/catch block was moved out out to include all of the synchronous code inside sendReport()/sendSession().

README.md

@@ -1,5 +1,5 @@
 # Bugsnag error reporter for JavaScript
-![11.02kB](https://img.shields.io/badge/size-11.02kB-green.svg)
+![11.03kB](https://img.shields.io/badge/size-11.03kB-green.svg)
 [![Documentation](https://img.shields.io/badge/docs-v4-green.svg)](https://docs.bugsnag.com/platforms/browsers/js)
 [![Build status](https://travis-ci.org/bugsnag/bugsnag-js.svg?branch=master)](https://travis-ci.org/bugsnag/bugsnag-js)
 [![BrowserStack Status](https://www.browserstack.com/automate/badge.svg?badge_key=VkNhNGlWRTV6c1Z1VXByYmxFTCtwbUd4M1p5cUI3KzFWRTJvaWk3WFZBTT0tLTBNZjFuM2ZJbW0vUDBPZ1pMQ3ZCd2c9PQ==--003c472323b43561f74fdbca9f732de0f609c74c)](https://www.browserstack.com/automate/public-build/VkNhNGlWRTV6c1Z1VXByYmxFTCtwbUd4M1p5cUI3KzFWRTJvaWk3WFZBTT0tLTBNZjFuM2ZJbW0vUDBPZ1pMQ3ZCd2c9PQ==--003c472323b43561f74fdbca9f732de0f609c74c)

browser/transports/xml-http-request.js

@@ -4,34 +4,34 @@ const { isoDate } = require('../../base/lib/es-utils')
 
 module.exports = {
   sendReport: (logger, config, report, cb = () => {}) => {
-    const url = config.endpoints.notify
-    const req = new window.XMLHttpRequest()
-    req.onreadystatechange = function () {
-      if (req.readyState === window.XMLHttpRequest.DONE) cb(null, req.responseText)
-    }
-    req.open('POST', url)
-    req.setRequestHeader('Content-Type', 'application/json')
-    req.setRequestHeader('Bugsnag-Api-Key', report.apiKey || config.apiKey)
-    req.setRequestHeader('Bugsnag-Payload-Version', '4.0')
-    req.setRequestHeader('Bugsnag-Sent-At', isoDate())
     try {
+      const url = config.endpoints.notify
+      const req = new window.XMLHttpRequest()
+      req.onreadystatechange = function () {
+        if (req.readyState === window.XMLHttpRequest.DONE) cb(null, req.responseText)
+      }
+      req.open('POST', url)
+      req.setRequestHeader('Content-Type', 'application/json')
+      req.setRequestHeader('Bugsnag-Api-Key', report.apiKey || config.apiKey)
+      req.setRequestHeader('Bugsnag-Payload-Version', '4.0')
+      req.setRequestHeader('Bugsnag-Sent-At', isoDate())
       req.send(makePayload(report))
     } catch (e) {
       logger.error(e)
     }
   },
   sendSession: (logger, config, session, cb = () => {}) => {
-    const url = config.endpoints.sessions
-    const req = new window.XMLHttpRequest()
-    req.onreadystatechange = function () {
-      if (req.readyState === window.XMLHttpRequest.DONE) cb(null, req.responseText)
-    }
-    req.open('POST', url)
-    req.setRequestHeader('Content-Type', 'application/json')
-    req.setRequestHeader('Bugsnag-Api-Key', config.apiKey)
-    req.setRequestHeader('Bugsnag-Payload-Version', '1.0')
-    req.setRequestHeader('Bugsnag-Sent-At', isoDate())
     try {
+      const url = config.endpoints.sessions
+      const req = new window.XMLHttpRequest()
+      req.onreadystatechange = function () {
+        if (req.readyState === window.XMLHttpRequest.DONE) cb(null, req.responseText)
+      }
+      req.open('POST', url)
+      req.setRequestHeader('Content-Type', 'application/json')
+      req.setRequestHeader('Bugsnag-Api-Key', config.apiKey)
+      req.setRequestHeader('Bugsnag-Payload-Version', '1.0')
+      req.setRequestHeader('Bugsnag-Sent-At', isoDate())
       req.send(jsonStringify(session))
     } catch (e) {
       logger.error(e)

features/csp.feature

@@ -0,0 +1,10 @@
+@csp
+Feature: Compatibility with a Content Security Policy
+
+Scenario Outline: notifer does not crash for CSP violations
+  When I navigate to the URL "/csp/<type>/a.html"
+  And the test should run in this browser
+  Then I let the test page run for up to 10 seconds
+    Examples:
+      | type       |
+      | script     |

features/fixtures/csp/script/a.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src 'unsafe-inline' 'self';">
+    <script src="/node_modules/bugsnag-js/dist/bugsnag.min.js"></script>
+    <script type="text/javascript">
+      var ENDPOINT = decodeURIComponent(window.location.search.match(/ENDPOINT=(.+)/)[1])
+      var bugsnagClient = bugsnag({
+        apiKey: 'ABC',
+        endpoints: {
+          notify: ENDPOINT,
+          sessions: ENDPOINT
+        },
+        autoNotify: false
+      })
+    </script>
+  </head>
+  <body>
+    <pre id="bugsnag-test-should-run">YES</pre>
+    <pre id="bugsnag-test-state">PENDING</pre>
+    <script>
+      throw new Error('this should not get through')
+    </script>
+    <script>
+      setTimeout(function () {
+        var el = document.getElementById('bugsnag-test-state')
+        // if the CSP violation caused bugsnag not to init, bugsnagClient won't be defined
+        el.textContent = el.innerText = (bugsnagClient ? 'DONE' : 'ERROR')
+      }, 5000)
+    </script>
+  </body>
+</html>

features/fixtures/csp/script/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "bugsnag-js-fixtures-csp-script",
+  "private": true,
+  "scripts": {
+    "build": "echo 'Done'"
+  },
+  "dependencies": {}
+}

features/steps/browser_steps.rb

@@ -1,3 +1,5 @@
+include Test::Unit::Assertions
+
 When("I navigate to the URL {string}") do |path|
   $driver.navigate.to get_test_url path
 end
@@ -15,8 +17,13 @@
   wait = Selenium::WebDriver::Wait.new(timeout: n)
   wait.until {
     $driver.find_element(id: 'bugsnag-test-state') &&
-    $driver.find_element(id: 'bugsnag-test-state').text == 'DONE'
+    (
+      $driver.find_element(id: 'bugsnag-test-state').text == 'DONE' ||
+      $driver.find_element(id: 'bugsnag-test-state').text == 'ERROR'
+    )
   }
+  txt = $driver.find_element(id: 'bugsnag-test-state').text
+  assert_equal('DONE', txt, "Expected #bugsnag-test-state text to be 'DONE'. It was '#{txt}'.")
 end
 
 When("the exception matches the {string} values for the current browser") do |fixture|