Accessing local files with d3.json no longer working for firefox?

Up until last week, accessing a local file in firefox was not a problem, as per below:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Albers Projection</title>
<style>

path {
  fill: #ccc;
  stroke: #fff;
  stroke-linejoin: round;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src ="https://d3js.org/topojson.v1.min.js"></script>
<script>
//Map obtained here:
//https://d3js.org/us-10m.v1.json
d3.json("US.json", function(error, us) {
  if (error) throw error;

  d3.select("svg").append("path")
      .datum(topojson.feature(us, us.objects.states))
      .attr("d", d3.geo.path());
});

</script>

However, as of this week, there is an error at the d3.json step:

uncaught exception: [object XMLHttpRequest]

I do not believe this is due to the older versions of D3 either, as it persists with V4 and topojson.v2, except the error here is:

uncaught exception: [object ProgressEvent]

I have not been able to find anything about this. What happened?

Solution

See the release notes

Local files can no longer access other files in the same directory.

More details are given under the security advisories

#CVE-2019-11730: Same-origin policy treats all files in a directory as having the same-origin

The associated bug is currently non-accessible, but there's related discussion in bug 803143. I don't think they have yet documented which options, if any, are available to developers to keep working with local multi-file documents.

You might have to fall back to the old jsonp technique or use a static webserver.

For local development you can override this behavior with about:config -> privacy.file_unique_origin = false, but beware that this exposes you to the kind of local data exfiltration that this change is intended to fix.