Userscripts. Кроссдоменные запросы

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

Вступление

Как известно, в чистом виде в естественной среде браузерного окружения кроссдоменные запросы — штука не тривиальная (благодаря Same origin policy).
Поддержка XMLHttpRequest с CORS есть не во всех браузерах (в опере вообще до сих пор не встречена).
JSONP позволяет только GET-запросы, а проксирование через фреймы заставляет использовать сторонние библиотеки, либо писать жуткие велосипеды.

Перерыв:Если вы дочитали до этого места, и не поняли ни слова, то сделайте перерыв, погуглите неизвестные термины, выпейте чаю. Не унывайте, дальше будут объяснения «на пальцах» и с кодом. Начинающие скриптописатели могут вздохнуть спокойно: вдаваться в подробности мы не будем, но рабочий код и капля теории со всеми ссылками будет в вашем «загашнике».

Основы

В чем проблематичность кроссдоменных запросов? Все браузеры ограничивают нашу свободу в угоду безопасности. Посему, запросы из «недоверенных» источников пресекаются на корню. А что делать, если мы источникам доверяем? Правильно, использовать «костыли» (многие из которых являются общепринятой практикой).

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

Ниже приведена таблица, в которой представлены некоторые «костыли» и их применимость для юзерскриптов.

Название метода + ссылка	Краткое описание	Требует доступ к серверу	Можно использовать в юзерскриптах
JSONP Статья на Хабре	Только GET-запросы. Информация запрашивается посредством вставки в тело документа тега <script>. Ответ сервера попадает в тело скрипта и исполняется браузером. При этом, в скрипте должна быть определена функция-«обёртка», которая передаётся с сервера и содержится в ответе.	Требуется доступ или JSONP API	IE7+ Opera Firefox
XHR + CORS Статья на Хабре Статья на Mozilla Hacks	Запрос осуществляется посредством XMLHttpRequest (XHR) с указанием специальных заголовков запроса.	Требуется доступ или XHR CORS API	IE8+ Firefox Chrome (extension)
iframe транспорт	Запрос осуществляется через размещение в документе невидимого айфрейма, который возвращает ответ в родительское окно. Довольно запутанный способ.	Требуется доступ. Удобнее всего использовать библиотеку easyXDM (нужна небольшая модификация для Chrome и Firefox).	IE7+ Firefox Opera Chrome (extension)
Родные возможности юзерскриптов	Специфичны для каждого браузера. В IE отсутствуют как класс. Firefox + GreaseMonkey предоставляют GM_xmlHttpRequest (аналог XMLHttpRequest), GET+POST запросы. Chrome предоставляет полноценный кроссдоменный XMLHttpRequest, но только для расширений, GET+POST запросы. У Opera есть событие beforeScript, при помощи которого можно осуществить GET-запрос через <script> (не JSONP, следовательно, доступ к серверу не нужен).	Не требуется доступ к серверу.	Firefox Opera Chrome (extension)

Для подавляющего большинства скриптов критичным параметром является наличие доступа к серверу. К тому же, чаще всего используются GET-запросы (если скрипт не зловред, не наделён мегаинтеллектом или не является частью какого-либо сервиса).

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

• Chrome = упаковка + проксирование XMLHttpRequest (описано в третьей статье)
  
• Firefox + GreaseMonkey = использование GM_xmlHttpRequest
  
• Opera = использование события beforeScript и скрипт-транспорта
  
• IE7+ = использование JSONP
  

Недостатки:

• Только GET-запросы (не критично для 90%)
• Для IE нужен доступ к серверу или JSONP API (не критично для 90%, для остальных можно решить через YQL)
• Нетривиальная обработка ошибок транспорта
• Для оперы понадобится дополнительный файл

Подробнее о GM_xmlHttpRequest

Полное описание объекта можно найти на сайте Greasespot.
Нам же необходимо знать, что GM_xmlHttpRequest является аналогом XMLHttpRequest и предоставляет такой же программный интерфейс.
Функция для посылки запроса может выглядеть так (применён хак setTimeout, чтобы обойти ошибку безопасности при обращении из небезопасного окна к коду юзерскрипта при выполнении запроса):

var GMTransport = function(url, onDone){
    setTimeout(function(){GM_xmlhttpRequest({
        method : "GET",
        url : url,
        onload : function(x) {
          var o = x.responseText;
          if (onDone) {
            onDone(o);
          }
        }
      });},0);
}

BeforeEvent

Это событие актуально только для Opera. Вызывается, когда в документе появляется элемент скрипта перед его выполнением. Событие можно перехватить и остановить выполнение скрипта. Чем мы и воспользуемся.

Важно: Для Opera нужно поставлять отдельный файл, в котором будет осуществляться навешивание события. Это связано с особеннностями выполнения пользовательских скриптов. Обратите внимание: в дополнительном скрипте не должно быть метаданных! Название скрипта начинается с нижнего подчеркивания, чтобы скрипт загружался первым.

Ссылка на дополнительный скрипт:_opera-xdr-engine.js
Код дополнительного скрипта на pastebin.com.

Запрос осуществляется вызовом следующей функции:

var scriptTransport = function(url, onDone){
    var t = document.createElement("script");
    t.src = url;
    t._callback = onDone;
    document.body.appendChild(t);
}

Замечание: Для Opera существует ещё одно решение: тыц. Я его не ковырял, но вероятно оно лучше представленного здесь.

JSONP

Реализация JSONP остаётся в качестве домашнего задания :)
Благо, работающих примеров в сети предостаточно.
Но прежде всего нужно задаться вопросом: нужна ли вам вообще поддержка вашего юзерскрипта в IE?

Разбираемся с Chrome

Для осуществления запросов в Хроме вам необходимо упаковать юзерскрипт в расширение.
Подробно данный метод описан в предыдущей статье. Там же дан пример проксирования кроссдоменного запроса (вызов функции запроса можно найти в оболочке, ниже по тексту).
Если лень переходить по ссылке вы читали статью и знаете, как упаковать скрипт, то код для background.html доступен на pastebin.

Оболочка

Все перечисленные выше способы собраны в оболочку.
Код не претендует на звание «лучший код 2011», но является рабочим и используется в различных модификациях в коммерческих юзерскриптах (да-да, бывают и такие).

Код оболочки можно найти на pastebin.com.
Кроссдоменный запрос осуществляется вызовом

xdr.xget(url, callback);

Определение нужного транспорта происходит автоматически.

---

1. Учимся писать userscript'ы
2. Userscripts. Углубляемся
3. Userscripts. Упаковываем юзерскрипт для Chrome
4. » Usersctripts. Кроссдоменные запросы