HTTPS conflicts with HTTP
I make my first full-stack project on React and NODEjs and deployed it on netlify.
My backend server runs on HTTP localhost.
And here is a problem:
My app works on my Mac in Chrome but doesn't work properly on other browsers and computers.
Other computers can download index.js (display sign-up and sign-in pages) and it seems there is no problem with CORS but authentication doesn't work.
Safari logs mistakes:
[blocked] The page at https://MYAPP.netlify.appwas not allowed to display insecure content from http://localhost:3500/register.
Not allowed to request resource
XMLHttpRequest cannot load http://localhost:3500/register due to access control checks.
I don't understand why the app works on my MAC but
doesn't on other computers and can't find an answer on how to solve this HTTPS - HTTP conflict
I have tried to find a problem in CORS but it looks like CORS is ok. Also, I tried rewriting the server with HTPPS but it didn't work.
I've never worked with Netlify, so I could be wrong, but I suspect your problem isn't directly related to Netlify.
The Safari error message indicates that your frontend is trying to talk directly to localhost. localhost is an alias for "the computer that is making the connection attempt" under normal circumstances. This means that when someone runs your frontend, the browser tries to talk to the backend running on the same computer that the browser is running on.
This works on your computer in Chrome because you probably have the backend running on your computer for testing. Safari is only complaining that the frontend was loaded via HTTPS but is trying to talk to non-HTTPS servers. It is not stating that it can't talk to the backend, it's stating that it won't even try.
If I'm right and you shut down the back end on your computer, it will start to fail on your computer as well, even on Chrome.
If this is the problem, the solution can be one of two things: You can either run the backend somewhere where it has a domain name/ip address that everyone can connect to, or you need to run a proxy for your backend somewhere where it also meets those conditions, and has a way to pass the request on to where your full backend does run.
You need to find a way to run your backend somewhere other than your own computer or have something somewhere else proxy requests to your computer which then gets relayed to the localhost address. How you go about that will depend on things you didn't specify in the original question.
Related
my Node.js server is supposed to send a GET request to a third-party website vie https.get, but that website returns a 503 error, which is strange, because when I send the exact same request from my own device everything works as intended. Does anybody know what may be the cause of this problem, and how it can be fixed?
EDIT: The website uses CloudFlare, it might be related to theproblem but still - it works in my device.
Checking if the site connection is
shahed4u.vip needs to review the security of
If you are using cloudflare it's just normal, because cloudflare prevent access to bots.
Note: all informatical program making HTTP request are bots, is considered as "true clients" by cloudflare browsers with graphical instance, cookies, and algorythm (check this article on how cloudflare detect "bots")
I have developed a node js application which works fine as long as use http. Now I need to upgrade the code too be able to work ssl and I am having problems to load the socket.io-client/socket.io.js file. (The rest is working fine. I installed the certificates and the server works well)
Firefox fails with the following message: Blocked loading mixed active content "http://"url"/socket.io/?EIO=3&transport=polling&t=NX-uS5E". which is weird because the link states a http request.
Chrome fails with this message: socket.io.js:3511 Mixed Content: The page at 'https://"url"?' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://"url"/socket.io/?EIO=3&transport=polling&t=NX-s_OB'. This request has been blocked; the content must be served over HTTPS.
It seems that socket.io-client is trying to load a resource using http instead of https. Is that possible?
How can I correct this? Any idea?
I have been searching the web for two days noow and I have not come to any indication of someone else having this issue
Ok, after letting it go for the evening and having a good rest I checked my whole code again and found the error!
I had one obfuscated code line where I was using a http request instead of a https one. I had to correct this on both, the server and the client side.
I also had to include the port number on each of the calls and force the socket on the client side to use polling instead of websockets by adding the option "transports: ['polling']"
ngrok is a program with which you can make a local tunnel, it generates a temporary domain for you so you can redirect people to your local content, and also use https via localhost.
https://ngrok.com/
localtunnel is just another alternative.
So I have set up either ngrok and a localtunnel but both show a white page with only the HTML loading and not css or js when loaded outside of my network (with data plan for example)
The problem is nothing gives an error, the only thing I can see is ERR_CONNECTION_TIMED_OUT when using a hotspot.
Everything works within my own network.
I have tried turning off the firewall already but it seems to make no difference, also tried looking with the chrome remote debugger but it just disconnects when I load the url.
Thing is when I go to https:// on the ngrok url I get a bunch of mixed content errors, but not when I go to http. Seem illogical to me that it would default to http when using a https link... all of my script/style tags are relative paths.
Anyway so far this is only thing that I can figure out, any ideas on what might cause this?
So it's either
ERR_CONNECTION_TIMED_OUT
or
Blocked loading mixed active content
or both?
So I go it working now by changing the base href.
<base href="http://yoururl.ngrok.io">
And also changing some paths in my config to either /app/ or ../ respectively, but most of these were already set correctly and all I did was revert them after changing the base url.
As far I understand now the problems only really start to occur when connecting to the url through a data plan and not wifi.
Some random image paths in css/js will not load, and it also appears to behave differently on Firefox and Chrome for some reason.
Problem is I cannot keep testing this indefinitely as data will obviously run out some time and I have no reliable way of debugging the console errors on mobile...
In conclusion it works on a "normal" connection now (ie Wifi/Cable) but not on data.
I've got a requirement to detect if a webpage is being served on the internet or intranet, i.e. assuming a url of https://accessibleanyway.com, is the phone connected to the work wifi or to something else like their home wifi or the phone network?
What different ways are there to do this?
(1) Use WebRTC to get the local ip address. Not widely supported
(2) Try to access a local web page using jsonp/cors/iframe
The problem with 2 is that the webpage is https and the local resource is likely to be http which you can't do in IE afaik. If I make the local resource https then it's via a self cert which means installing CAs on the phones (can you buy certificates for the intranet anymore?)
Any suggestions?
The problem with (2) was that the same page was trying to use http and https, and even with an iframe you get issues.
What you could do instead is start on a http loading page, use an iframe to access a local resource which you can only access if you are on the intranet, jsonp will work fine for this. Once that's worked or failed, redirect to your start page with some token in the querystring to indicate that you are on the intranet or not
NB jumping from http to https would probably have some security issues if you are on the same website (authentication cookies being initially visible), but I would have thought it would be fine if you are going to a different one
Obviously there'll be some security needed around the token as otherwise the user could just generate their own but that's a different matter which depends on individual setups. It would obviously have to be generated by a server call, otherwise someone could just read the client code.
NB I think the IP address approach is never going to work as you have no way of knowing what a companies intranet setup looks like until you go there, so it's not a generic answer
Recently I started getting The connection was reset. error message (error code is ERR_CONNECTION_RESET) when I open one of my websites. This has nothing to do with application(node.js) level afaik as no changes or deploys were made in the application. To add to this, there were no error logs so I am assuming the request did not even receive the node app. The website is hosted on godaddy and its backend is a elastic beanstalk application. How do I fix this? On the web browser, in the second attempt it automatically loads correctly. But in a iframe which embeds my website, this has become a nasty issue as the browser does not even retry. I did the DNS analysis using dig command and all that but could not find anything relevant. Interesting part is this only happens after some interval (it does not happen continuously). On reload it works without fail.