🏠 back to Observable

Cross-site error not being shown in notebook


#1

Have notebook that is trying to load a Google spreadsheet via Tabletop library. Get no errors in the notebook but Chrome Dev view shows the following.

  1. If possible I’d like to see an error thrown in the notebook.
  2. Is it possible to grab data this way from Google Spreadsheets/cross-site?

The Content-Security-Policy directive ‘prefetch-src’ is implemented behind a flag which is currently disabled.

worker.2a49796bfc4a393a689ab398b0142c4f288bcfa142b2e5a4cf75d6a0fd570c71.html:1 Failed to load https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://spreadsheets.google.com/feeds/worksheets/1LRw2do_0pPZlbFZ3XOVVSui-ze1RFq_EHTiMles4O-A/public/basic?alt%3Djson&followup=https://spreadsheets.google.com/feeds/worksheets/1LRw2do_0pPZlbFZ3XOVVSui-ze1RFq_EHTiMles4O-A/public/basic?alt%3Djson&ltmpl=sheets: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access.
Blocked current origin from receiving cross-site document at https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://spreadsheets.google.com/feeds/worksheets/1LRw2do_0pPZlbFZ3XOVVSui-ze1RFq_EHTiMles4O-A/public/basic?alt%3Djson&followup=https://spreadsheets.google.com/feeds/worksheets/1LRw2do_0pPZlbFZ3XOVVSui-ze1RFq_EHTiMles4O-A/public/basic?alt%3Djson&ltmpl=sheets with MIME type text/html.


#2

Hi,

Have you seen Mike’s example of a Tabletop usage? Loading spreadsheets with Tabletop should work properly.

  • From the error message, it’d appear that the URL that you’re passing to Tabletop isn’t the published URL from Google Docs, but some other URL. If you can share the notebook, that’d be helpful to debug it.
  • If you check out Mike’s notebook, it has code to properly show an error in the notebook if the spreadsheet can’t be loaded. Unfortunately, Tabletop doesn’t provide any more detail about what kind of error occurred, but it is possible to test whether an error occurred by using the same technique as the linked notebook above.

-Tom


#3

@tom I’m getting a similar error. I think I’ve shared and published as per the Tabletop instructions, but I still get a CORS error:

To reproduce:

from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Any hints?


#4

Hi John, the CORS error I get in firefox with your notebook is associated with the following URL:
https://www.google.com/a/cornerstonenw.com/ServiceLogin?service=wise&passive=1209600&continue=https://docs.google.com/a/cornerstonenw.com/spreadsheets/d/e/2PACX-1vTuC9eeaP-LJfdnTtmCRmovgWPSnegVDLSH29WCXWvZaeQqJtg_ixivoTqGFz0C3JNMBMDvC31GPXYb/pub?output%3Dcsv&followup=https://docs.google.com/a/cornerstonenw.com/spreadsheets/d/e/2PACX-1vTuC9eeaP-LJfdnTtmCRmovgWPSnegVDLSH29WCXWvZaeQqJtg_ixivoTqGFz0C3JNMBMDvC31GPXYb/pub?output%3Dcsv&ltmpl=sheets

It looks like your google docs URL is redirecting to this signin page (at accounts.google.com) which doesn’t allow CORS. Unfortunately, I don’t know how to fix this particular issue without just playing around more with the sharing settings.

However, you might try the following alternate approach to get data out of a published google spreadsheet:

In google docs, go to the File… “Publish to the Web” menu and select the sheet you’re interested in using. Publish that sheet to the web. In the same menu, you can get the tsv (tab-separated format) link by changing the right-side drop-down menu. Copy this link and then you should be able to use it with d3.tsv() in Observable. (The link format is something like https://docs.google.com/spreadsheets/d/e/<LONG STRING OF LETTERS AND NUMBERS>/pub?output=tsv). [CSV might work just as well if your data doesn’t have commas in it]. I’ve never used tabletop so I don’t know if this link will work with that, but it definitely works with d3.

One thing nice about this approach is that you can share just a subset of columns from a sheet and keep the others private by using this trick.

Sometimes you get CORS errors if you have both the google spreadsheets tab and the Observable tab open at the same time, so close the google spreadsheets tab and force-refresh the observable window a few times if you run into this issue.

I had success with this recently so I’ll try to publish a quick demo sheet later this evening.

edit:


#5

@bgchen – Thanks – your post helped me rethink the issue. I created the doc with a google domain account (cornerstonenw.com) which is perhaps the difference with the example Mike posted. I’ll try to confirm if this is the case.