I tried deploying a Heroku web app with my Flask backend (not on Heroku, actually on GCP) and got the following message in my browser's dev console:
Mixed Content: The page at 'https://x.herokuapp.com/' was loaded over
HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://x:5000/endpoint'. This request has been blocked; the content
must be served over HTTPS.
I have little experience with serving and SSL, but the first temptation here would be to find a way to make Heroku okay with using http endpoints. And I'd love to avoid setting up SSL if possible.
What are my options from here?
Thanks!
In the end I realised that by applying my own http domain to the project (rather than using Heroku's domain), I am able to avoid the issue.
Then with http on the frontend, I was able to call http endpoints from my GCP server.
Related
I have a running Azure java backend service which is without a security certificate and a running Firebase Hosting React project with a security certification.
Backend: http:// some_ip_address:10000/
Frontend: https:// project_id.web.app/
I am using axios in the frontend project. When I make an axios request, I am facing to this Mixed-Content error.
Mixed Content: The page at 'https://project_id.web.app/auth/login' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://some_ip_address:10000/otp/create'. This request has been blocked; the content must be served over HTTPS.
Instead of changing "insecure content" setting from the browser, what is the solution to fix this?
I'm new to Azure and trying to set up my nextjs client app and my ASP.NET Core backend app. Everything seems to play well now, except for file uploads. It's working on localhost, but in production the backend returns a 404 web page (attached image) before reaching the actual API endpoint. I've also successfully tested to make a multipart/form-data POST request in Postman from my computer.
The way I implemented this is that I'm proxying the upload from the browser through an api route (client's server side) to the backend. I have to go via the client server side to append a Bearer token from a httpOnly cookie.
I've enabled CORS in Startup.cs:
app.UseCors(builder => { builder.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod(); });
The frontend and backend apps are running in individual services and I've tried to enable CORS in the Azure portal as well, but there I could only allow origins, not headers and methods? The error message doesn't indicate CORS problems, but I just wanted make sure..
As far as I can see the requests look good, with correct URLs and origins. I suspect I'm missing some config in azure, but I didn't get any further by following the hints in the error message.
Any suggestions to what may cause this? Or where I can start looking. I'm not quite sure where to look for log output for this issue.
I finally got this working. I figured the host header in the proxy http request was unchanged. I only changed the URL for the proxy request, but I solved it by setting the host manually as well. This also explains why it was working at localhost, since both the client and backend was running at the same host.
I am using two application parts that deployed on: AWS Beanstalk and Netlify.
Java-based part is deployed on AWS and available on http protocol.
Angular based is deployed on Netlify and available on https protocol.
The error occurs when sending a request to AWS:
Mixed Content: The page at 'https://some-url.netlify.com/' was loaded over
HTTPS, but requested an insecure XMLHttpRequest endpoint
'http://some-url.elasticbeanstalk.com/api/getAppSettings'. This request has
been blocked; the content must be served over HTTPS.
I need to do it working for learning purposes only, so try to make Netlify working under Http.
Is it possible to change the protocol to simple http on Netlify?
The adding SSL certificate to Elastic Beanstalk is complicated, unclear and takes too much time
AFAIK, netlify doesn't allow you to access website over HTTP, as they force redirect to HTTPS by default, as mentioned here. But its really easy to have HTTPS on AWS - your elastic beanstalk instances are served with HTTPS by default using an AWS owner certificate, and you can link your custom domain certificate if you have a custom domain, very easily from AWS Certificate Manager.
You can create a netlify.toml file and do some redirect tweaking, as mentioned here.
Creating and configuring a _redirects file in the root of your build folder(or in your public folder if using an SPA like React) might help with this. For your example, the _redirects file would look something like this:
/api/* http://some-url.elasticbeanstalk.com/api/:splat 200
Then rather than call endpoints like this:
fetch(`http://some-url.elasticbeanstalk.com/api/getAppSettings`)
You would need to make your API calls in this format:
fetch(`/api/getAppSettings`) // 'it reads /api/ because of how we configured our _redirects file'
You can read more on how to make netlify proxying here
Our security team recently change the service to become HTTPS (from http).
We can hit the main svc page, but accessing methods gives a 403 error now.
We tested it using Postman - do we need to configure the request differently now that it is HTTPS?
thanks.
I have an HTML5/JS website on on domain, which uses an asp.mvc web service for CORS queries on another domain.
Everything works fine with HTTP -> HTTP however as we are now adding login and authentication mechanisms for user specific content we are wanting to enable HTTPS. However it just refuses to send the options request to the web service, just gives an "Aborted" status.
I am testing using Firefox and the web service is hosted on IIS7 with a self cert (generated with SelfSSL7).
Is there any known issues around this? I did check:
Cross domain request from HTTP to HTTPS aborts immediately
However it mentions the solution is to make sure the cert is trusted, and to my knowledge SelfSSL is doing this using the /T option when I call it. So is there anything else which needs to be changed to get this working?
You will unfortunately need to manually set this in firefox, although I believe you can override this behaviour if you manually set the profile configuration.