Figma plugin UI has a null origin: how I read a Google Sheet without a server or API key

I recently encountered an issue while developing a Figma plugin that retrieves data from a public Google Sheet. Initially, I believed it would be a straightforward process of fetching the CSV, parsing it, and then displaying the data. However, I soon discovered that the Figma plugin UI runs within an iframe with a null origin. This means that the plugin is limited to calling APIs that return a response with Access-Control-Allow-Origin: *.

To better understand the limitations, I created a sandboxed iframe with a null origin and tested various methods to read the Google Sheet. Unfortunately, both the docs.google.com gviz/tq?tqx=out:csv and docs.google.com export?format=csv options were blocked. However, I found that using the sheets.googleapis.com v4 API with the export URL works, provided that an API key is included.

Further investigation revealed an interesting detail about the export URL. Although it has the correct Access-Control-Allow-Origin header in the final response, the initial response is a 307 redirect, and this redirect does not carry the required header. As a result, the browser checks the first response and stops, effectively blocking the data retrieval.

The solution I found was to utilize a script tag, which is not subject to CORS restrictions. By asking Google for the JSON-with-callback format and loading it as a script, I was able to successfully retrieve the data from the Google Sheet. The script tag loads the data using the URL: https://docs.google.com/spreadsheets/d/ID/gviz/tq?tqx=out:json;responseHandler:cb&headers=0, where ID represents the unique identifier of the Google Sheet.

It is crucial to add the headers=0 parameter to ensure that Google correctly identifies the header row, preventing the first data row from being skipped.

While developing browser extensions or plugins, it is essential to verify whether the API being accessed sends Access-Control-Allow-Origin: * by running a curl test. Additionally, if the API involves a redirect, it is crucial to examine the headers of the initial response, rather than the last one. My development environment did not support nested sandbox iframes, so I had to perform these tests in a real Chrome browser to ensure my plugin functioned as expected.

Having experienced this null-origin issue firsthand, I am now more vigilant when working with APIs from different plugin platforms. My background in full-stack development, spanning 13 years, has allowed me to approach this problem from various angles. Currently, I reside in Korea (UTC+9) and specialize in writing code, often leveraging AI translation tools to refine my English skills, as reflected in this report.