Komponenta s jednoduchým použitím i pro začátečníky, která umí závislé selectboxy, našeptávač i live validátor

Napadla mi drobnost – možná to ani není díra, ale možná jsou to dveře od stodoly. Dost dobře není možné si pamatovat celou historii od vytvoření formuláře po jeho odeslání. Session se k tomu moc nehodí. Pro uložení posledně použitých hodnot, podle kterých se nastavuje formulář před závěrečnou validací, využívám skrytá pole formuláře a do komponenty posílám inline javascriptem p5es jquery. Název callbacku není problém zkontrolovat – v továrničce se ukládá do pole. Identifikátory (odesilatel a adresát live požadavku) také snad zneužitelné nejsou (i když znalý útočník by možná vhodný nezabezpečený název odhadnout mohl). Ale čeho se bojím: uloženou poslední hodnotu nelze zvalidovat, pokud je v callbacku například postupně procházen rozsáhlý strom v databázi a nemám k dispozici kompletní historii. Samozřejmě v callbacku se musí z databáze pouze číst, ne do ní zapisovat. Zapisuje se až po závěrečné validaci v OnSubmit() atp. Jde mi ale o to, jestli:
1. takto provedená validace nemůže být ovlivněna podstrčením hodnot k předchozímu čtení,
2. samotné čtení z databáze pomocí nezvalidované hodnoty třeba self::$database->table($this->tablepage)->where(potenciálně nebezpečná hodnota) nepředstavuje nějaké riziko. Pomůže tuto hodnotu před vstupem do callbacku escapovat? Stačí volat callback s parametrem addslashes((string) $value)? A co opačný směr – z komponenty do klientského prohlížeče? Pokus o použití htmlspecialchars nebyl asi to pravé.

Předpokládám ale, že to je obecný problém live komponent.

Editoval Martin (9. 4. 2011 22:35)

Já hledal nějaké optimální řešení a dospěl jsem k tomuto monstru: https://gist.github.com/849040, ale funguje… :D

Používám něco v tomto smyslu:

<script>
$(document).ready(function(){
	$inputs = $('.xxx');	// Selector

	$inputs.keydown(function(){
		if( !$(this).data('locked') )
		{
			$(this).data('locked', true);
			$(this).data('oldVal', $(this).val());
		}
	});

	$inputs.keyup(function(){
		if( $(this).data('locked') && $(this).data('oldVal') != $(this).val() )
		{
			// Zmena
		}
		$(this).data('locked', false);
	});
});
</script>

Já se za ten zdroják trochu stydím. Zbastlil jsem to, aby mi fungoval v aplikaci, kterou už strašně dlouho dávám do kupy. Takže nemám čas to teď vyčistit, je na tom určitě vidět, že se s Nette teprve seznamuji. Ale je to tak krátké, že to mohu dát i sem s tím, že je to zcela prozatímní, například tam ještě není ani to zanoření komponent. Předpokládám, že to bude jen drobná změna ve stylu [presenter-]komponenta-subkomponenta-…-kontrol.

<?php

/**
 * My Application
 *
 * @copyright  Copyright (c) 2010 John Doe
 * @package    MyApplication
 */

namespace Nette\Application;

use Nette;

class AjaxForm extends Nette\Application\AppForm implements ISignalReceiver
{
	const CONTROL = FALSE,
		LABEL = TRUE,
                HTML = 0,
                VALUE = 1,
		VALUES = 2;


        protected $AjaxCallback = array();

        public function addAjaxCallback($prescallback)
        {
            $this->AjaxCallback[$prescallback] = $prescallback;
        }

        public function getAjaxCallback($prescallback)
        {
            if (array_key_exists($prescallback, $this->AjaxCallback))
            {
                return $this->AjaxCallback[$prescallback];
            }
            return NULL;
        }

        public static function addSubmitOnChange(Nette\Forms\FormControl $control)
        {
            $form = $control->getForm();
            $formName = $form->getName();
            $jsCode = '$("#frm-'.$formName.'").submit();';
            $control->getControlPrototype()->onChange($jsCode);
            return $control;
        }

        public static function addAjaxCallbackToFormControl(Nette\Forms\FormControl $control, $callback, $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo = NULL, $appControlLabel = AjaxForm::CONTROL, $appControlType = AjaxForm::HTML)
        {
            $form = $control->getForm();
            $formName = $form->getName();
            $form->addAjaxCallback($prescallback);
            $pres = $presenter->getName();
            $handle = 'ChangeAjaxFormControl';
            $old_on_callback = $control->getControlPrototype()->$callback;
            if (is_null($appControlTo))
            {
                $appControlTo = $control;
                $applyToId = 'this.id';
                $applyToName = $control->name;//'this.name';
            }
            else
            {
                 $applyToName = $appControlTo->getHtmlName();
                $applyToId = $appControlTo->getHtmlId();
            }
            $applyToCallback = $applyToName.'Callback';
            if (!$form->offsetExists($applyToCallback))
            {
                $form->addHidden($applyToCallback, "NULL");
            }
            $applyToCallbackHtmlId = $form[$applyToCallback]->getHtmlId();

            $applyToIdent = $applyToName.'Ident';
            if (!$form->offsetExists($applyToIdent))
            {
                $form->addHidden($applyToIdent, 'NULL');
            }
            $applyToIdentId = $form[$applyToIdent]->getHtmlId();

            $applyToValue = $applyToName.'Value';
            if (!$form->offsetExists($applyToValue))
            {
                $form->addHidden($applyToValue, 'NULL');
            }
            $applyToValueHtmlId = $form[$applyToValue]->getHtmlId();

            $applyToApplyTo = $applyToName.'ApplyTo';
            if (!$form->offsetExists($applyToApplyTo))
            {
                $form->addHidden($applyToApplyTo, 'NULL');
            }
            $applyToApplyToHtmlId = $form[$applyToApplyTo]->getHtmlId();

            $applyToApplyToId = $applyToName.'ApplyToId';
            if (!$form->offsetExists($applyToApplyToId))
            {
                $form->addHidden($applyToApplyToId, 'NULL');
            }
            $applyToApplyToIdHtmlId = $form[$applyToApplyToId]->getHtmlId();

            if ($appControlLabel)
            {
                  $applyToDesc = '("label[for=\''.$applyToId.'\']")';
            }
            else
            {
                $applyToDesc = '("#"+"'.$applyToId.'")';
            }

            if ($appControlType == AjaxForm::HTML)
            {
                $color = '$'.$applyToDesc.'.css("background-color", "yellow");';
            }
            else
            {
                $color = '';
            }


            $jsCallback = $color.'$.get("?do="+"'.$formName.'-'.$handle.'"+"&presenter="+"'./*'AjaxForm'*/$pres.
                '", {"callback": "'.$prescallback.'","ident": this.name, "value": this.value, "applyto": "'.$applyToName.'", "applytoid": "'.$applyToId.
                '"}, function(data) {$'.$applyToDesc.'.replaceWith(data);}, "html");
                $("#'.$applyToCallbackHtmlId.'").val("'.$prescallback.'");
                $("#'.$applyToIdentId.'").val(this.name);
                $("#'.$applyToValueHtmlId.'").val(this.value);
                $("#'.$applyToApplyToHtmlId.'").val("'.$applyToName.'");
                $("#'.$applyToApplyToIdHtmlId.'").val("'.$applyToId.'");';
            $control->getControlPrototype()->$callback($old_on_callback.$jsCallback);
            return $control;
        }

        public static function addAjaxOnChangeToFormControl(Nette\Forms\FormControl $control, $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo = NULL, $appControlLabel = FALSE)
        {
            return self::addAjaxCallbackToFormControl($control, 'onchange', $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo, $appControlLabel);
        }

        public static function addAjaxOnClickToFormControl(Nette\Forms\FormControl $control, $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo = NULL, $appControlLabel = FALSE)
        {
            return self::addAjaxCallbackToFormControl($control, 'onclick', $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo, $appControlLabel);
        }

        public static function addAjaxOnKeyUpToFormControl(Nette\Forms\FormControl $control, $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo = NULL, $appControlLabel = FALSE)
        {
            return self::addAjaxCallbackToFormControl($control, 'onkeyup', $presenter, $prescallback, /*$pres, $handle,*/ $appControlTo, $appControlLabel);
        }

        public function handleChangeAjaxFormControl($callback, $ident, $value, $applyto, $applytoid)
        {
            $presenter = $this->getPresenter();
            $callablecb = $this->getAjaxCallback($callback);
            if (!is_null($callablecb))
            {
                $itemFrom = $this[$ident];
                $itemTo = $this[$applyto];
                $evalue = addslashes((string) $value);
                $res = $presenter->$callback($this, $itemFrom , $evalue, $itemTo);
                echo $res; //htmlspecialchars((string) $res, ENT_NOQUOTES);
            }
            else
            {
                //Zalogovat chybu, pravděpodobně CSRF útok.
            }
            // konec zpracování
            $presenter->terminate();
        }

	public function __construct(/*Nette\Application\PresenterComponent $presenter, */Nette\IComponentContainer $parent = NULL, $name = NULL)
	{
		parent::__construct($parent, $name);
                Nette\Forms\FormControl::extensionMethod('addAjaxCallback', 'Nette\Application\AjaxForm::addAjaxCallbackToFormControl');
                Nette\Forms\FormControl::extensionMethod('addAjaxOnChange', 'Nette\Application\AjaxForm::addAjaxOnChangeToFormControl');
                Nette\Forms\FormControl::extensionMethod('addAjaxOnClick', 'Nette\Application\AjaxForm::addAjaxOnClickToFormControl');
                Nette\Forms\FormControl::extensionMethod('addAjaxOnKeyUp', 'Nette\Application\AjaxForm::addAjaxOnKeyUpToFormControl');
                Nette\Forms\FormControl::extensionMethod('addSubmitOnChange', 'Nette\Application\AjaxForm::addSubmitOnChange');
	}

Editoval Martin (20. 4. 2011 9:54)

Ahoj,

mooc se mi líbí tato komponentka.

Chtěl bych se zeptat zda se na této komponentě dále pracuje a dále se vyvíjí?

Mooc díky