Load cover-image with javascript on https website - javascript

Our app is delivered through https, we have a possibility of embedding vimeo videos in it.
Now, we're using JavaScript to load among other things a cover-image.
A call could look something like this
$.ajax({
type: 'GET',
url: 'https://www.vimeo.com/api/v2/video/80973511.json',
jsonp: 'callback',
dataType: 'jsonp',
success: function(data) {
var thumbnail_src = data[0].thumbnail_large;
console.log(thumbnail_src)
}
});
Note that we're requesting over https here, and if you open the url above in a browser it'll load info about "The Work of Zina Nicole Lahr", over HTTPS.
Now, execute this on a site with jquery on https and you'll get the following message:
[blocked] The page at 'https:// ------------erased---------------' was loaded over HTTPS, but ran insecure content from 'http://vimeo.com/api/v2/video/80973511.json?callback=jQuery19106951870615594089_1386837009643&_=1386837009644': this content should also be loaded over HTTPS.
It's like the vimeo-api is redirecting the JSONP request to an insecure connection.
The network-tab says the same.
Something tells me https is not supported in these cases?
Hints:
https://vimeo.com/forums/topic:17127

Take out the www from your url. It looks like www.vimeo.com on either protocol redirects to http://vimeo.com.
https://www.vimeo.com/api/v2/video/80973511.json redirects
https://vimeo.com/api/v2/video/80973511.json does not redirect

Related

No 'Access-Control-Allow-Origin' header is present on the requested resource in simple html form

why this error is showing in my simple html form, I want to get xml data in my simple form to show news on my webpage, but this error is showing continuously, please help
$.ajax({
type: "GET",
url: "https://news.google.com/rss/search?q=Nigeria&hl=en-PK&gl=PK&ceid=PK:en",
dataType: "xml",
success: function(xml) {
console.log(xml)
}
});
It is up to the server that has the resource to allow cross origin access.
Probably there is API for what you are trying to do. API gets implemented by the resource owner and provides controlled access.
Or you can use RSS if there is one.
What you could potentially do is run your requests through a CORS proxy. For example:
$.ajax({
type: "GET",
url: "https://cors-anywhere.herokuapp.com/https://news.google.com/rss/search?q=Nigeria&hl=en-PK&gl=PK&ceid=PK:en",
dataType: "xml",
success: function(xml) {
console.log(xml)
}
});
You can see that this works by simply pasting this code snippet into the console.
This essentially bypasses the CORS issues for you. I would only recommend using this hosted version if you don't have a lot of traffic, otherwise you should host your own version of the CORS proxy.
This is because of CORS(Cross Origin Resource Sharing) policy implemented by browsers. Which means browsers doesn't allow certain requests to be sent from a domain to another domain. However this is not applicable to all type of requests.
Check this link to understand what all requests come under this policy
Inorder to make this work , the other server, in your case https://news.google.com, have to setup in such a way that it allows cross domain requests. This is achieved by servers telling the browser that it is ready to accept cross domain requests from your domain, by adding certain cors related headers. One such is Access-Control-Allow-Origin. But I am afraid you can't do it since you aren't the one managing this server.
Work-Around
Use your backend to send the request to google. So that your xhr request calls your server and your server calls google. No browser No Cors.
xhr---> yourdomain.com/news/get---> someotherdomain.com/news/get

Scrape info from external XML url with jQuery

I need to scrape/parse some info from an external XML file (xml hosted on other domain) and place that info on my site.
I tried this, and didn't succeed:
jQuery(document).ready(function()
{
jQuery.ajax({
type: 'GET',
url: 'http://42netmedia.com/smart/signal_onAir10.xml',
crossDomain: true,
dataType: 'jsonp',
success: parseXml
});
});
function parseXml(xml)
{
jQuery(xml).find('nowOnAirTitle').each(function()
{
jQuery(".my-site-element").append(jQuery(this).find('nowOnAirTitle').text());
});
}
I hope I managed to explain properly.
PS. I am using jQuery because my site is hosted on WordPress
The short answer is that you cannot do what you're trying to do from Javascript running in a browser.
The same origin policy will block AJAX requests for URLs on different domains. There are a couple of exceptions to this policy:
If the target server supports CORS, it can indicate that cross-origin requests are OK. The URL you are trying to reach is on a server that does not support CORS.
If the target server supports JSONP, your script can retrieve data from the target server by using a <script> tag in your page with a src attribute pointing to the target URL and including a callback parameter to tell the server to wrap the data in a javascript function that returns the data. The URL you are trying to reach is on a server that does not support JSONP.
Yes, jQuery does allow you to make a JSONP request across to the other domain, but the response is not Javascript but XML. Your browser is trying to execute the XML as if it was Javascript and fails with a syntax error.
Any solution to this will require server-side support on the server which hosts your code. You could set up a proxy URL on your web server, but you'd need to do that very carefully because you don't want your server to be used as an open proxy. You could also use a cron job to grab the URL using curl and save it to a static file on your server, but that's probably a bit rude.

Need to hardcode according to other domain configuration

I am trying to find the size of the file in another domain
when I paste the link in the text box and hit save I need to find the size of the file...now it's working for same domain URL
so what I am trying to do is hard code the values in my request.
for example, I hard coded type: "HEAD", to type:'GET' since the other domain was using type GET.
but now I am getting a new error. is there any way I can hard code domain too
Can you guys tell me how to fix it.
providing my code below.
https://jsfiddle.net/9k1cs9ou/
input http://www.pdf995.com/samples/pdf.pdf
Mixed Content: The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint. This request has been blocked; the content must be served over HTTPS.
request = $.ajax({
type: "HEAD",
crossDomain: true,
data: JSON.stringify(somejson),
dataType: "json",
url: $("#fname").val(),
success: function () {
alert("Size is " + request.getResponseHeader("Content-Length"));
var resp = JSON.parse(response)
alert(resp.status);
// 10485760 -10MB
if(request.getResponseHeader("Content-Length") <= 10485760/2){
alert(request.getResponseHeader("Content-Length") <= 10485760/2);
Http access control or CORS will prevent access from other domains unless the header is presented on the destination not on origin.
For instance, if you have your app hosted on www.mysite.com and you try to fetch a document from https://stackoverflow.com it will block your request because your website www.mysite.com isn't allowed access ON https://stackoverflow.com.
HTTP Access Control (CORS)

Getting the source code of web pages in the same network

The tool that I'm developing takes as parameter a url and retrieves the source code from that url to analyze. The tool will be hosted in our domain, and it should have the ability to analyze web pages of sites that are in the same internal network domain. I make this Jquery.ajax call to retrieve the source code :
$.ajax({
url: siteToanalyze,
type : 'GET',
dataType : 'html',
success: function (result) {
content = result;
analyzeCode(content, siteToanalyze);
},
error: function (jqxhr, status, errorThrown) {
alert("Failure, Unable to recieve content");
}
});
I can get the code using YQL for external web sites as well. I can get source code for web pages from the same origin. But what about web pages in the same internal network, that are not accessible to YQL.
For instance, if this js code is served from 172.20.1.160:5000 and we give a site in 172.20.5.68:5000 in the same network. The web console shows a HTTP 200 status request for the url, but results in the error function being run. Why does that happen? Or is there some other way to get source code of web pages other than the way I mentioned?
The issue was indeed because of the Same origin policy. The content I wanted to access is from a different origin than that of the above code. I solved the issues using CORS

jQuery ajax doesn't work on url without www

The jQuery ajax script below doesn't work on my site if url is without www. I checked Firebug and it doesn't send the ajax call.
$.ajax(
{
type: "POST",
url: "http://www.mysite.com/beta/products.php",
data: "page_type=index&sort=relevancerank&CartId=<?php echo $CartId;?>&HMAC=<?php echo $HMAC;?>",
success: function(msg)
{
$('#content-holder').html(msg);
},
error: function()
{
alert("An error occurred while updating. Try again in a while");
}
});
I'm assuming the calling document URL is referenced as "mysite.com", or "subdomain.mysite.com"? The XMLHttpRequest object (the engine that powers jQuery Ajax calls) can not perform "cross-domain" requests. A subdomain (e.g. 'www') qualifies. Make sure your requests are to the same subdomain.
You don't need to provide an absolute URL, you can simply provide a relative one, and it will work regardless if the your page is loaded with the www. subdomain or not:
//...
type: "POST",
url: "/beta/products.php",
//...
Is your server redirecting to the "www" domain possibly? This is probably just the same-origin policy preventing your outer page from accessing a different domain.
www. is just a naming convention - ajax will load on any address that can be looked up via dns, or it will work on an ip address as long as there is a server to respond to the request.
BUT - your page location and the ajax request need to be in the same domain for security reasons. To get round this restriction, you need to use something called JSONP

Categories