XSS クロスサイトスプリクティング-徒然日記/2006-06-30-Wiki [自由帳]

Top > 徒然日記 > 2006-06-30

[ Page comments(0) ] [ Track Back(1) ]

Counter: 3297, today: 1, yesterday: 3

HEAD method でのレスポンスが遅いのはなぜ？

MyGmap モジュールを API v2 対応に

XSS クロスサイトスプリクティング

Category Blog:[ ネット ][ プログラミング ]

JavaScript を使った動的なサイトページ作成方法の中に、Ajax を利用してサーバーと通信を行い、随時ページ内容を書き換える方法がありますが、ひとつ難点があります。閲覧中のページ同じドメインのサーバーからしかデータを受け取れないということです。

そこで、別ドメインのサーバーから随時データを受け取りたい場合は、<script>タグを動的に書き換えることで、それが可能になります。

そこで、面白いことを思いつきました。

YouTube NAVI という YouTube API を利用するサイトを運営中ですが、その検索タグをリアルタイムで表示できるような仕組みを考えてみました。

<script id="youtube_navi_js" src="http://youtube.navi-gate.org/js/tags.js" type="text/javascript" charset="UTF-8"></script>

任意のページにこのHTMLを貼り付けると、リアルタイムで検索タグが表示されます。

こんな感じです。現状は5秒ごとに内容が更新されます。

もちろんローカルに置いたHTMLでもOKです。

仕掛け

上記の HTML から呼び出される JavaScript tags.js は次のような感じです。

(function(){
	var elm;
	if (! (elm = document.getElementById('youtube_navi_tags')))
	{
		var scr = document.getElementById('youtube_navi_js');
		elm = document.createElement('span');
		elm.id = 'youtube_navi_tags';
		elm.className = 'youtube_navi_tags';
		scr.parentNode.insertBefore(elm,scr);
	}
	elm.innerHTML = "この部分にタグのHTMLが入ります";
	setTimeout(function(){
		var scr;
		if (scr = document.getElementById('youtube_navi_js')){scr.parentNode.removeChild(scr);}
		scr  = document.createElement('script');
		scr.id   = 'youtube_navi_js';
		scr.src  = 'http://youtube.navi-gate.org/js/tags.js';
		scr.setAttribute('type','text/javascript');
		scr.setAttribute('charset','UTF-8');
		document.body.insertBefore(scr,document.body.firstChild);
	},5000);
})();

変数汚染をしないように、無名関数に閉じ込めてあります。

タグのHTMLを表示するコンテナ <span id="youtube_navi_tags"></span> がなければこの <script> の直前に作成
id="youtube_navi_tags" の <span> の内容を書き換え。
5秒後に自分自身を書き換え

たったこれだけです。
肝心の tags.js は、PHP にて随時書き換えを行っています。

ただ、ブラウザが IE の場合は、タイムスタンプが変わってもキャッシュが有効のままで書き換わらないため、.htaccess に次のような記述をしてキャッシュコントロールを行っています。

<Files tags.js>
	Header add "Expires" "Thu, 01 Dec 1994 16:00:00 GMT"
	Header add "Pragma" "no-cache"
	Header add "Cache-Control" "no-cache"
</Files>

思いのほか、すっきりとできちゃいました。

タグは100件保存しているので、100件表示バージョンも作ってみました。

<script id="youtube_navi_js100" src="http://youtube.navi-gate.org/js/tags100.js" type="text/javascript" charset="UTF-8"></script>

似たような BLOG

Last-Modified:2008/07/20 20:50:16

付箋機能(wema) メニュー

付箋の編集

Page name:	徒然日記/2006-06-30 [ Sended pings(8) ]
Author:	nao-pon	- 2006/06/30 09:04:57 JST(751d)
Last edit:	nao-pon	- 2006/06/30 09:04:57 JST(751d)
Editers:	nao-pon
Back Link:	.htaccess(560d) 独自ドメイン(654d) PHP(1019d) 徒然日記(1430d)

ページコメント

The comments are owned by the poster. We aren't responsible for their content.

Track Back [ Track Back(1) ]

Track Back URL: http://xoops.hypweb.net/wiki/tb/4960

おひつじ座2006年06月30日の占い
Excerpt: ★恋愛★7：異性関係の変化で戸惑いがちな一日です。 ★マネー★6：思わぬところで出費がかさみそう。 ★仕事・勉強★10：ひたむきにやればみんなが認めてくれそう。
Weblog: i-Uranai.net：今日の占い
Tracked: June 30, 2006, 12:54 AM