XSS クロスサイトスプリクティング 
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です。 
仕掛け
上記の 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);
})();
|
変数汚染をしないように、無名関数に閉じ込めてあります。
- タグのHTMLを表示するコンテナ <span id="youtube_navi_tags"></span> がなければ この <script> の直前に作成
- id="youtube_navi_tags" の <span> の内容を書き換え。
- 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>
|
思いのほか、すっきりとできちゃいました。 
タグは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).
リンク元
メインメニュー
