2011年6月28日火曜日

Githubのrawリンクも変更された

gistの変更に追従というか合わせて、GithubのrawファイルのURLが変更された。

たとえば、今までのようなURLだと

https://github.com/azu/OAuth-for-Greasemonkey/raw/master/GMwrap.js

下のように、rawをサブドメインとしたURLに302リダイレクトされる。

https://raw.github.com/azu/OAuth-for-Greasemonkey/master/GMwrap.js

302というのも何か気持ち悪いけど、GMwrap.js at master from azu/OAuth-for-Greasemonkey - GitHubから見られるrawのリンクは未だに古いまま。

これの影響で、リダイレクト先を自動で取得してくれないものは今までのURLだとエラーになる。
Greasemonkeyの@requireとか@resourceとか…

2011年6月26日日曜日

タブに重複ファイル名がある場合に見分けられるようにするJetBrainsプラグイン

TabFolderというJetBrains系IDEで動くプラグイン。
WebStormで動かしてるけど、どのIDEも対応している。

インストールすると、プロジェクト内に同じファイル名のものがあって、それを両方ともタブに開いた際にフォルダ名をタブに追加してくれる。
何か似たようなプラグインを見た気がするけど、WebStormだとこれしかないような気がする。

image

そのうち標準で入ってそうな機能でもある。

2011年6月25日土曜日

Firebugのconsole.log()の返り値をそのまま使ってはいけない

以前Twitterで書いたけど、記事にするの忘れてたので。

そもそもはconsole.log()の返り値がundefinedだと思っているという前提みたいなものがあるので、気にならない人は全く気にならないと思います。

まず、console.logの返り値を使ってしまうとはどういう状況かというと

function mimi(arg){
if(!arg){
return console.log("引数ないよ!");// return&メッセージ出すと便利
// だけどこのときのreturnされるのはfalsyではない場合がある
}
// 処理
}
var res = mimi();// falsyな値が返ってくると思ってしまう
// 実際にはresに _firebugIgnore が返ってくる
if(res){ // resがtrueになって意図とは異なる可能性
// ほげ
}

このように、引数が足りないから空のreturnして関数を抜けることがありますが、こういうときに同時にメッセージを出力すると便利です。
だけど、Firefox4+Firebug1.7以降だと、console.logの返り値は_firebugIgnoreというものになっているため、上のように書くと意図とは異なる動作になる事があります。

回避法は単純にconsole.logの返り値がundefinedなどのfalsyと保証されている訳ではない事を理解して使えばいいので、いろいろやり方はある。

以前いろいろ書いたけど、JavaScriptでのlogデバッグ関数 | MemeTodoのようなlog関数を通すのが簡単で安全な気がします。

なんで_firebugIgnoreなんてものを返すのかは多分下あたりに。

JavaScriptでのlogデバッグ関数

を見て何となく書いた。

Greasemonkeyだとこういうのをよく書いてて、consoleは直接使わないでlog関数経由で出力してた。

function log(m) {
if (unsafeWindow.console) {
unsafeWindow.console.log.apply(this, arguments);
} else {
console.log.apply(this, arguments);
}
}

わざわざunsafeWindowと分けて書いてるのは、たまにconsoleが無いとか言われることがあったため。

似たような方法で、log関数でデバッグなどをするのは良いけど、公開するときにそのlog関数を除去するのは面倒なので、DEBUGという変数で出力するか否かを変更できるようにしたものも使ってた記憶がある。
var DEBUG = true;// デバッグ関数を切り替え
// DEBUG - true
function log(m) {
if (typeof DEBUG !== 'undefined' && DEBUG) {
if (unsafeWindow.console) {
unsafeWindow.console.log.apply(this, arguments);
} else {
console.log.apply(this, arguments);
}
}
}
これと似たようなもので、上のだと毎回判定しているのが何か気に入らなくてクロージャーで、DEBUGの判定を一回だけにするものも書いた(これはGreasemonkeyじゃなくても使える)
var debug = (function() {
var DEBUG = true;// デバッグ関数を切り替え
if (DEBUG) {
return function() {
console.debug.apply(this, arguments);
};
} else {
// コール可能でできるだけコストが低いものを考える
return function() {
// do not anything
};
}
})();

DEBUG = false;の際はコールしても意味ないダミー関数が呼ばれるようになる。
さっきのと合わせて、GreasemonkeyのunsafeWindowのコードを入れると以下のような感じか

var debug = (function() {
var DEBUG = true;// デバッグ関数を切り替え
if (DEBUG) {
return function() {
log(arguments);
};
} else {
// コール可能でできるだけコストが低いものを考える
return function() {
// do not anything
};
}
function log(m) {
if (unsafeWindow.console) {
unsafeWindow.console.log.apply(this, arguments);
} else {
console.log.apply(this, arguments);
}
}
})();

合わせてこれも

2011年6月24日金曜日

JavaScriptのパッケージ管理システムのEnder.jsを見た

Ender - the no-library library.というJavaScriptのパッケージ管理ライブラリみたいなものをちょと触った。

node.jsが必要で、npmでインストールする
最近、JavaScript関係でもNode.jsを使ったものが多いので、Windowsでも使えるようにWindowsからVM上のLinuxをSSH経由で利用する開発環境の構築 | Web scratchとかCygwinで準備しておいた方がいい気がする(そのうちWindows版Nodeでると思いますが。Porting Node to Windows With Microsoft’s Help « node blog)

$ npm install ender -g

ender.js自体はパッケージ管理、ビルドなどのコマンドラインツールだと思う。
デフォルトでいくつかJavaScriptパッケージ(ライブラリともいう)が入ってる。
ender build でパッケージをビルドして、ender.min.jsとender.jsが生成される。

$ ender build scriptjs backbone
ender infoでアクティブなパッケージ群が表示できて、結構面白い。

X/ _ / X <  ender info
Welcome to ENDER - The no-library library
-----------------------------------------
Your current build type is "build"
Your current library size is 7.9 kb

Active packages:
└─┬ jeesh@0.0.5 - The official starter pack for Ender.
├── domready@0.2.4 - bullet proof DOM ready method
├── qwery@2.1.2 - blazing fast CSS1|2|3 query selector engine
├── bonzo@0.6.1 - Library agnostic, extensible DOM utility
└── bean@0.1.9 - an events api for javascript

パッケージを追加するには、ender addでできる。
ender addしたときに、既にビルドしたender.jsなどがあったら自動で更新されたりしてるのが面白い。

X/ _ / X <  ender add underscore
Welcome to ENDER - The no-library library
-----------------------------------------
installing packages: "underscore"...
this can take a minute...
successfully finished installing packages
assembling packages...
ender.js successfully built!
ender.min.js successfully built!
X / _ / X < ender info
Welcome to ENDER - The no-library library
-----------------------------------------
Your current build type is "build"
Your current library size is 10.7 kb

Active packages:
├─┬ jeesh@0.0.5 - The official starter pack for Ender.
| ├── domready@0.2.4 - bullet proof DOM ready method
| ├── qwery@2.1.2 - blazing fast CSS1|2|3 query selector engine
| ├── bonzo@0.6.1 - Library agnostic, extensible DOM utility
| └── bean@0.1.9 - an events api for javascript
└── underscore@1.1.6 - JavaScript's functional programming helper library.
パッケージから取り除くには
ender remove

を使う。
パッケージごとにバージョンを指定したりもできるみたい

ender set bean@0.0.3

使えるパッケージ(ライブラリ)はEnder.js - The open submodule libraryとかに書いてあるのとか、自分で追加したりできるんだと思う。
Ender.js - The open submodule libraryは小さな機能集合で、全部入れればjQueryと似たような機能はだいたいあるような気がする。underscore.jsとかbackbone.jsとかもパッケージに追加できたりして、好きな機能だけが入ったものをビルドできたりして仕組み的にはいいかもしれない。
(内部のコードがどうなるかがアレですが)

最初はスターターパックとか書かれている

のパッケージをいれたJEESHとか言うので試してみてる。(このJEESH自体はCDNでホスティングされてるみたい)
DOM系でjQueryライクなものを集めた感じ。

X / _ / X <  ender -b jeesh
Welcome to ENDER - The no-library library
-----------------------------------------
installing packages: "ender-js jeesh"...
this can take a minute...
successfully finished installing packages
assembling packages...
ender.js successfully built!
ender.min.js successfully built!
X / _ / X < ender info
Welcome to ENDER - The no-library library
-----------------------------------------
Your current build type is "build"
Your current library size is 7.9 kb

Active packages:
└─┬ jeesh@0.0.5 - The official starter pack for Ender.
├── domready@0.2.4 - bullet proof DOM ready method
├── qwery@2.1.2 - blazing fast CSS1|2|3 query selector engine
├── bonzo@0.6.1 - Library agnostic, extensible DOM utility
└── bean@0.1.9 - an events api for javascript

underscore.jsにDOM系のものも混ぜたいとか思ったら、触ってみると良さそうな気がする。

$.map(['a', 'b', 'c'], function (letter) {
  return letter.toUpperCase();
}); // => ['A', 'B', 'C']

$.uniq(['a', 'b', 'b', 'c', 'a']); // => ['a', 'b', 'c']

みたいな感じで、underscore.jsも$から使えるようになる。

まだ実際にコード書いてなくて、パッケージ管理としての機能を見てだけなので、使ってみてどうなのかは分からない。

小さな機能別のライブラリを集めて使うってので、microjsを思い出した。

2011年6月23日木曜日

<img src="" /> とした時に起きる、ブラウザ間での動作の違いについて

<img src="" /> としたときの動作をブラウザ別に並べよ。(一つのブラウザにバージョン別の挙動を書いても良い)
http://twitter.com/azu_re/status/83761909039505408

というので、img要素のsrc属性値を空にしたときの動作について、以前調べたものを今更だけど置いておきます。
調査目的は表題とは若干違って、<img src="http://~" /> という要素のsrcを空にした場合、その通信は停止するのかという事を知りたくて調べてました。
04WebServerというローカルサーバーを使って試していたので、Apacheなど一般的なものだと異なる可能性も捨てきれませんが参考程度に。
バージョンも古い事に注意してください。(おそらく動作は異なるように修正されている気がします)


2010年12月1日

目的:XHRDOMにより画像を読み込むことができるが、XHRabort()DOMsrc=""とすることで通信が本当に停止しているかを確認する。

  • Firefox 3.6.12
  • Chrome 7.0.517.44
  • Safari 5.0.3
  • Opera 10.63

XHR

abotによる停止

onabort

接続が切れてるか(サーバーのログから見る)

IE6-8

発生しない*1

500, Internal Server Error データ送信中に切断もしくはネットワークエラーが発生しました(以下500 Internal Server Error)

Firefox

発生

500, Internal Server Error

Chrome

発生

500, Internal Server Error

Safari

発生

500, Internal Server Error

Opera

発生しない

500, Internal Server Error

*1 IE6-8XHRにはonabort実装されていない

プロファイラを利用して確認

clip_image001

しかし、abort()後にxhr.readyState == 4となるため、自分でabortフラグを管理することでabort()によってreadyState==4 になったことがわかるのでonabortの代用は可能

DOM(Imageオブジェクトを使用) - example.htmlで実行した場合

停止(srcを空に)

onerrorイベント

空の場合の読み込み

接続が切れてるか(サーバーのログから見る)

IE6-8

発生

example.html

500, Internal Server Error

Firefox

発生しない

読み込まない

500, Internal Server Error

Chrome

発生

example.html

500, Internal Server Error

Safari

発生

example.html

500, Internal Server Error

Opera

発生しない

読み込まない

500, Internal Server Error

どちらの方法もサーバから切断しているため、通信は停止できたと思われる。
が、
IE6-8ではimg.src = "";としたときに、そのスクリプトがあるページ( example.html)を読み込もうと無駄な通信をしてしまう。

これは、属性値が空の場合の挙動がブラウザの実装依存になっているため、ブラウザ間で挙動の違いが存在し、属性値が空をページそのものと解釈して読み込み処理が起きてしまっている。
2010年のごく最近にWHATWGでの議論により、属性値が空の場合は読み込まれないことが適切という結論がでたらしい。

よってHTML5ES5ではこの結論を追従した実装になっているだろうという話。
下の記事によると
Firefox3.5Opera以外のブラウザで属性値が空の場合に無駄な読み込みが発生しているので、結果と一致している。

つまり、<img.src="" />としたことで、画像の読み込みが停止できているように見えるが、IEの場合には自分がいるページを読み込む無駄な通信が生まれてしまっている。Firefox以外ではonerrorが発生していることから、errorを発生させて画像の読み込みを停止させているのではないかと推測できる。(追記:この辺推測なので、正確性は保証されません)

DOMのImageオブジェクトでの読み込み停止は、実際にはエラーにより停止しているというのが近いのかもしれない。
window.stop()によってDOM(Imageオブジェクト)での読み込みも停止できるが、他の通信も止まる。(ブラウザによって異なるかも)

2011年6月22日水曜日

IE9関係の翻訳記事がいろいろ更新されてた

何かいろいろ一気に更新されてたので、興味あるのを取り出してみた。

Internet Explorer ブログ (日本語版) - Site Home - MSDN Blogs から

Internet Explorer デベロッパーセンター:MSDN オンライン更新情報(RSS)から

全部取り出した訳じゃないけど、それでも10個ぐらい一気に更新されてた。
これぐらい一気にやるならどっかに更新内容だけをまとめた記事とかほしい。

こういう翻訳記事を書いてくれてるブログとか(公式以外でも)、他にあったりするのかな。

2011年6月21日火曜日

Web開発に使えそうな気になるツール、ソフトウェア

何か気になりますね。そんなツールなど。

HTTPモニタリングやプロキシなどのジャンル、CocProxyで有名なローカルファイルの置換機能など何かと便利なもの。
Fiddler勉強会開かれるといいですね。

dynaTrace AJAX EditionはJavaScriptの実行順とかパフォーマンスチェックとか、関数の呼び出し回数みたいなプロファイリングがかなり詳細にとれるのでとりあえず触るといい。
元々IE向けのソフトウェアだったので、IEでのデータがかなりとれてとてもよいソフトウェア。
FIrefoxにも最近対応しているが、Firefox4とかそのとき安定したバージョンでないと動かない事があるきがする(理由は多分 http://twitter.com/azu_re/status/79839998479826945 )

メモリリークとかの調査。
JavaScript Memory Validatorは使ってる人見たことないので気になる。
Webkitは--enable-memory-infoでJavaScriptから、JavaScriptのヒープサイズなどを取得できたりするし、Web Inspectorにもその辺の機能が組み込まれてきている。

Firefoxもメモリ情報を取得できるようになってきて(特権機能=通常のWebサイトのようなコンテキストからは無理)、少し前まではしょぼかったけど、今はWebkitと同じようにJavaScriptのヒープサイズなどを取得できるようになってきている。
(取得というと何か変な気がする、about:memoryにそういう情報が表示されるようになったって感じか)

ChromeはChrome OSとの関係でメモリとかプロセスとかそういう関係のものをどんどん載せている気がする。最近(Chrome14ぐらい)、chrome://taskmanager というプロセス管理画面ができてた。

ちょっと外れるけど、そういうChromeの機能はabout:からchrome:// という感じになっているみたい。

about:がchrome://version、about:flagsがchrome://flagsに
Google Chrome開発版が14.0.794.0にメジャーアップデート #chromeJP | UNDAKOVR Blog

自分はあまり低レイヤーに詳しくないので、こういう今まで見えにくかったものも見えるような方法がでてきてると思うので、詳しい人はどんどん触れていってほしいですね。

IEとかでも、下記のブログ記事などは全く知らないことばかりだった。

try...catchとErrorオブジェクト

基本的なtry...catchの書き方
try {
    // Code
} catch (varName if condition) { // Mozilla extension; optional
    // If exception thrown which matches condition
    // in try block, execute this block
} catch (varName) {              // Optional
    // If exception thrown in try block,
    // execute this block
} finally {                      // Optional
    // Execute this block after
    // try or after catch clause
    // (i.e. this is *always* called)
}
Firefoxはcatch内でifを使う特殊な書き方ができる。
コード全体をtry...catchしたいーなんて思ったときはwindow.onerrorを使った方がいい
サイ本にもwindow.onerrorを使ったエラーキャッチ(回数制限つける)するものが書いてあった。
// Display error messages in a dialog box, but never more than 3
window.onerror = function(msg, url, line) {
    if (onerror.num++ &amp;amp;amp;lt; onerror.max) {
        alert("ERROR: " + msg + "\n" + url + ":" + line);
        return true;
    }
}
onerror.max = 3;
onerror.num = 0;
いつtry...catchするか、という話が結構難しい感じがする。
JavaScriptだとファイルを読み込むとか、メモリを解放するとかそういう話を直接扱うことはまだ余りないので、使いどころが何か難しいし、いろん なところでwithなどと一緒にパフォーマンスを悪くする要因と書かれたりするので、全くtry...catchしてないコードもよくある。
使うべき所の一つとしてはtry~catch文の正しい使い方 - 素人がプログラミングを勉強するブログを見ていて思ったけど、XPathはなぜか静かに死ぬことがあって、そういう時はどこが悪いのかを見つけるのが大変になるので、エラーハンドリングが大事。 というのも、XpathをGreasemonkeyでのスクレイピングでよく使っていて、サイトの仕様変更によってそのXPathが間違いになる事があって原因究明が大変だった体験などもあるので、経験則的にXPathは気を遣う。
(それ以前の話としては、普通のWebサイトではtry~catch文の正しい使い方のようにユーザー入力を直接セレクタに使うのはnew XSS pattern with jQueryのように危険な場合があるので、try...catchしようがやめておいた方がいいと思うけど)

try...catchが使いにくいって思うのには、どれが例外を発生するかを知っておく必要があるところが大きい気もする。
後、普通にコードを書いて例外が発生しても、それはtry&error方式で直せるのであえてtry...catchするのは避けてしまう。
なので、ユーザーの入力値を元にするもの、外部サイトAPIなどの変更可能性が存在する場合、エラーが発生しても握りつぶしておきたい場所、など使われる場所はある程度決まってくるような気もする。
try...catchの経験不足なので、まだ使いどころをあげきれない。
完全に余談だけど、try...catchを書くときに、後からtry...catchを書き足して囲むみたいな事になる場合が多くて、そういう時にWebStormのSurround With...が便利。
Errorオブジェクト
また、try~catch文の正しい使い方の話に戻るけど、try...catchで黙ってエラーをつぶすとデバッグが大変なので、自発的にthrowをしてエラーを投げた方がいい。catch内でthrowする場合はErrorオブジェクトがあるので、それをthrowするだけでいいけど。
下のように、try...catch以外の場所でthrowする場合はerrorオブジェクトを作ってそれを投げた方がいい。
function dosomething(arg){
    if(!arg){
        throw new Error("引数がありません");
    }
}
というのも、throw "文字列"; などのようにErrorオブジェクトじゃないものもthrowできるけど、デバッガーなどに渡す情報に行番号などがないので、errorオブジェクトを作って投げた方がデバッグしやすい。
おまけ: try...catchのスコープについてなど

2011年6月20日月曜日

走査しながらremove,deleteする時にはまること

また、JavaScriptのremove系メソッドではまったので記録
CSSルールを削除するdeleteRule(idx);
var ss = (function(ss) {
    var dss = document.styleSheets;
    var getRule = function(stylesheet) {
        return stylesheet.cssRules ? stylesheet.cssRules : stylesheet.rules;
    }
    // 全てのcssRuleに対して、iteratorを処理する
    var forEachRule = function(iterator) {
        var some = Array.some;

        return some(dss, function (styleSheet) {
            return some(getRule(styleSheet), function (cssRule, idx, sheet) {
                iterator.call(styleSheet, cssRule, idx, sheet);
            });
        });
    }
    var deleteRule = function(matchSelector) {
        // 引数なし or * の場合、全てのruleを削除する
        if (!matchSelector || matchSelector === "*") {
            matchSelector = true;
        } else if (typeof matchSelector === "string") {
            matchSelector = new RegExp("^" + matchSelector + "$", "i");
        }
        // iteratorを作りcssRuleごとに処理させる
        var iterator = function(cssRule, idx, sheet) {
            var selectorText = cssRule.selectorText;
            if (!selectorText) {
                return;
            }
            var stylesheet = this;
            if (matchSelector.test(selectorText)) {
                //console.log(stylesheet, selectorText, cssRule, idx);
                stylesheet.deleteRule(idx);
            }
        }
        forEachRule(iterator);
    }
    return {
        deleteRule : deleteRule
    }
})(ss || {});
ss.deleteRule(/\.[fc]\d+/i); 
という感じで、渡した正規表現(文字列とかでもいけるようになってるけど工事中)にマッチするセレクタを持っているなら、そのCSSルールを削除する関数を書いていた訳だけど、どうも中途半端に消えたりしていて動作がおかしかった。
コンソールを見てると、1個飛びで消えていたりしたので、replaceChildの注意点 - prog*sigを思い出してた。上の書き方だとsomeで0から順番に走査していたので、deleteRuleする度にindexがずれるので、おかしな結果になっていた。
なので、forで後ろから回すようにした。
var ss = (function(ss) {
    var dss = document.styleSheets;
    var getRule = function(stylesheet) {
        return stylesheet.cssRules ? stylesheet.cssRules : stylesheet.rules;
    }
    // 全てのcssRuleに対して、iteratorを処理する
    var forEachRule = function(iterator) {
        var some = Array.some;

        return some(document.styleSheets, function (styleSheet) {
            var Rules = getRule(styleSheet);
            for (var i = Rules.length - 1; 0 <= i; i--) {
                var cssRule = Rules[i];
                iterator.call(styleSheet, cssRule, i, Rules);
            }
        });
    }
    var deleteRule = function(matchSelector) {
        var skipMatchTest = false;
        // 引数なし or * の場合、全てのruleを削除する
        if (!matchSelector || matchSelector === "*") {
            skipMatchTest = true;
        } else if (typeof matchSelector === "string") {
            matchSelector = new RegExp("^" + matchSelector + "$", "i");
        }
        // iteratorを作りcssRuleごとに処理させる
        var iterator = function(cssRule, idx, sheet) {
            var selectorText = cssRule.selectorText;
            if (!selectorText) { // @importなどは無視
                return;
            }
            var stylesheet = this;
            if (skipMatchTest || matchSelector.test(selectorText)) {
                //console.log(stylesheet, selectorText, cssRule, idx);
                stylesheet.deleteRule(idx);
            }
        }
        forEachRule(iterator);
    }
    return {
        deleteRule : deleteRule
    }
})(ss || {});
ss.deleteRule(/\.[fc]\d+/i);
remove*やdelete*のメソッドを使う機会があんまり無くて、使う度に同じ事にはまってて嫌な気分。
 

2011年6月18日土曜日

アドレスバーからjavascript:を実行できなくするブラウザ側の対策について

Facebookなどで、裏技する方法などと言ってjavascript:をアドレスバーにコピペして実行させて、情報を盗んだりするソーシャルエンジニアリングが流行っていて(ニコニコでも似たようなのありましたね)、それを防止するためにブラウザ側が取っている対策を書き出してみたもの。

IE9の場合

アドレスバーにテキストを貼り付けたときには、javascript: というプレフィックスは削除されます。これは、ソーシャルネットワーク上でよく見られる、ユーザ自身の手によるXSSというソーシャルエンジニアリングなXSS攻撃を軽減します。
IE9 RC マイナーな変更点リスト - 葉っぱ日記

javascript:alert(1);
上記をコピペしたときはalert(1);部分だけがアドレスバーに残るという対策。
手動で、javascript:alert(1);と書いて実行した場合はちゃんと実行できる。
実行コンテキスト(実行した際に影響を与える事ができる場所)も表示している現在のページ(未確認表示しているページがコンテキストになるようです)
 
Chromeの場合

Chromium 13: defenses for self-XSS via javascript URLs Working together with Facebook and other browser vendors, we’re trialing a self-XSS defense that makes it harder for users to shoot themselves in the foot when they are tricked into pasting javascript: URLs into the omnibox.
Chromium Blog: New Chromium security features, June 2011

Chrome13からIE9と同様にコピペした際にjavascript:部分は削除される。
手動でjavascript:alert(1);と書いて実行した場合はちゃんと実行できる。
実行コンテキストも表示している現在のページ。

Firefoxの場合

ロケーションバーへ入力された javascript: と data: URL が、現在表示されているページの権限を継承しなくなりました
アドオンを Firefox 5 と 6 へ対応させるための注意点 « Mozilla Developer Street (modest)

Firefox6からこの変更が適応されている。
IE9やChrome13とは異なるアプローチで、javascript:alert(1);とコピペする際には何も起こらない。
しかし、アドレスバーでjavascript:を実行する際のコンテキストが異なるようになったため、javascript:で実行するスクリプトは表示しているページに影響を与えることができない。(多分DOMが使えないので多くのスクリプトはエラーになる。)

image

実際にFirefox/6.0a2で適当なページを開いてやってみると、windowオブジェクトが存在しないというエラーになった。このようにそのページのDOMにアクセスできないようにする事で、ユーザ自身によるXSSを行えなくしている。

これはアドレスバーから実行するものを無害化するために導入されたので、通常のブックマークレットからの実行やaの埋め込みからの実行などは問題なく動作する。

<a href="javascript:...>HOGE</a>
またjavascript:ハックとか呼んでるコード内でlocation.hrefに入れてJavaScriptを実行させる方法も問題なく動作した。
function evalInPage(fun) {
location.href = "javascript:void (" + fun + ")()";
}
evalInPage(function(){
alert(1)
});

つまり、ロケーションバー以外には特に影響がないという感じらしい。
同じようにdata:スキームURLにも適応される。

ロケーションバーからjavascript:を実行する愛好家達には不便になるかもしれない。(@hasegawayosukeさんとか)

愛好家達の対応策としては

  • それ専用のブックマークレットを作る
  • 多くの場合evalInSandboxからの実行でも動作は異ならないのでxqjsなどのアドオンを使う。
  • Firebugはevalで実行してるのでそれを意識して書く

Firefox6ではScratchpadっていうものが標準でついている。(これはどういう風に実行されてるかは知らない、多分evalInSandboxだと思うけど)

image

など。

おまけ

FirefoxではNoScriptを使う事で、Firefox6未満でも同様の効果を得られます。(この動作だけを得たいという人はほとんどいないと思いますが…)

2011年6月11日土曜日

WebStormで複数ファイルのReformat Code

自分の中でかなり大事なReformat Code(整形表示)機能ですが、表示中のコードにAlt+Shift+Fとかでできますが、複数のファイルに対しても同時に行ったりできます。
Projectで複数のファイルをShift+クリックなどで選択して、Reformat Code(Alt+Shift+F)を実行すれば選択ファイルに対して一括で行えます。
保存もそのままCtrl+Sで一括で行える。

image

ちなみにダイアログのチェックは以下の意味

Optimize imports
Select this check box to remove unused import statements from the code within the selected scope.

2011年6月10日金曜日

WebStormで空要素に< />とスペースを入れる

WebStormでHTML書くと、下のように空要素の閉じタグで/>の前にスペースを入れてくれない場合があります。

<link rel="stylesheet" type="text/css" href="../css/main.css"/>

これをスペースを入れるようにする設定は

image

File | Settings | Code Style - HTML > ✓In empty tag
とIn empty tag にチェックを入れれば、以下のようにスペースを入れてくれるようになります。

<link rel="stylesheet" type="text/css" href="../css/main.css" />

XMLの場合も同じような設定があります。

2011年6月9日木曜日

Bloggerのfaviconが公式に変更可能になった

唯一不満だったbloggerのfaviconが変更できない(しにくい)のが、draftで変更機能が入った

http://draft.blogger.com/のデザインから変更できる。
http://draft.blogger.com/自体のデザインもかなり変わった。

image

ico形式10kbのファイルならアップロードできる。

2011年6月7日火曜日

JavaScriptでIE向けスペルチェッカー

というタイトルで推測できると思うが、ActiveXObject('Word.Application')を使うのでJScriptでIE向けスペルチェッカーを動かすという意味。

JavaScriptでスペルチェッカー for IE - jsdo.it - Share JavaScript, HTML5 and CSSからzipで落としてIEでローカルファイルとして読み込めば多分できる(Wordが必要です)
(サーバ上だと何かうまく動かなかった。警告でまくるけどセキュリティ的に問題ありそうだし。。)

以下スペルチェック部分のソース。

function spellcheck(text) {
var result = [];
var app = new ActiveXObject('Word.Application');
var doc = app.Documents.Add();
doc.Content = text;
for (var i = 1; i <= doc.SpellingErrors.Count; i++) {
var spellingError = doc.SpellingErrors.Item(i);
for (var j = 1; j <= spellingError.Words.Count; j++) {
var word = spellingError.Words.Item(j);
var error = {};
error.word = word.Text;
error.start = word.Start;
error.length = word.Text.length;
error.suggestions = [];
var suggestions = word.GetSpellingSuggestions(word.Text);
for (var k = 1; k <= suggestions.Count; k++) {
error.suggestions.push(suggestions.Item(k).Name);
}
result.push(error);
}
}
return result;
}

詰まるところ、WordをActiveXから呼び出しているだけなので、Wordが必要だし何かローカルでないとうまく動かなかったし、ものすごく重いので、実用性なんか存在しない。

imageimage

これは以下のところで存在を知った。

元々のコードだと何か動かなかったので下を参考に少し直した。

リンクを見てわかるように、Webkit(Chromium)にスペルチェック APIができるような雰囲気だった。

2011年6月3日金曜日

SlideShare探索範囲を拡大

少し、探索範囲を広げてみる。
飽きたらRSS解除するだけなので手軽ですね。

そういえば、ブラウザの最新情報を知るために、Web開発者が読んでおくべきブログ | Web scratchも更新しないとなー

2011年6月1日水曜日

Firefox5でもJavascript Deminifier使えた

FirefoxのJavaScriptデバッガ拡張Firebugの進化がすごい | Web scratchとかでも紹介してたけどJavascript Deminifier :: Add-ons for Firefox はJavaScriptを整形してFirebugからとかでいじれるアドオンです。

AMOに置いてあるのは3.6.*とか対応バージョンが古いままだけど、Firefox5ベータに入れても普通に動作しました。(nightly tester toolsとかで対応バージョンを無視する必要あるけど)

image

作者のレポジトリにはbenmmurphy/jsdeminifier_xpi - GitHub 一応4.0に対応したもの置いてあるようですね。

単にソースを整形して見たいだけなら、Addon SDKで作られてるJS Deminifier :: Add-ons for Firefoxも結構いい感じ。