お小遣い帳のテンプレートで出力値をエスケープしていなかったのでエスケープするようにした

通常djangoでパラメータを出力する時は

{{ parameter }}

としますが、パラメータの値中にあるhtmlにとっての特殊文字エスケープして出力する場合(ver0.95まで)

{{ parameter | escape }}

といったようにescapeフィルタをつけてあげることで実現します。
このような仕様によって、コードからテンプレートにエスケープ処理を追い出す事が可能になっていて、結果的に複雑度を分散しそれぞれがシンプルになっています。
また、出力仕様は出力するところに書くことで、出力仕様に関連するスコープも狭くする事ができました。


余計な話ですが、開発版である0.97preでは、自動エスケープがデフォルトの設定で

{{ parameter }}

の状態でエスケープが行われます。
これを解除(つまりエスケープしないようにする)場合は明示的に値が安全であることを示すために

{{ parameter | safe }}

safeフィルタをつけてあげる必要があります。

私もASP.NETでカスタムコントロールを利用して似たような事をしていたので、こちらの仕様に変わる事については歓迎です。



というわけで、djangoのテンプレートの部分だけ再掲

{{ parameter }}

となっていた部分のうち数値以外が入る部分について

{{ parameter | escape }}

としてあります。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>{{ userName|escape }}のお小遣い帳</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<link href="./styles/styles.css" type="text/css" rel="stylesheet" />
  		<script type="text/javascript" src="./scripts/util.js" ></script>
  		<script type="text/javascript" src="./scripts/index.js" ></script>
	</head>
	<body>
	<div id="body">


		<div id="header">
			<div id="user">
			お小遣い帳
			</div>
				<div id="navigationOperation" >■</div>
		</div>
		

		<div id="navigation" >
			<div id="logonControl">
			{{ userName|escape }} <br />
			<a href="{{ logoutUrl }}">ログオフ</a>
			</div>
			<div id="settings">
			<form action="/" method="post">
		        <div>チャージ額:<br /><input type="text" name="chargedValue" value="" tabindex="1" accesskey="1" /><br /></div>
				<div>前回チャージ後総額:<br />{{ setting.properValue }}円<br /></div>
		        <div>総利用額:<br />{{ setting.totalPayment }}円<br /></div>
		        <div>残額:<br />{{ currentValue }}円<br /></div>
		        <div><input type="submit" value="チャージ"  tabindex="2" accesskey="s" /></div>
		        {% if settingErrorMessage %}
		        <div class="errorMessage">{{ settingErrorMessage|escape }} </div>
		        {% endif %}
	        </form>
			</div>
	        

		</div>
		<div id="contents">
			<form action="/" method="post">
		        <div>使った内容:<select name="titles" tabindex="3"> 
				<option value="" selected="selected"></option>
				{% for value in titles %}
				<option value="{{ value }}" >{{ value|escape }}</option>
				{% endfor %}
				</select><input type="text" name="title" value="" tabindex="4" accesskey="c" /></div>
		        <div>使った金額:<input type="text" name="payment" value="" tabindex="5" accesskey="3" /><br /></div>
		        <div><input type="submit" value="設定"  tabindex="6" accesskey="s" /></div>
		        {% if paymentErrorMessage %}
		        <div class="errorMessage">{{ paymentErrorMessage|escape }} </div>
		        {% endif %}
	        </form>
					
			<div id="list" >
			過去20件の利用状況:
			<table border="1" cellspacing="0" >
				<tr>
					<th>日付</th>
					<th>使った内容</th>
					<th>金額</th>
				</tr>
			{% for value in outputValues  %}
				<tr>
					<td>{{ value.date }}</td>
					<td>{{ value.title|escape }}</td>
					<td>{{ value.value }}</td>
				</tr>
			{% endfor %}
			</table>
			</div>
		</div>

      <div id="footer">ご利用は計画的に。</div>
	</div>
	</body>
</html>