Štítek: Web

Minule jsem popsal způsob vytvoření bookmarkletu a částečně řídicí a zobrazující (odpovídající) logiku na straně serveru s tím, že se nejdená o finální řešení a má svoje mouchy. Tyto mouchy jsem vychytal a vyzkoušel opravené řešení v praxi a zjistil, že jsem zapomněl na poměrně podstatnou věc – zabezpečení a neumožnění croos domain AJAX požadavků, alespoň u slušných prohlížečů: stávající skript totiž přidal k cizí stránce můj kus kódu, který se snažil připojit na můj (=cizí) server. Takže jsem si naběhl a končil na výjimce "Access to restricted URI denied" code: "1012" nsresult: "0x805303f4 (NS_ERROR_DOM_BAD_URI)". Když už jsem ale minule slíbil pokračování stávajícího způsobu, dokončím popis a potom se pokusím problém vyřešit nejjednodušším možným způsobem.

Protože je člověk od přírody tvor lenošný a já nedělám výjimku svému druhu, nechtělo se mi hrát si httpRequestem a ručně dolaďovat bezpečnostní chybky, optimalizovat… Vzal jsem si proto na pomoc js framework jQuery, který Ajax zvládá za mě a věřím tomu, že mnohem lépe a efektivněji. Hned jsem tímto přístupem zabil dvě mouchy jednou ranou: první moucha je zmíněna na předchozím řádku (nebo spíše hejno much) a ta druhá – v původní verzi bookmarklet fungoval až po druhém kliknutí, což je samozřejmě neomluvitelné. Tuším, že je to způsobeno tím, že při prvním klepnutí se sice skript připojí k dokumentu, ale volané metody se neprovedou s tím, že jsou momentálně neznámé. Divné, ale je tomu tak, po druhém klepnutí na bookmarklet je už všechno v pořádku. Stačí samozřejmě na konec vkládaného skriptu vložit volání potřebných rutin a při jeho přiložení k dokumentu se okamžitě provedou.

javascript:
    void((
        function(){
            var element=document.createElement('script');
            element.setAttribute('src','http://www.libisemi.cz/send.js?i='+new Date().getTime());
            document.body.appendChild(element);
        })()
    )

Stejným způsobem využívám i nové volání pomocí jQuery, které zveřejňuji na následujícím výpise. Do dokumentu pomocí bookmarkletu vkládám tento skript (viz. výše) a zároveň i komprimovanou verzi knihovny jQuery, která se nachází v tomtéž souboru, takže stačí jedno klepnutí na bookmarklet a na lokálním stroji vše funguje jako švýcarské hodinky. Co se týká obsahu bookmarkletu, oproti minulé verzi tam přibyl "parametr" getTime(). Ten je tam proto, aby prohlížeč vzal v potaz změny ve skriptu send.js a nenačítal jej z cache; s getTime() je totiž požadovaná adresa vždy jedinečná, čili načítána znovu.

 /*
 * jQuery JavaScript Library v1.3.1
 * http://jquery.com/
 *
 * zde je vložená komprimovaná verze jQuery knihovny
 */

var u=encodeURIComponent(location.href);

$.ajax({
    type: "POST",
    url: 'http://www.libisemi.cz/addajax',
    data: 'url='+u,
    success: function(s){
        . . .
        window.location = "http://www.libisemi.cz/addform/"+id;
        . . .
    }
});

 V tomto případě ovšem pořád přetrvává výše zmíněná chyba z důvodu cross site requestů. Stačí chybu nacpat do googlu a pár řešení vyjede. Našel jsem ovšem efektivnější možnost posílání url a to tak, jak jsem původně chtěl, takže směle skvěle se vrhnu do něj, je to jednodušší a hlavně pohodlnější, než několik skriptů a využívání třeba JSONu.

edit: Chyba lávky! Ještě jednodušší to je. Nepředával jsem parametr url, takže ono zmíněné řešení mě pokoplo správným směrem – CakePHP dokáže využívat parametry u metody get!!! Takže jsem do controlleru přidal jednoduchou bezparametrickou metodu add(), ve které tyto parametry přečtu:

function add(){
        if(isset($_GET['vstup']))
            $vstup = $_GET['vstup'];
   . . .

A teď můžu tento controller bez problému volat i s adresou jako s parametrem (např. http://www.libisemi.cz/add?vstup=http%3A%2F%2Fshmoulicek.unas.cz/ ) . Aneb potvrzuji moje oblíbené rčení i chování: proč dělat věci jednoduše, když jdou dělat i složitě :-).

Pro potřeby libisemi, "prvního asociálního sociálního serveru" jsem potřeboval vytvořit bookmarklet. Protože to však nešlo udělat jednoduše, jako odeslání adresy pomocí GETu, protože na straně serveru používám framework CakePHP a v něm user friendly URLs ve formátu http://domain/controller/action/param. V tomto případě bych jako parametr nemohl předat http adresu. Z toho důvodu jsem byl nucen poslat tuto informaci metodou POST. A když už takto, tak rovnou asynchronně a počkat si na výsledek. V tomto postu bych se chtěl podělit o získané zkušenosti vzniklé na základě vyřešení vzniklých problémů.

Začnu nejprve rozhraním na straně serveru. Dovolím si vypustit zbytečnosti a defakto celý zápis zobecnit. Vzhůru tedy do Controlleru. Následující funkce (vlastně spíš metoda, protože je umístěna ve třídě rozšiřující AppController, jen mi tohle vznostné oslovení u PHP nesedí ;-)) přijmě data zaslaná (asynchronně) pomocí metody post a pustí se do zpracování, které předá zobrazovací vrstvě.

function addajax(){
    // prijeti dat
    $formular = $this->params['form'];
    $url = $formular['url'];
      
    // vystupni layout chci xml a nechci zobrazovat debug informace
    $this->layout = 'xml';
    Configure::write('debug',0);
   
    /*
     * Dalsi akce, jako je napr. parsovani ziskaneho dokumentu
     */
       
    // zapsani informaci a ulozeni do session
    $output[0]['url'] = $url;
       
    $this->Session->write('toSave',$innerHTML);
    $sessId = $this->Session->id();
       
    // zapisu jeste cislo session
    $output[0]['sessionId'] = $sessId;
    // a cele pole predam vrstve View
    $this->set('output', $output);
}

 Uvnitř předcházející metody vyžaduju zobrazení v layoutu xml, ten je definován následujícím způsobem, který mi vygeneruje dokument typu text/xml, zapíše do něj záhlaví a vloží vlastní strukturu, která je generovaná uvnitř vrstvy View. Celkový výstup je uveden na výpisu níže.

<?php
    header('Content-type: text/xml');
    echo $xml->header();
?>
<addInfo>
<?php echo $content_for_layout; ?>
</addInfo>

Další činnost prováděná uvnitř metody v Controlleru je vytvoření pole "output", které je předáno vrstvě View. Do prvního prvku tohoto pole ještě přidám požadované url (index "url"), celou tuto konstrukci uložím do session a následovně do toho stejného pole přidám i číslo této session (index "sessionId"). Samotný výstup v podobě XML je generován ve view, kterému předávám data pomocí posledního řádku ve výpisu kontrolleru. View je zhruba následující:

echo $xml->elem('sessId',null,$output[0]['sessionId']);
echo $xml->elem('url',null,$output[0]['url']);
. . .

Tato konstrukce za pomocí helperu Xml vygeneruje tagy sessId a url a vloží do nich dané hodnoty. Výstupem je potom následující XML, které je odesláno zpět skriptu na straně prohlížeče (klienta), který provedl volání.

<?xml version="1.0" encoding="UTF-8" ?>
<addInfo>
    <sessId>4f40061d6ffa5e6a4a8f4b64b79eb4d3</sessId>
    <url>http://domain/page.htm</url>
</addInfo>

Bookmarklet jsem definoval konstrukcí tzv. anonymní funkce – void((function(){ . . . }()), který provede kód umístěný vevnitř. Tímto kódem vytvářím nový element "script", který připojím ke stávající stránce.

 javascript:
    void((
        function(){
            var element=document.createElement('script');
            element.setAttribute('src','http://www.libisemi.cz/send.js');
            document.body.appendChild(element);
            var http=getHttp();
            sendPost(http,encodeURIComponent(location.href));
        }()
    )

Tento skript sestává z metody, která na základě typu prohlížeče vygeneruje tzv. HttpRequest objekt, který je použit pro připojení k serveru a odeslání dat. V prohlížečích Netscape Navigator, Apple Safari a Firefoxu se tento objekt vytváří pomocí konstruktoru objektu XMLHttpRequest(), který je součástí objektu window, takžestačí otestovat jeho existenci. Microsoft samozřejmě musí mít něco extra, takže tento objekt vytváří pomocí ActiveX komponenty, takže pokud nevyjde první testování, otestuju existenci ActiveXObject komponenty. Pokud ani tohle testování nevyjde, ohlásím chybu a uživatel má smůlu.

function getHttp(){
    var http = false;
   
    if(window.XMLHttpRequest){
        http = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        http = new ActiveXObject("Microsoft.XMLHTTP");
    }else alert("nejde vytvorit request!");
   
    return http;
}

Vytvořený HttpRequest objekt předám  funkci, která pomocí něj metodou POST odešle data na server. Pomocí metody onReadyStateChange je ještě nastavena další anonymní funkce, která testuje přijatou odpověď serveru – stav požadavku (readyState), kdy čeká na požadavek, až je kompletní a současně na stavový kód protokolu HTTP 200 – OK. Pokud tato skutečnost nastane, pokračuje ve zpracování, rozparsuje přijaté xml a přesměruje stávající dokument na novou adresu, ke které přiloží získané informace (v tomto případě číslo session, které vygeneroval server na základě přijatých dat POST metodou). Jedná se o jednoduchý AJAX, spousta dalších informací se válí volně na síti, nebo někde v archívu mého blogu.

function sendPost(http,url){
    http.open("POST","http://www.libisemi.cz/addajax");
    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Connection","close");
    http.onreadystatechange = function(){
        if(http.readyState == 4 && http.status == 200){
            var response = http.responseXML;
            // … parsovani odpovedi a ziskani promenne 'id' – cislo session
            window.location = "http://www.libisemi.cz/addform/"+id;
        }
    }
    http.send("url="+url);
}

 Tímto způsobem je vytvořen (polo-)funkční bookmarklet, který funguje po druhém kliknutí a pouze na stejné doméně. Nemám ale rád polovičatá řešení, tak už mám rozdělané řešení. Tohle bych si ale dovolil popsat až příště, tenhle post mi připadá už dost dlouhý ;-).