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って便利なんですよね(^.^;;;

移行完了

まず、はじめに。うっとおしい広告を入れてすみません(_ _) こういう賑やかし、やりたかったんです(^^;なんかブログっぽいな、と思ってgoogle adsenseに登録してみました。こんな備忘録のブログでも審査に通るんすねぇ~。

先週より、6年ほどお世話になった “wordpress.com” から 引っ越し。理由は・・・スタイルシート変更のために払っていた4000円をケチるため。

もともとwordpressを始めた頃に、スタイルシートの修正を保存できるように、と思ってカスタムスタイルシート・プランを15ドル/年で購入したんですが、3年程前から円安のせい?か倍の30ドルに値上げになって・・・スタイルシートを保存するためだけに4000円って・・・ってな感じ。

で、仕事用に使っていたVPSに移しました。さらに、ドメイン転送にも1600円/年かかり、どこまで貧乏人からむしり取るんじゃー、と愚痴りつつ、やっと移行完了。

Google AdSense もイマイチ用語が分からず、広告ユニットって何? コンバージョン? なにそれ、おいしいの? とチンプンカンプンな用語のオンパレードの管理画面をもう見る気もせず、適当に3つ配置。

サイドバーのウィジェットに表示させるのは「HTML Javascript Adder」プラグインを使って簡単に放り込めたんですが、投稿記事に貼り付ける方法がいまいち分からず、手っ取り早く、直接テーマ内の functions.php に “the_content”フィルターフックを仕込んで適当に解決。

<?php
// into functions.php 
/*******************************************************
 最初の<p>タグ(段落)の後ろに広告を表示させたいので、
 wpautop関数がコールされた後にコールされないと意味がない。
 とりあえず優先度を999で様子を見る。この辺よくわからん。
*******************************************************/
add_filter( 'the_content', 'inject_google_adsense_code' , 999);

function inject_google_adsense_code($content)
{
  global $wp_query;

  static $ads = <<<__EOL__

ここに 広告のコードを挿入。

__EOL__;

  // ループの最初の記事だけに適用
  if(!is_feed() &&  0 == $wp_query->current_post)
    {
      // 最初の段落の終わり</p>閉じタグの後ろに広告コードを挿入
      if(false !== ($pos = strpos($content,'</p>')))
       {
          $pos += strlen('</p>');
          $content = substr($content,0,$pos) . $ads . substr($content,$pos + 1);
       }
    }

  return $content;
}

//追記
// feed の中にも出てきてしまっていたので is_feed()関数で除くようにした。

ふぅ。

【jQuery】 jquery.simplePopup 書き直し

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

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

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

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

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

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

SJISで組まれたPHPスクリプトをUTF-8で出力する。

【追記 2015年2月9日】
文字化け対策で、mb_convert_encoding関数に渡す漢字コードは’SJIS’ ではなく、’SJIS-WIN’ ( ‘CP932’) を使えとのお達し。ごめんなさい(m_m)
【追記ここまで】

年初からなんやかんやと忙しく更新する時間が取れないので、放置状態でした(ーー;;
ここ一ヶ月、年度末でなかなかの作業量。

備忘録のメモです。

外注している、SJISで組まれたPHPスクリプトをヘッダとフッターを変えUTF-8にする、という簡単な仕事。時間が迫っているので、外注先に投げる時間がない。ヘッダとフッタを変えてスクリプトファイルの文字コードをUTF8にしただけでは、文字化けしてしまう。そりゃ当然、 データーベースに保存されているデータはSJISのままなんだから・・・。

しかもデーターベースには手が出せない。それに外注先のスクリプトをこちらで勝手にいじると、まずい。何かと問題がある。

というわけで・・・

元のPHPスクリプトファイルを XXXX-sjis.phpのようにして、XXXX.phpから以下のようにしてXXXX-sjis.phpを読み込んでエンコード変換して出力することで、一応解決。

&lt;?php
//XXXX-sjis.php
echo 'これはSJISファイルスクリプト';
?&gt;

&lt;?php
// XXXX.php
$sjis_contents = file_get_contents('http://host/XXXX-sjis.php');
echo mb_convert_encoding($sjis_contents,'UTF-8','SJIS');

本当は以下のように、元のファイルに出力バッファリング・ハンドラを追加すれば解決するんですが・・・元のファイルはあまりいじりたくないので・・・(^^;;;;

&lt;?php
function output_handler($buf)
{
  return mb_convert_encoding($buf,'UTF-8','SJIS');
}

ob_start('output_handler');
//XXXX-sjis.php
echo 'これはSJISファイルスクリプトですが、出力はUTF-8になります。

ob_end_flush();
?&gt;

とりあえずの応急処置・・・でなんとか切り抜けた(^^ゞ

でも・・・わざわざfile_get_contents関数なんて使わないで、requireすれば良かったのか????

&lt;?php
// XXXX.php
function output_handler($buf)
{
  return mb_convert_encoding($buf,'UTF-8','SJIS');
}

ob_start('output_handler');

require 'XXXX-sjis.php';

ob_end_flush();

まぁ、いいや。

hasOwnPropertyがない

Internet Explorer 8でチェックしてたら、window.hasOwnProperty()のところでエラーが発生。あれ?

自分の無知が恥ずかしい。。。

MSDNドキュメントをチェックしてみると、なんかドキュメントがええかげん。.hasOwnPropertyの説明では確かにIE8はサポートされない、と書いてあるんだけど・・・javascriptのバージョン情報のところを見ると、hasOwnPropertyは’Y’になっとる。

だけど、Object.hasOwnProperty はエラーは起こらず。どゆこと?

結局、IE8の時だけ、下記のようにする。

// これってもしかして、常識なの???(^^;;;
var undefined;
if(window.hasOwnProperty === undefined)
{
  window.hasOwnProperty = function(property_name)
    {
       return Object.prototype.hasOwnProperty.call(window,property_name); 
    };
}

なんか、釈然としない。はやくIE8消えてくれ。つか、会社のPC、いいかげん、XPから7にバージョンアップさせてほしい・・・自分で金出すから。