Cross Domain Scripting Issue

Question

I am working on this 'Random Quote Machine' project.

 $(document).ready(function() { getQuote(); $("#new-quote").on("click", getQuote); function getQuote() { $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(a) { var quote = ""; var author = ""; author = a[0].title; quote = a[0].content; $(".author").html(author); $("#quote").html(quote); $("#share-button").attr("href", 'https://twitter.com/intent/tweet?text=' + "\\"" + $('#quote > p').html() + "\\" - " + author); }) }; }); 

Issues: I don't know about Cross Domain Scripting Issue. And the problem I'm facing is that I couldn't get the API's data.So people suggested adding "&_jsonp" in the URL. But now even after adding that it only works when my browser sends 'http' request instead of 'https' When the browser sends https request this message is displayed in my chrom dev console:

jquery-2.2.4.min.js:4 Mixed Content: The page at ' https://codepen.io/faisal1337/full/ZOvgNR/ ' was loaded over HTTPS, but requested an insecure script ' http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=jQuery22407926761305727481_1469082997979&_=1469082997982 '. This request has been blocked; the content must be served over HTTPS.

So the '&_jsonp' will let a malicious code run on my website. I just want the page to function whether the request is 'http' or 'https' . Is there a solution?

Answer 1

Use https in the ajaxed url if you have a your site on https as well, this is a security measure

 $.getJSON("https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=?", function(a) {
....

demo: https://codepen.io/anon/pen/RRrkWB

Answer 2

instead of using http://x.com or https://x.com use //x.com ... a http page will use http, a https page will use https

in other words, the page will use the same protocol for requests that the page is loaded with (http vs https)