I am pretty new to SSL / https but finally managed to create one for my website
https://thaihome.co.uk
Now the problem is this strange error:
app.7e27c5b6c47cfaa5a0da.js:70 error occured for getting the country from: http://freegeoip.net/json/ {data: null, status: -1, config: {…}, statusText: "", headers: ƒ}
app.7e27c5b6c47cfaa5a0da.js:70 Mixed Content: The page at 'https://thaihome.co.uk/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://freegeoip.net/json/'. This request has been blocked; the content must be served over HTTPS.
And its spitting out the error so fast that the browser almost dies.
What does this mean? and what can I do about fixing it?
The error message explains it pretty clearly and tells you exactly what you need to do to fix it.
Mixed Content
You are mixing content (from HTTPS and HTTP).
The page at 'https://thaihome.co.uk/'
This is your page.
was loaded over HTTPS
You said you set it up for HTTPS. It is HTTPS now.
but requested an insecure XMLHttpRequest endpoint 'http://freegeoip.net/json/'.
And you have some JavaScript which is making an HTTP request using the XMLHttpRequest object.
The URL you are requesting is http://freegeoip.net/json/ which isn't secure. i.e. it uses HTTP not HTTPS. You can tell because it starts http:.
This request has been blocked;
Because it is insecure, it has been blocked. Otherwise it would inject insecure content into an otherwise secure page. The page wouldn't be secure any more.
the content must be served over HTTPS.
You need to load it over HTTPS so it is secure before you can load it from your HTTPS page.
It means you need to make the API request to https://freegeoip.net/json instead of http://freegeoip.net/json
Edit: When you enable SSL on your website, all assets and requests must be made to secure endpoints. Meaning even if you have an image tag that has an unsecured image link going to http like this: <img src="http://unsecure.com/img.jpeg" /> your browser will not give you the green lock secure symbol. Everything needs to be done over https.
Related
I am having issues returning API data from a GET request for a secure HTTPS Strava API endpoint. I use the following jQuery request:
$.get(`https://strava.com/api/v3/athletes/249995/activities?access_token=[access token here]/`, function(data, status) {
console.log(data[0].name);
}, 'json');
I expect the data to be returned, but instead I'm getting a Mixed Content error:
Mixed Content: The page at 'https://mitchellgsides.github.io/Strava-PR-Lister/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.strava.com/api/v3/athletes/249995/activities?access_token=[access token here]'. This request has been blocked; the content must be served over HTTPS.
I can follow the exact requested link:
https://strava.com/api/v3/athletes/{id}/activities?access_token={accesstoken}/
with no issues, and the result shows as a secure HTTPS with what I want, but my app won't load the content. How can I get rid of the mixed content error, when that error shouldn't apply because the content IS served over HTTPS?
I've solved it! Since I didn't specify 'www.' in my request, the request was redirected as HTTP. In order to avoid redirection, I've made the request identical, like this:
https://www.strava.com/...
instead of
https://strava.com/...
I have a website based on HTTPS, and I have a JS code the get data from a website based on HTTP. I get an error that the HTTP server is not trusted.
While the same code works on HTTP to HTTP. But not on HTTP to HTTPS.
This is the error:
Mixed Content: The page at 'https://www.33k.com/player/playerudan.php' was loaded over HTTPS, but requested an insecure script 'http://33k.thepuremix.net/json.xsl'. This request has been blocked; the content must be served over HTTPS.
For getting this data I use something like the following code:
var URL = "http://33k.thepuremix.net/json.xsl"
$.getJSON( URL, function( data) {
console.log( data );
});
Any idea how to fix it or make it working. Is there such a Crossdomain.xml on Icecast that I can give configure or anything else to fix it?
UPDATE:
The above links are two different websites. It is not a sub-domain matter. The links just look alike a bit. Domain A(HTTPS) wants to get JSON from domain B (HTTP).
Calling HTTP from HTTPS is blocked by design as #RoryMcCrossan mentioned in the comments (Same Origin Policy), you can either move your script from HTTP to HTTPS or make a backend script (in PHP for example) and call HTTP from it like:
JavaScript(HTTPS) -> PHP(HTTPS) -> PHP(HTTP)
JavaScript(HTTPS) <- PHP(HTTPS) <- PHP(HTTP)
Reference to creating a http request in PHP: Http Request in PHP
Here's also some info about Same Origin Policy
I'm trying to get the current time from http://timeapi.org/utc/now.json. I'm using the following:
var date;
$.ajax({
dataType: 'jsonp',
url: 'http://timeapi.org/utc/now.json',
success: function (result) {
date = result.dateString;
}
});
The URL is only available as HTTP, but I'm calling it from an HTTPS site. This leads to the error:
'https://myurl.com' was loaded over HTTPS, but requested an insecure script 'http://timeapi.org/utc/now.json?callback=jQuery1122020058229618158618_1466258121249'. This request has been blocked; the content must be served over HTTPS.
The timeapi website does not actually exist as https, so changing the URL to https leads to a new error: http://timeapi.org/utc/now.json
How can I force it to load? There do not seem to be any https web time services, but I imagine there has to be a way in which people on https sites are using external time-keeping services as well.
You can't.
From HTTPS, only HTTPS. From HTTP you can call HTTP and HTTPS.
What you could do is to create an https wrapper (in php or node) in your own webserver and retrieve the value from timeapi.org from there.
Something like this:
<?php
header('Content-Type: application/json');
echo(file_get_contents('http://timeapi.org/utc/now.json'));
You can't make http requests from an https.
It is restricted by same origin policy
The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.
I'm getting this error when I try to use $.get on a non-secure site (ie. http, not https):
jquery.min.js:4 Mixed Content: The page at '...' was loaded over HTTPS, but requested an insecure script 'http://api.openweathermap.org/data/2.5/weather?lat=50&lon=2?callback=jQuery...'. This request has been blocked; the content must be served over HTTPS.
I've been trying to think of work-around solutions to this. The problem is a fixed one, since the server is hosted by OpenWeather.org and it's a non-secure site (ie. http, not https).
This is my request code:
$.get("https://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&APPID=123456", function(data) {
tempC = data.weather.main.temp / 10; // OpenWeather API returns Celsius * 10
rain = data.rain["3h"];
clouds = data.clouds.all;
});
Simply changing the request URL to https://api.openweathermap.org... doesn't work, of course. Tried it and didn't work.
The only solution I can think of right now is to find another weather API that is free to use for my project, but I'd like to know if there's a way to still use OpenWeathermap's API, given that it's http. Curious to know this because it seems quite wasteful to have to dismiss certain APIs just because it's http and not https.
Found another post on SO about the same "mixed content" issue. It's helpful and points to many other resources to solve the problem.
The asker ended up dropping openweathermap API (because it's served over HTTP) and using forecast.io's API instead (served over HTTPS while still free).
Using Open Weather Map which is HTTP only through an HTTPS website and NOT get mixed content warning
so, the Problem is, that you run your code on a HTTPS site(JSFiddle and Coodepen). Your browser will not allow HTTP-Connections on a HTTPS site for security-reasons. You can solve that issue by either forcing HTTP on the page where you run your code(try to run a code from a local file or localhost) or you could create a HTTPS -> HTTP forwarding on your server, that would receive a HTTPS request from your code and send a HTTP-request to API.
I would suggest first try to run from a localhost or local file(not sure if every browser will allow AJAX from a local file, but you can try before setting up localhost), that should work for you. If you just want to test the API you can simple copy the URL of the GET-request into you browser tab and execute it.
How can I send an ajax GET request over HTTPS?
$.get throws this:
XMLHttpRequest cannot load https://********. Origin null is not allowed by Access-Control-Allow-Origin.
Is there another way or some workaround to get this working?
If I navigate to the url with Chrome I'm able to get the response. I see no reason why it shouldn't work work over an ajax request.
You cannot make an AJAX request to an https page if you are currently in http because of the Same Origin Policy.
The host, port and scheme (protocol) must be the same in order for the AJAX request to work.
You can either make sure that the originating page is on the same host and scheme or implement CORS (cross-origin resource sharing) on the target domain to permit this particular request.
[jQuery v. 3.3.1]
I have a web application, where all resources and traffic are via HTTPS.
Yet, I found that I can't send $.ajax() or any of the specific $.get, $.post, etc. due to (Chrome output):
Refused to connect to 'http://mywebapp/api/mycall' because it violates the following Content Security Policy directive: "connect-src 'self'".
It was due to the HTTPS page making the AJAX requests through HTTP and I found no way to force HTTPS.
What is crazy is what fixed it. Calling $.get('/api/mycall/') outputs the above error with "Refused to connect to 'http://mywebapp/api/mycall'", which omits the ending forward slash in the actual call in the code. So from the error it looks as if the forward slash wasn't there.
I have done multiple calls and every single one fails when there is an ending slash in the url being called. The same ones all succeed without one.
So calling $.ajax({ url: '/api/mycall'}) works, whilst $.ajax({ url: '/api/mycall/'}) doesn't.