Gatsby: Error: Mixed Content Type Detected. Related to HTTPS and Netlify

[maiya-22]

Description

Hi, I came across an issue, while trying to use the gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default. At first, adding the sass dependencies and plugin (per the docs https://www.gatsbyjs.org/docs/sass/) was causing the site to work fine locally, but to break on deploys (both the local netlify live link, and the deploy via netlify's site). Even though I had not added any new links or content, it was giving this error (showing the error seemed to be logging to the console pretty rappidly):

Netlify has a policy that all of the resources have to be https, not http. But the error is showing something in the Gatsby project is making an http request:

```
ERROR: polling-xhr.js:268 Mixed Content: The page at 'https://gatsby-site-name.netlify.live/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://gatsby-site-name-3e8071.netlify.live:61317/socket.io/?EIO=3&transport=polling&t=NCzNlEQ'. This request has been blocked; the content must be served over HTTPS.

```
The errors would not go away, even if I reset the git to before the plugin was installed/ basically the fresh boilerplate.

So, I recreated the project step by step. Strangely, this time, the errors appeared immediately in the local live link (before adding SaSS or changing the repo in any way); however, when I deployed the site to netlify, they did not appear anymore at all - even after adding SaSS dependencies in the same way I had with the original repo.

Steps to reproduce

1. 1 gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
2. remove .git folder
3. re-init git and push it to gitHub
4. netlify init
5. go through the options to link the site to netlify

• build command: gatsby build
• deploy folder: public

_Sometimes_:

1. Run "netlify dev --live"
2. Copy paste the url that is generated in the terminal to the browser.
3. Open the console, and see the Mixed Content Type Errors.

_Other times:_

1. Add install the SaSS dependencies and add the plugin to the array of plugins in the gatsby-config.
2. Run "git push origin master" to trigger automatic deploy to netlify.
3. Allow time for site to build. There are no errors in the build log.
4. (There was a message about a config file being missing, so they use defaults)
5. Go to link of deployed site. See a 404 error in the window.
6. See the logs of the Mixed Content erros in the consol.

Expected result

No errors, and content is reliably rendered.

Actual result

Sometimes there are errors, and sometimes not; and I'm not sure why.

Environment

System:
OS: macOS 10.15.4
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 12.16.1 - /usr/local/bin/node
npm: 6.14.4 - /usr/local/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 83.0.4103.116
Safari: 13.1
npmPackages:
gatsby: ^2.23.12 => 2.23.12
gatsby-image: ^2.4.9 => 2.4.9
gatsby-plugin-manifest: ^2.4.14 => 2.4.14
gatsby-plugin-offline: ^3.2.13 => 3.2.13
gatsby-plugin-react-helmet: ^3.3.6 => 3.3.6
gatsby-plugin-sass: ^2.3.12 => 2.3.12
gatsby-plugin-sharp: ^2.6.14 => 2.6.14
gatsby-source-filesystem: ^2.3.14 => 2.3.14
gatsby-transformer-sharp: ^2.5.7 => 2.5.7
npmGlobalPackages:
gatsby-cli: 2.12.44

[capndave]

I tried to reproduce your error and found several interesting things:

1. The errors your seeing probably have more to do with the netlify-dev process than with gatsby. If you continue to have issues running netlify dev --live you might want to take them up there.

2. I was able to run netlify dev and to view the page at localhost:8000 no problem. I had the same issue with Mixed Content when trying to view the link rendered by the virtual server, after running netlify dev --live. Anyway if you don't need to show this to other people I would avoid using the --live flag.

3. The Mixed Content that is throwing those errors appears to be socket.io watchers. I imagine that they check to see whether your code has changed and reload content (on the server site) if so.

4. As you saw, chrome throws errors on Mixed Content delivered by http, because its insecure. In your case you just need this for development and trust the URL that was given to you, so you can enable mixed content. Following the directions here will get you there.

5. Interestingly, the page rendered from netlify dev --live loaded fine sometimes and didn't load at other times (I hit the refresh button a bunch.) It seems that it is sometimes able to render out the page content before one of the socket.io pings throws an error.

I didn't go further to install SASS or anything, but hopefully this will help. Good luck!

[maiya-22]

Thank you for looking into that, & for the helpful info! I posted on Netlify community, where their devs look at the posts, so hopefully they'll see it there.

[capndave]

Closing this issue as it doesn't involve problems with gatsby

[maiya-22]

Hi @capndave ,
Is it possible to re-open this issue?

There's some confusion. A dev at Netlify seems to think it is coming from the Gatsby repo. Here's the comments/ more info/ related issues: https://community.netlify.com/t/mixed-content-type-error-with-gatsby-related-to-https-and-http/18690.

[jonathanstanley]

the fix:
https://github.com/gatsbyjs/gatsby/blob/67615bf95cd802cc4a430ea6917892a87bebe7d4/packages/gatsby/cache-dir/app.js#L37-L39
should be

const parentSocket = io(
`${window.location.protocol}//${window.location.hostname}:${window.location.port}`
)

(it should use the protocol instead of only http://)

These sort of errors started happening for me when I used gatsby develop --host my.example.com --port 8443 --https
I'm not using Netlify; not a problem on their end.

bug introduced from
https://github.com/gatsbyjs/gatsby/pull/24335 (particularly https://github.com/gatsbyjs/gatsby/pull/24335/commits/a7f92af27526040ed15012ea50465f373606d8b5)

possibly related issues:
https://github.com/gatsbyjs/gatsby/issues/24864 (cors)
https://github.com/gatsbyjs/gatsby/issues/25570 (cors)
https://github.com/netlify/cli/issues/981 (netlify mixed content)