http/https mismatch with linkedin recommendations on a website

Question

I want to show linkedin recommendations from my own account on a website.

<script type="text/javascript" src="http://platform.linkedin.com/in.js">
    api_key: xxxx
    onLoad: onLinkedInLoad
    authorize: false
</script>

<script type="text/javascript">
    function onLinkedInLoad(){
        var target = $("#recommendation");
        IN.API.Raw("people/~:(id,first-name,last-name,recommendations-received)").method("GET").result(function(result){
            console.log("result",result);
            for(var key in result.values) {
                var recommendation = result.values[key];
                target.append($(recommendation.recommender.firstName + recommendation.recommender.lastName + recommendation.recommendationText));
            }
        });
    }
</script>

However when I load the page I get:

Blocked a frame with origin "https://api.linkedin.com" from accessing a frame with origin "http://127.0.0.1".  The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

GET https://api.linkedin.com/v1/people/~:(id,first-name,last-name,recommendations-received) 404 (Not Found) 

XHR finished loading: "https://api.linkedin.com/v1/people/~:(id,first-name,last-name,recommendations-received))".

Does anyone know where I'm going wrong? I get the same with authorise set true or false, ideally I don't want to require a log in, just display from my own profile.

Answer 1

I had the same problem while integrating LinkeIn auth on my site.

While it didn't stop the linkedin api from working, I was annoyed to see the error popping on the console. So I binded a listener to remove any iframe coming from " https://api.linkedin.com " before it loads.

    jQuery('body').bind("DOMSubtreeModified", function(evt) {
            var elemento=evt.delegateTarget.lastChild;
            if(elemento.tagName=='IFRAME') {
                if(elemento.src.indexOf('https://api.linkedin.com')!=-1) {
                    jQuery('#'+elemento.id).remove();
                }
            }
});

Everything is still working.