ローカルで外部ファイル読み込みのセキュリティ制約を回避する

高山の友人たちのホームページ「美しき日本の風景」と「私のがん記録」は、同じサーバーを共用していた。それでは色々と不便なところがあるので、それぞれに独立したサーバーを借りて運用することになり、新しいサーバーにそれぞれのホームページを転送し、正常に表示されることを確認した。
ところが「美しき日本の風景」に、5月以来投稿がない。サーバーを変更したのでアカウントやパスワードが変ったので、ホームページ作成支援ツール(M-tool)も修正した。それを早くダウンロードして使ってみてほしいところだが、いくら待っても投稿がない。
忙しいのか、うまくダウンロードができないのか分からないので、同じ市内の「私のがん記録」のオーナーに様子を見に行ってもらって、サーバーからのダウンロードをやってもらった。

その結果「美しき日本の風景」のオーナーのパソコンではページがほとんど表示されないので大騒ぎになったらしい。
高山から電話が掛かってきた。『ホームページがほとんど見えないのですけど・・・。』
いろいろ詳しく聞いてみると、表示できるのはメニュー位だけらしい。「私のがん記録」のオーナーが、その場では原因が分からず、いったん自宅に帰って状況を調べて報告してくれた。その結果下記のことが分かった。
1.ブラウザが Firefox の場合は正常に見えるが・・・
2.ブラウザが InternetExporer の場合はページの一部しか見えない。
3.ネットの場合は両方のブラウザで正常に見える。
ということらしい。最初は一体何がどうなっているのか訳が分からなかった。
最近 InternetExporer を使っていなかったのですっかり忘れていたが、InternetExporer はローカル環境では外部ファイルを読み込めないことになっていることを思い出した。そこで自分のパソコンでローカル環境で「美しき日本の風景」を表示して見た。確かにメニュー位しか表示していない。なるほどこういう事かと納得した。

ずっと以前から自分のホームページや山の会のホームページに登山した日のカレンダーを表示しているが、登山日のリストが外部ファイルになっているためにローカル環境では表示できないことを何とかしたいと考えていたことを思い出した。
外部ファイルを諦めて、登山日リストを内部ファイル化すれば解決することは分かっていたが、新しいページを追加する度に過去の全てのページのリストを書き換えるのは現実的ではない。1個の外部ファイルをすべてのページから読みに来る方が現実的である。
そこで思いついたのが、ローカル環境でもリストファイルだけはWebサーバーから読み込むというのはどうだろう? 早速やってみることにした。
外部ファイルは XMLHttpRequest() の同期通信で GET しているが、その GET するファイルをWebサーバーの絶対パスに書き換えてテストしてみた。どうやらうまく行きそうである。書き換えたファイルをサーバーにアップしてテストをしてみた。その結果、ローカル環境では IE と Firefox 両方でOKだったが、ネット環境では Firefox では見えなくなってしまった。ネットで見えないのでは致命的だ。早速元に戻した。

そこで、何か良い方法は無いかとネット検索してみた。そして下記のサイトが見つかった。
ローカル(file:///)上で外部ファイル読み込みのセキュリティ制約を回避するいくつかの方法」
このサイトには6個の方法が書いてある。私が試してみた『読み込む外部ファイルのみWebサーバに配置する』についても4番目の方法として書いてあったが、ネットに上げる前にローカルで表示の確認には使えないので、この方法はどっちみち諦めざるを得ない。

そこで1番目の『読み込む外部ファイルをHTMLと同フォルダか同フォルダの下層に配置(Firefox) + Ajaxに Microsoft.XMLHTTP を使用する (IE)』をやってみることにした。ただし対応はIEとFirefoxだけになる。
この方法はFirefoxについては変更箇所はない。IEについてはAjaxにActiveXObject("Microsoft.XMLHTTP")を使ってセキュリティ制約を回避している。

IEとFirefoxについて解決したので、更に欲が出てきて Edge についても解決したくなり、3番目の『<object> や <iframe> で外部ファイルを読み込んで内容を取得する (IE, Firefox, Edge)』についてやってみた。結果はIE、Firefox、Edge の3個のブラウザについてローカルでも見えるようになった。
HTMLの<body>に
<object data="test.txt" type="text/plain" id="obj" style="display:none"></object>
を追加し JavaScript も書き換えた。これで完成形かと思い全部のファイルを書き換えてサーバーにアップした。そして何気なく Chrome で表示してみたらネットで見えないではないか。 ん ?? ----。
ローカルで見えるようにしたことで、ネットで見えなくなったのでは本末転倒。Chrome のユーザーも決して少なくない筈だから、これは致命的な欠陥だ。全部を1番の方法に戻した。(下記)

CSV形式の外部ファイル(list.txt)を読み込んで配列に取り込むScript

function csv2Array(filePath) {						//list.txt ファイルのパス
	var lstData = new Array();

	var req = null; 		// 使える場合はMicrosoft.XMLHTTP, 使えない場合はXMLHttpRequest
	try { req = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { req = new XMLHttpRequest(); }
//	var req = new XMLHttpRequest();				//この行を上の2行のように変更した
	req.open("GET", filePath, false);				//true:非同期、false:同期
	req.send(null);
	var LF = String.fromCharCode(10);				//改行コード
	var lines = req.responseText.split(LF);
	for (var i = 0; i < lines.length;++i) {
		var cells = lines[i].split("<>");				//セパレータは<>
		if( cells.length != 1 ) {
			lstData.push(cells);
		}
	}
	return lstData;
}
データ
  • 2016.09.16(火)

 

アーカイブ

現在位置: ホームなんでも日記メニュー > このページ