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

19年2月18日(Mon) 12時30分
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).





新しくコメントをつける

題名
ゲスト名
投稿本文

より詳細なコメント入力フォームへ

トップ   凍結 差分 バックアップ 複製 名前変更 リロード印刷に適した表示   ページ新規作成 全ページ一覧 単語検索 最新ページの一覧   ヘルプ   最新ページのRSS 1.0 最新ページのRSS 2.0 最新ページのRSS Atom Powered by xpWiki
Counter: 10273, today: 2, yesterday: 3
初版日時: 2006-06-30 (金) 09:04:57
最終更新: 2006-06-30 (金) 09:04:57 (JST) (4616d) by nao-pon
このページのTopへ
ログイン
ユーザ名:

パスワード:

オートログイン

Basic 認証

新規登録 | パスワード紛失



メインメニュー
UsersWiki メニュー
付箋メニュー
付箋メニュー 
付箋の編集
文字色: 背景色:
お名前:  線接続id:
 
ブックマーク
オンサイトブックマークは
ログインするとご利用になれます
[ログインする]
サイト内 Wiki
☆ 検索 ☆



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

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

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

nao-pon
 

登録ユーザ数: 4598


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