Hiding Javascript When Building a Widget <p>I am building a web widget which will be very easy to integrate. Say <code>http://www.bicycleseller.com/</code> 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:</p> <pre><code>&lt;script src="http://www.widgetprovider.com/widget.js" type="text/javascript"&gt;&lt;/script&gt; &lt;script&gt; Widget.create("123456accessKeyOfBicycleSeller").render("myWidget"); &lt;/script&gt; </code></pre> <p>and <code>&lt;div id="myWidget"&gt;&lt;/div&gt;</code> to anywhere in the body section. The widget will be displayed in that div.</p> <p>I, as the widget provider, host the <strong>widget.js</strong>:</p> <pre><code>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 = '&lt;img src="images/widget-image.jpg" onclick="Widget.display()"/&gt;'; }; 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; }; }; </code></pre> <p>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 <code>accessKey</code>, unique to them, because the popup's content will be dependent on that.</p> <p>My questions are:</p> <p><strong>1)</strong> In this scenario, anyone who goes to <code>bicycleseller.com</code> and views the HTML source can see his <code>accessKey</code> which is hard-coded in the head section. Then they can just navigate to <code>www.widgetprovider.com/widget.jsp?accessKey=123456</code>. 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.</p> <p><strong>2)</strong> 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.</p> <p><strong>3)</strong> If I try to place to widgets and write <code>Widget.create("key1").render("div1"); Widget.create("key2").render("div2");</code> two images are generated. But when clicked, both popups display <code>key1</code> s information. This is because the <code>Widget</code> class in <code>widget.js</code> is singleton. If I don't make it singleton, then I can't place the image's <code>onclick</code> attribute (<code>Widget.display()</code>). What do I do for that?</p> <p>Looking for help on the three questions. Any help will be greatly appreciated. Thanks.</p>