Скрытие 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> в любом месте раздела тела. Виджет будет отображаться в этом разделе.

Я, как поставщик виджетов, размещаю 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, который жестко задан в разделе заголовка. Затем они могут просто перейти к 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

Я думаю, вам следует указать на тот факт, что ваш виджет, основанный на javascript, может быть кэширован и (даже если не кэширован) клиент может просматривать исходный код. В конце концов, JavaScript выполняется на клиентском компьютере, а не на вашем сервере.

Чтобы «спрятать» вещи, которые вы хотите сделать, вы должны позаботиться о том, чтобы «конфиденциальные данные» обрабатывались серверными сценариями. Все, что клиент может загрузить, может быть просмотрено и испорчено клиентами. Единственное, к чему они не могут добраться - это то, что происходит «за экранами» на вашем сервере. Поэтому, если вы хотите что-то скрыть, храните это на своем сервере.

Единственный уровень безопасности, который вы можете получить с помощью javascript - это «обфускация». Но это уровень безопасности, который может поднять практически любой, кто потратит немного времени. (Читайте: дети сценариев будут любить такие вещи ради забавы!)

Answer 2

Ваш сервер может проверить заголовок запроса "Referer". Это не позволит обычным пользователям просматривать всплывающее содержимое вне контекста, введя 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 через замыкание.

Answer 3

Я не знаю о 2 и 3, но могу ответить 1.

Что вы можете не делать: запретить людям смотреть на ваш исходный код. Все может быть подделано, вы можете остановить случайных пользователей, но вы не задержите определенного человека более чем на несколько секунд (да, секунд). Что вы можете сделать - это запретить людям использовать ваш код на их сайте.

Вы можете создавать ссылки, которые лишают себя законной силы после установленного вами льготного периода. Пример:

$key = "client_key";
$time = $_SERVER['REQUEST_TIME'];
$hash = md5("nonce" . $key . $time);    // super secret method than no one should ever find out
return return "hash=" . $hash . "&key=" . $key . "&time=" . $time;

Это требует от вас размещения серверного кода на веб-сайте вашего клиента. Хеш гарантирует, что никто не сможет «связываться» с переменными, потому что никто не знает метод, который вы используете для хэширования (хотя выберите что-то более неясное, добавьте правильный одноразовый номер). Переменная time, которую можно использовать для отклонения запросов с очень старым значением time, скажем, 24 часа.

Тем не менее, вы не можете помешать людям один раз получить код и сохранить его локальную копию для себя, но, по крайней мере, вы исключили их из обновлений и исправлений ошибок.

Вы также можете добавить запутывание, чтобы они не могли легко изменить или сохранить код.

Просто невозможно полностью запретить людям «красть» ваш JavaScript.

Answer 4

По вашему первому вопросу, я думаю, @JGWeissman дал возможное решение.

В ответ на ваш второй вопрос, я не верю, что инициированный пользователем щелчок, чтобы открыть всплывающее окно, будет остановленблокировщик всплывающих окон.Я считаю, что блокировщики ищут код, который запускается независимо от того, какие действия пользователь выполняет на странице.Довольно просто создать свой собственный лайтбокс, например всплывающее окно, но оно может не стоить времени, тем более что вы не контролируете страницу, на которую вы встраиваете.В них может быть встроен Flash, несовместимый с всплывающими решениями типа лайтбоксов, которые могут вызвать головную боль.

В ответ на ваш третий вопрос я сделаю так, что каждый раз, когда вы «создаете» виджет, вына самом деле создать объект, который представляет его.Вы можете отслеживать эти "экземпляры" виджетов в вашем объекте Widget в массиве.Вы также можете создать экземпляр метода window.onload, который перебирает «экземпляры» и дает каждому по нажатию метод, который будет запускать экземпляры accessKey.Я бы также избавился от разделения между созданием и рендерингом, поскольку вы, кажется, называете их вместе.Вот один из способов сделать это:

var Widget = new function () {
        var widgets = [];
        this.url = "http://www.yahoo.com";
        this.name = "";
        this.parameters = "width=400,height=200,screenX=750,screenY=300,resizable=0";

        window.onload = function () {
            var w;
            for (w = 0; w < widgets.length; w++) {
                document.getElementById(widgets[w].id).innerHTML = '<img src="images/widget-image.jpg" onclick="Widget.display(' + w + ')"/>';
            }
        };

        this.display = function (index) {
            widgets[index].display();//display the widget instance corresponding to the index
        }

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

            widgets.push(newWidget);

            return newWidget;
        };


    };