Wrapping HTTP content into HTTPS via Ajax request in Codepen

Hello,

I have been recently learning javascript/jquery, and to get some hand on lab practice I’ve started to do several toy project proposals they advice you to do in FreeCodeCamp. One of this is about creating a Random Quote Machine webpage by freely using any library/api you want. Basically every time you click the “new quote” button a new quote will be displayed on the screen.

I decided to retrieve quotes by consuming a simple REST api in json format that shows a new Chuck Norris joke every time when accessed. The code that accesses the api is:

function call_api_chuck () {
    $.ajax({
      url: "http://api.icndb.com/jokes/random",
      jsonp: "callback",
      type: "GET",
      dataType: "jsonp",
      success: function (data) {
        $("#author").remove();
        $("#quote").append(data["value"]["joke"]);
      },
      xhrFields: {
        withCredentials: false
      }
    });
  };

 

It simply performs a get ajax request to the api and in case of success it adds the joke text from the json to the #quote span element. You can see the whole pen here.

Executed locally performs smoothly but when pasting it to Codepen and clicking the button to get a quote you get a message like:

Mixed Content: The page at 'https://s.codepen.io/boomerang/<huge_number>/123/index.html' 
was loaded over HTTPS, but requested an insecure script 
'http://s.codepen.io/boomerang/<another_huge_number>23/js/functions.js'. 
This request has been blocked; the content must be served over HTTPS.

This is so because although Codepen is friendly with Cross-Origin-Requests (CORS) as explained in this post, It does not let us to mix HTTP and HTTPS content in the same pen.

As I cannot  remove the other resources  called via HTTPS, a simple workaround to this, also mentioned in codepen blog, is to use the CORS Proxy Crossorigin.me.

This site allows developers to access resources from other webpages they don’t own. So in order to make the pen work, the workaround is as simple as appending https://crossorigin.me to the URL in the ajax request:

url: "https://crossorigin.me/http://api.icndb.com/jokes/random"

It is important to note that what interests me of this service is not the allowance of CORS requests (as codepen already permits them) but simply the HTTPS wrapping of the jokes rest api. You can try it by yourself with any other plain HTTP api just by adding the prefix to the URL.

Anuncios

7 comentarios en “Wrapping HTTP content into HTTPS via Ajax request in Codepen

  1. Thanks a lot as I have searched a lot to find a solution for this. After using the crossorigin my ajax requests became extremely slow. Do you know how can i fix it ?

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s