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
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 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.
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 building an app that has to get and set data at a remote web service through requests. When I use the jQuery GET request it works fine, I can request data from the service without any problems, but when I use PUT I get some erros:
OPTIONS http://myurl.com 501 (Unsupported method
('OPTIONS'))
OPTIONS http://myurl.com Origin null is not allowed by Access-Control-Allow-Origin.
I've tried almost anything to get this to work, but it won't work. I've download a chrome app called REST Console, which can make custom REST requests. The strange thing is that I can interact with my server over that app but not through my javascript!
This is the javascript:
$.ajax({
url: 'http://myurl.com',
type: 'PUT',
data: '<time>16:00</time>',
success: function(data) { alert(data); }
});
Could anybody tell me what is going on here?
First ensure you're serving the page that runs the script from a web server, not directly from the file system.
I'm guessing your service at http://myurl.com is at a different host name to the host name your page is being served from? For it to work in this case you need to implement HTTP headers to support Cross Origin Resource Sharing.
Your service at http://myurl.com needs to handle an HTTP OPTIONS request, the response to which should be a set of HTTP headers (with no content) as follows:
Access-Control-Allow-Origin: http://url-of-page-with-javascript/
Optionally you can also specify Access-Control-Allow-Credentials, Access-Control-Allow-Headers and Access-Control-Allow-Methods. See the full specification here.
You'll also need to add the same headers with the same values when your server responds to the PUT request - obviously the content will also be included with this response.
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.