javascript - 构建小部件时隐藏 Javascript

Question

我正在构建一个非常容易集成的网络小部件。假设 http://www.bicycleseller.com/ 想要将我的小部件集成到他的网页上。他所要做的就是将以下内容复制并粘贴到他页面的标题部分:

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

和 <div id="myWidget"></div> 到正文部分的任何位置。该小部件将显示在该 div 中。

作为小部件提供者，我托管了 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;
    };
};

因此，BicycleSeller 将小部件放在他的页面上，当他的用户单击它时，会出现一个弹出窗口，向他们显示我托管的页面中的内容。然而，每个想要嵌入我的小部件的网站管理员都必须提供一个 accessKey ，对他们来说是唯一的，因为弹出窗口的内容将依赖于它。

我的问题是:

1) 在这种情况下，任何转到 bicycleseller.com 并查看 HTML 源代码的人都可以看到他的 accessKey，它在 head 部分中是硬编码的。然后他们可以导航到 www.widgetprovider.com/widget.jsp?accessKey=123456 。我不希望发生这种情况。关于这个还能做什么？例如;我正在查看 Facebook 的来源，他们似乎很好地隐藏了一切。

2) 这是继续构建小部件的好方法吗？我在考虑灯箱而不是弹出窗口(它可能被弹出窗口阻止程序阻止 - 尽管在这个例子中它没有)。欢迎提出任何意见/建议。

3) 如果我尝试放置小部件并编写 Widget.create("key1").render("div1"); Widget.create("key2").render("div2");，则会生成两个图像。但是当点击时，两个弹出窗口都会显示 key1 的信息。这是因为Widget中的widget.js类是单例的。如果我不让它成为单例，那么我就无法放置图像的 onclick 属性 ( Widget.display() )。我该怎么做？

寻求有关这三个问题的帮助。任何帮助将不胜感激。谢谢。

Answer 1

您的服务器可以验证请求的“Referer” header 。这将阻止临时用户通过在地址栏中输入 URL 或通过第三方链接查看弹出内容。标题可以被欺骗，但这需要一些努力并且不是标准的浏览器功能。

您无法阻止黑客在他们自己的计算机上加载脱离上下文的弹出窗口。

关于弹出窗口是个好主意的问题，我认为内联的东西会更好，但也有更多的工作量和可移植性较差，因此您必须决定弹出窗口是否足够好。

为了让 Widget 不是单例，而不是:

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

使用:

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);
});

通过将 onclick 设置为实际函数而不是函数代码，您可以通过闭包返回 Widget 实例。