Главная страница   /   12.8. Отключение HTML кодировки (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

12.8. Отключение HTML кодировки

По умолчанию движок шаблона кодирует значения, которые вы вставляете в шаблон, чтобы сделать их безопасными для отображения на веб странице. Это обозначает, что символы, такие как < и >, заменяются или кодируются таким образом, что они не интерпретируются как HTML элемент. Это обычно полезно, но если вы работаете с данными, которые содержат HTML разметку, это может создать проблемы. В листинге 12-22 содержится пример.

Листинг 12-22: Работа с данными, которые содержат HTML разметку
<script type="text/javascript">
	$(document).ready(function () {
		var data = [
			{ name: "Astor", product: "astor", elem: "<img src=astor.png/>" },
			{ name: "Daffodil", product: "daffodil", elem: "<img src=daffodil.png/>" },
			{ name: "Rose", product: "rose", elem: "<img src=rose.png/>" },
			{ name: "Peony", product: "peony", elem: "<img src=peony.png/>" },
			{ name: "Primula", product: "primula", elem: "<img src=primula.png/>" },
			{ name: "Snowdrop", product: "snowdrop", elem: "<img src=snowdrop.png/>" },
		];
		var templResult = $('#flowerTmpl').tmpl(data);
		templResult.slice(0, 3).appendTo('#row1');
		templResult.slice(3).appendTo("#row2");;
	});
</script>
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		${elem}
		<label for="${product}">${name}: </label>
		<input name="${product}" value="0" required />
	</div>
</script>

В этом примере каждый элемент данных содержит свойство, чье значение является HTML элементом и отображает рисунок продукта. В шаблоне я отображаю содержание этого свойства, ссылаясь на имя свойства ${elem}. Результат можно увидеть на рисунке 12-9.

Рисунок 12-9: Результат кодирования HTML содержания из объекта данных

Можно избежать этой проблемы, если использовать тег {{html}}, который говорит движку шаблона, что контекст, с которым вы работаете, должен быть представлен как есть. В листинге 12-23 показано использование этого тега.

Внимание

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

Листинг 12-23: Использование тега {{html}}
<script id="flowerTmpl" type="text/x-jquery-tmpl">
	<div class="dcell">
		{{html elem}}
		<label for="${product}">${name}: </label>
		<input name="${product}" value="0" required />
	</div>
</script>

Я использую тег {{html}} со значением, которое вы хотите вставить в шаблон, и кодировка опускается.

Внимание

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