Troubleshooting Common Web Issues

Image / Data Sharing

Cross-Origin Resource Sharing (CORS)

Cross-Origin Resource Sharing (CORS) is a security standard that primarily helps protect users of websites from experiencing malicious content. A core concept of web security is the "same-origin policy," which says that a page at can trust content from the same origin (e.g., ), and that the API can trust requests from that page.

Websites often use data from other domains/origins, such as loading images from other sources. As a user of Aquarium, you're likely providing images from a source that isn't, such as a cloud bucket URL or your own image server. Because this is so common for images, the CORS specs say that if you're only drawing an image onto the page, you don't have to do anything special.

But, if we want to access any values in application logic (e.g., semantic segmentation masks, lidar point clouds, etc.), both the browser app and the server need to set HTTP headers that say they mutually agree that these Cross-Origin requests are ok.

Here are some configurations for common data sources. If you have a setup that doesn't match one of these, reach out to us and we'll work with you to get going!

Cloud Console

Log into your cloud console and navigate to the S3 Buckets page:

Click into the bucket, and navigate to the "Permissions" tab:

Scroll to the bottom, and you'll see an area to provide a CORS configuration:

If you already see a configuration json object, you will want to add the following configuration to the existing list, otherwise you'll replace your existing settings.

Click "Edit", and enter the following configuration:

        "AllowedHeaders": [
        "AllowedMethods": [
        "AllowedOrigins": [
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3600

These settings state that your S3 bucket should allow reads (GET and HEAD) from secure connections to Aquarium. After saving, you should see the following:


Coming soon! In the meantime, please reach out and we'll get you all set up.


Coming soon! In the meantime, please reach out and we'll get you all set up.

For more reading, feel free to check out the Mozilla docs.

Mixed Content (HTTP vs HTTPS)

"Mixed Content" occurs when the main web page uses a secure (HTTPS) connection, but it tries to load content from an insecure (HTTP) connection.

Historically, browsers have differentiated between passive mixed content and active mixed content. Passive content doesn't affect javascript behavior, and is defined as images, video, and audio content. Active content includes everything else that could potentially change how the page behaves. The general consensus was that active mixed content was always bad, but passive mixed content is acceptable.

In 2020, Chromium based browsers (Google Chrome + Microsoft Edge) have started blocking passive mixed content by default. Because Aquarium serves the web app over a secure connection, if you provide your image data using an image server or proxy without SSL / HTTPS support, attempts to load the image will be blocked.

The best option is to enable SSL / HTTPS on your side, but that can take a decent amount of effort. The other, often easier, option is to configure your browser to allow the Aquarium App to accept images from HTTP data sources:

On the page, click on the lock icon and navigate to the "Site settings".

Scroll down until you see the site settings for "Insecure content", which tells Chrome how to treat mixed content on this website:

Update that field to "Allow" for the Aquarium App:

After opening a new tab, you should no longer encounter Mixed Content errors!

For more reading, check out these two blog posts by the Chromium team:

Last updated