How to make TripAdvisor Widget work on HTTPS

Recently, while working with a client, I faced an issue related to TripAdvisor review widget. The issue was the widget was not being rendered on the webpage with secure (HTTPS) url. The widget was loading Javascript from non-secure (HTTP) url and the webpage was blocking that content being requested from a non-secure url.

After going through TripAdvisor support forums, it became clear that they had no solution for this, as the request to fix this bug had gone unanswered and related post had been closed. It was time for brainstorming 🙂

Have a look at their widget:

<div id="TA_ssnarrowcollectreview339" class="TA_ssnarrowcollectreview">
<ul id="qt8r6ky" class="TA_links wvFoTJq">
<li id="aEQCghjce" class="8al3DtAX">
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-16124-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div><script src="http://www.jscache.com/wejs?wtype=ssnarrowcollectreview&uniq=459&locationId=4984311&lang=en_US&border=true&display_version=2"></script> 

The widget loads Javascript from url http://www.jscache.com/wejs?wtype=ssnarrowcollectreview&uniq=459&locationId=4984311&lang=en_US&border=true&display_version=2

This request generates a dynamic Javascript code which is as below:

document.write('<script src="http://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script>');

You can see, it loads another Javascript in the widget, with the source url beginning from HTTP which is a red flag for secure (HTTPS) webpage. This was the issue which was preventing the widget from being rendered.

I replaced the Javascript in the original widget code with following:

<script src="https://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script>

Note the HTTP had been replaced with HTTPS in the “src” attribute of above script. So the final widget code became:

<div id="TA_ssnarrowcollectreview339" class="TA_ssnarrowcollectreview">
<ul id="qt8r6ky" class="TA_links wvFoTJq">
<li id="aEQCghjce" class="8al3DtAX">
<a target="_blank" href="http://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-16124-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="https://www.tripadvisor.com/WidgetEmbed-ssnarrowcollectreview?uniq=339&locationId=4744311&border=true&lang=en_US&display_version=2"></script> 

Source url of the TripAdvisor logo image had also been changed to secure one (HTTPS) in the above code. This code rendered the widget successfully on secure (HTTPS) webpage.

Phew!! Wasn’t that tricky? What do you think?