Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Make Pinterest Profile Widget Secure

I am using the below page to create a Pinterest Profile widget: https://business.pinterest.com/en/widget-builder#do_embed_user

The problem is that when the widget displays the images use non secure links. I need to display the widget on a secure page so need them to be https://

Any ideas how I can go about this?

like image 879
a1anm Avatar asked Nov 10 '22 16:11

a1anm


1 Answers

Ok so after a bit of research I have made a pretty intense hack to make this work. Pintrest does serve https content, it is just that for some reason they have not included this in their API. So I have stepped through the API and found the attribute setter that sets attributes to any elements the API creates.

Anyway.. here is the fiddle: https://jsfiddle.net/nanff007/1/ (make sure to https)

And here is the code that performs the magic...

This is a workaround/hack or whatever you want to call it. It will not work forever. It may also not work in all countries as the akamai urls may change. The best option would be to raise a request ticket with Pintrest.

(function() {
    $('a[data-pin-do]').each(function () {
        $(this).attr('data-pin-dont', $(this).attr('data-pin-do'));
        $(this).removeAttr('data-pin-do');
    });

    var timer = setInterval(function () {
        for (prop in window) {
            if (prop.search(/^PIN_/) > -1 && typeof window[prop] != 'boolean') {
                clearInterval(timer);
                window[prop].f.set = function (el, att, string) {
                    if(att == 'src' && el.tagName.toLowerCase() == 'img') {
                        string = string.replace(/(^http:\/\/)/i, "https://s-");
                    }

                    if (typeof el[att] === 'string') {
                        el[att] = string;
                    } else {
                        el.setAttribute(att, string);
                    }
                };

                $('a[data-pin-dont]').each(function () {
                    $(this).attr('data-pin-do', $(this).attr('data-pin-dont'));
                    $(this).removeAttr('data-pin-dont');
                });

                window[prop].f.init();
                break;
            }
        }
    }, 100);
}());
like image 53
Michael Coxon Avatar answered Dec 10 '22 19:12

Michael Coxon