はじめに

jQueryを使ってサーバに置かれてるディレクトリのファイル一覧を取得しようとしてハマったのですが、検索しても初心者向けみたいな役に立たないものしか出てこなくて、最終的に自力解決したのでメモを残しておきます。

やろうとしたこと

下記のようなディレクトリ構成で、index.htmlにA,B,Cを並べてみせる。ファイルが増減したら自動追従させたいというのがミソ。

topdir
    |--index.html
    |--contents/
              |--A.html
              |--B.html
              |--C.html
              |--images/
                  :

jQueryでやる

ざっくりこんな感じ。AJaxを使ってディレクトリリストのHTMLを拾い、そこからアンカー要素を引っこ抜いて追加しています。

$(function() {
  $.ajax({
      url: "contents/",
      success: function(data) {
        $(data).find('a').attr('href', function(i, val) {
          if (val !== "images/") {
            $(body).append("<iframe src=\"contents/" + val + "\"></iframe>");
          }
        });
  }});
});

ローカルマシンで試す

HTTPサーバを立ち上げて

$ python -m SimpleHTTPServer 8080

localhost:8080にWebブラウザでアクセス。

OKできました。

Github Pagesに置いてみる

一式置いて、試してみました。

真っ白。

あれー?

コンソールを開いてみる

エラーが出てました。

Mixed Content: The page at 'https://(省略)/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://(省略)/contents/'. This request has been blocked; the content must be served over HTTPS.

えっなんで? どこにもhttpって指定してないよ? Github PagesはHTTPSだから、相対URLだってhttps://のはずなのに。

検索しても「HTMLの中でhttp://って書いてるよね、https://に修正して。あるいは書かずに相対URLで」みたいなのしか出てきません。こっちは最初から相対URLでやってるんですけど。ぐぬぬ。

いろいろ調べてわかった結果

Github Pagesには、自動ディレクトリリスティング機能がない
そのため https://(省略)/contents/ にアクセスしても404 Not Found
Ajaxは、HTTPSで404だとHTTPに読み替えてアクセスしようとする
Webブラウザ(Google Chrome)はHTTPSとHTTPの混成とみなしてエラーで止まる

ということでした。

どう解決したか

とりあえずcontents/index.htmlを置きました。

contents/index.html

<html>
<body>
<ul>
<li><a href="A.html">A.html</a></li>
<li><a href="B.html">B.html</a></li>
<li><a href="C.html">C.html</a></li>
</ul>
</body>
</html>

サーバ側で自動生成できればいいのですが。

無事動きました。ローカルとGithub Pagesで記述を分けるようなこともなく、解決です。

おわりに

Ajaxの「HTTPSがだめならHTTPで」という挙動、抑制する方法あったりしますか? ご存知の方いらっしゃいましたらご教示ください。何時間無駄にしたか、、、

AJaxとHTTPSとGithub Pagesの罠にハマった件