hypweb.net
XOOPSマニア  最新情報のRSS(サイト全体)
[ 自宅サーバーWebRing |ID=54 前後5表示乱移動サイト一覧 ]

19年7月19日(Fri) 18時23分
TOP » UsersWiki » nao-pon » blog » 2006-06-30

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

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

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

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

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

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

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

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

html(): no argument(s).

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

Page Top

仕掛け anchor.png

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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
(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);
})();

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

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

たったこれだけです。

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

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

1
2
3
4
5
<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>

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


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

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

html(): no argument(s).





Post a new comment

Subject
guestname
Body

Go to richer form

Front page   Freeze Diff Backup Copy Rename ReloadPrint View   New Page Page list Search Recent changes   Help   RSS of recent changes (RSS 1.0) RSS of recent changes (RSS 2.0) RSS of recent changes (RSS Atom) Powered by xpWiki
Counter: 10758, today: 4, yesterday: 6
Princeps date: 2006-06-30 (Fri) 09:04:57
Last-modified: 2006-06-30 (Fri) 09:04:57 (JST) (4767d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証 | SSLログイン

Register now! | Lost Password?



メインメニュー
UsersWiki メニュー
付箋メニュー
Fusen(Tag) menu 
Tag Editor
Color: BG:
Name:  Connect line ID:
 
ブックマーク
Please log in to use it.
[Login]
サイト内 Wiki
☆ 検索 ☆



高度な検索(サイト内)
FireFox検索プラグイン
オンライン状況
合計 48 人がオンライン中 :-)
(UsersWiki : 3 人)

登録ユーザ: 0 & ゲスト: 48

もっと...
サイト情報
管理人

nao-pon
 

登録ユーザ数: 4610


Web Services by Yahoo! JAPAN
楽天ウェブサービスセンター
Amazon.co.jpアソシエイト
現在ページのQRコード
現在ページのQRコード
[携帯対応]
参照元情報