Question

I am building a web widget which will be very easy to integrate. Say http://www.bicycleseller.com/ wants to integrate my widget on his web page. All he has to do is copy and paste the following to the head section of his page:

<script src="http://www.widgetprovider.com/widget.js" type="text/javascript"></script>
<script>
Widget.create("123456accessKeyOfBicycleSeller").render("myWidget");
</script>

and <div id="myWidget"></div> to anywhere in the body section. The widget will be displayed in that div.

I, as the widget provider, host the widget.js:

var Widget = new function () {

    this.url = "www.widgetprovider.com/widget.jsp";
    this.name = "";
    this.parameters = "width=400,height=200,screenX=750,screenY=300,resizable=0";


    this.create = function (accessKey) {
        this.accessKey = accessKey;
        return this;
    };


    this.render = function (divId) {
        // make sure the document is fully loaded and place the widget on BicycleSellers page.
        // when the widget (a jpeg) is clicked, a jsp page I host will popup.
        window.onload = function () {
            document.getElementById(divId).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display()"/>';
        };
        return this;
    };

    this.display = function () {
        // open a popup window that displays a page I host.
        var popup = window.open(this.url + "?accessKey=" + this.accessKey, this.name, this.parameters);
        popup.focus();
        return this;
    };
};

So, the BicycleSeller places the widget on his page and when his users click on it, a popup appears that show them content from a page I host.
However, each webmaster that wants to embed my widget, has to provide an accessKey, unique to them, because the popup’s content will be dependent on that.

My questions are:

1) In this scenario, anyone who goes to bicycleseller.com and views the HTML source can see his accessKey which is hard-coded in the head section. Then they can just navigate to www.widgetprovider.com/widget.jsp?accessKey=123456. I don’t want that to happen. What can be done about this? For instance; I was looking at the source of Facebook and they seem to hide everything very well.

2) Is this a good way to go on building a widget? I was thinking of a lightbox rather than a popup window (which might be blocked by a popup blocker – although in this example it does not). Any comments/suggestions welcome.

3) If I try to place to widgets and write Widget.create("key1").render("div1"); Widget.create("key2").render("div2"); two images are generated. But when clicked, both popups display key1 s information. This is because the Widget class in widget.js is singleton. If I don’t make it singleton, then I can’t place the image’s onclick attribute (Widget.display()). What do I do for that?

Looking for help on the three questions. Any help will be greatly appreciated. Thanks.

Answer 1

Your server can validate the “Referer” header of the request. This would stop casual users from viewing the popup content out of context by entering the URL in the address bar, or by following a third party link. Headers can be spoofed, but this takes some effort and is not a standard browser feature.

You will not be able to stop a hacker from loading the popup out of context on their own computer.

On the issue of popups being a good idea, I think something inline would be better, but also more work and less portable, so you have to decide if popups are good enough.

To make Widget not be a singleton, instead of:

$(window).load(function () {
    document.getElementById(divId).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display()"/>';
});

use:

var widget = this;
$(window).load(function () {
    var image = document.createElement("img");
    image.src="images/widget-image.jpg";
    image.onclick = function() { widget.display() };
    document.getElementById(divId).appendChild(image);
});

By setting onclick to an actual function instead of the code for a function, you can refer back to the instance of Widget through the closure.