iframe要素のsandbox属性

先日、iframeを使用している自作のjQueryプラグインを使って構築しているWebアプリの管理画面が突然正常に動かなくなった!

ブラウザの開発者ツールのコンソールから原因を調べたら、iframe要素内で読み込んでいる同じドメイン内のリソースからフォームを投げたり親ウィンドウへのアクセスがことごとくエラーになっていたorz コンソールには、allow-modalsがなんとかかんとか、という見たこともないエラー。

でも、エラーになるブラウザはchromeだけ。FireFoxやIEは問題なかったので、たぶんchromeの最近のバージョンアップでiframe要素のセキュリティが高くなってしまったのかなー、とよくよく調べたら、下記sandbox属性をiframeに追加すればちゃんと動くようになった。どうやらHTML5.1にchromeが対応しただけ? (というか、HTML5.1なんて、そんなもんあったの?無知は嫌だねぇ(_ _) 常にアンテナはっとかないとダメですよねぇ・・・)

  • allow-modals
  • allow-pointer-lock
  • allow-popups
  • allow-popups-to-escape-sandbox
  • allow-top-navigation

名前からだいたいの想像はつくんですが・・・allow-modalsとかallow-popupsとか違いが分からない。また今度時間あったら調べよう。

もともと、<iframe sandbox=”allow-same-origin allow-forms allow-scripts”> という風にしてたんですが・・・もっと調べたら、上記5つのsandbox属性は、HTML5.1から追加された?もののようですね。
(この辺、自分ではよく分かってません(_ _)

ってことは、このまま放っておくと、InternetExplorerはともかく、いずれはFireFoxもMicrosoft Edgeも動かなく・・・。このプラグイン使っているところは、修正したプラグインのJSファイルだけ上書き全部しないとなー。

根本的にはiframe要素をすべて排除して、全てajaxな作り方すれば良かったんですけどね・・・中途半端は良くないですね・・・でも、iframeって便利なんですよね(^.^;;;

ピリオド区切りバージョン番号の比較

Javascript(ECMAScript)で、jQueryのバージョンで分岐させる必要があったのですが、最初は、何も考えずに 等号・不等号演算子で比較してました。手抜きですね(^_^;) しばらくは何の不都合もなく動いていたのですが、使用しているjQueryのバージョンを1系列の最新バージョンにしたら動かなくなった。

当たり前ですね。最新のバージョン番号を $().jqueryで取得すると、1.11.x (xは数字) というのが返ってきます。で、単純に比較すると・・・ダメなのは明白ですね(笑)

ということで、急いで適当に書く。備忘録おわり。

関数名はPHPみたいに version_compare() とかだと長すぎるし、version() にするとバージョン番号を返すものと混同するし、何がいいんでしょうねぇ。まぁ、どうでもいいんですけどね。

ぐおー、perlだとpackで一発なのに・・・

【jQuery】 jquery.simplePopup 書き直し

【2015年8月26日 ver2.0.9 更新】

仕事で使うために作ったプラグイン。

リンク先の画像などをブラウザ・ウィンドウ内にポップアップ表示するJavascriptライブラリはたくさんありますが、数が多すぎてどれがいいのか分からないのと、本体以外にCSSファイルや画像が必要であったりとややこしい。

最低限、一つのファイル(プラグイン本体のJSファイル)で設置できて、自分にとって使い勝手がいいものを勉強がてら作ってみよう、というのが4年前に作り出したきっかけ。

ドキュメント作成・備忘録も兼ねてアップ。
リンク先をウィンドウ内にポップアップ表示するjQueryプラグイン

jQuery.simplePopup-【jQueryプラグイン】

edge and user agent strings

Windows10にバンドルされている新しいブラウザ、Microsoft Edge(以下Edgeと略)。中身はともかく、さっそく今までPHPで作ったスクリプトでチェック・チェック(^^)

IEに依存している部分は少しあるのですが、ほとんど問題はない。が、一カ所、UAで分岐しているところだけ不具合発生orz

Edgeのユーザーエージェントは、Edgeで確認すると・・・

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/42.0.2311.135 Safari/537.36 Edge/12.10240

ん? なにこれ?(;゚ロ゚)

Apple Webkitやら Chromeやら、うそつきブラウザやんけー。Microsoftの説明では、

他の最新のブラウザーや現代的な Web コンテンツとの相互運用性を最大限に高めることを目的としています。

だそうです。。。https://msdn.microsoft.com/ja-jp/library/hh869301(v=vs.85).aspx

なら、IEで分岐している所は要らないんだなー、と思いきや、Content-Dispositionヘッダで、filename にファイル名を指定する部分で日本語を使うと・・・ブラウザ側でファイル名の文字化け発生・・・。

相互運用できてねーじゃん!(゚Д゚) 結局やっぱり、IE分岐が必要やんけ!
ってことで、やっぱり、UserAgent文字列から「Edge」を検索して処理を分岐してあげるケースがあった。

とほほ。

Text::CSV_XS::version を確かめなさい・・・

全県の郵便番号CSV(ZIP書庫)ファイルを日本郵便のサイトからダウンロードして、解凍して、SQLiteのテーブルへぶち込む、一連の流れをperl で書いた。

そもそもの発端は、メールフォームや会員登録フォームなどで住所を入力する手間を省くため郵便番号から自動的に住所が挿入される、よくある仕組みを実装するため、変換のベースとなるCSVデータをSQLiteにインポートすれば、SELECT一発で引けるやん、という訳。

ここで、上記のCSV => SQLite にインポートするため、Text::CSV_XSモジュールを使った。まぁ、それが当然ですよね。このスクリプト自体はすぐ出来たんですが、作成・実行をWindows7上のActivePerl 5.14.1 で行った。なんら問題ない。

#CSVからレコードを読込データベーステーブルに登録する。
# $dbh   :DBIハンドル,
# $table :テーブル名
# $fin   :CSVファイルのIOハンドル
# utf8,h2z_,sjis は 文字コード変換のために定義した関数
# eval_result はエラー処理のために定義した関数
sub csv2db
{
  my ($dbh,$tablename,$fin) = @_;
  my $csv = Text::CSV_XS->new({binary => 1,eol => $/});

  eval
    {
      my $sth = $dbh->prepare(sprintf('insert into %s values(?,?,?,?,?,?,?,?,?)',$tablename));
      $dbh->begin_work;

      my $count = 1;
      while(my $row_ = $csv->getline($fin))
        {
          $row_->[1] =~ s/\s+$//g;
          if(1 != $sth->execute($row_->[0],
                               $row_->[1],
                               $row_->[2],
                               utf8(h2z_($row_->[3],'cp932')),
                               utf8(h2z_($row_->[4],'cp932')),
                               utf8(h2z_($row_->[5],'cp932')),
                               utf8($row_->[6]),
                               utf8($row_->[7]),
                               utf8($row_->[8])))
            {
              print "failed to insert...row($count)\n";
            }

          if((my $c = $count++) % 10000 == 0)
            {
              $dbh->commit;
              print sjis("${c}件登録されました。\n");
              $dbh->begin_work;
            }
        }
    };
  eval_result('insert data successfully.',sub{$dbh->commit;},sub{$dbh->rollback;});
}

で、このコードを含む一連のスクリプトを、テストサーバー(CentOS6 / perl 5.10 ) で実行すると・・・

Wide character in subroutine entry…

でました・・・。やな、メッセージ(;゚ロ゚)

半角カタカナから全角カタカナの変換がおかしいのかなー・・・なんて見当違いな事をいろいろ試してました。というのも、ちゃんと変換できてるレコードもあるので・・・。ちゃんとSQLiteへインポートできたレコードと上記エラーメッセージが出たレコードを比較しても全然分からん。

で、最終的に、分かったのが・・・CSVからレコード配列に変換するときに変なことが起こってるみたい・・・というのが判明して、Text::CSV_XSモジュールを使わず単純にsplitを使うと、あっけなくインポート終了。なぜ???

最終的に、Text::CSV_XSのバージョンが違っていたことが原因と判明。

Windows上のActivePerlにバンドルされていたバージョンは、”0.82″。 CentOS上のperlにバンドルされていたバージョンは”1.19″。どうやら新しい方のバージョンは、Text::CSV_XS->new({…, decode_utf8 => 0})というようにdecode_utf8属性?を無効にしないと、UTF8フラグが付いてしまう?らしい。この辺、まだよく分からん。

こんな、perldoc Text::CSV_XS をちゃんと読めば解決できたであろう、しょーもないことに丸2日もかかっちまったよ。トホホ。。。