review rejected #3

Firefox 版 wasavi のレビューがなされた。もちろん rejected。

まず innerHTML 使うなボケ! ということである。wasavi.js では大まかに分けて 3 箇所、innerHTML を使っている箇所がある。ひとつめは、wasavi 本体の iframe 内で、

document.body.innerHTML = wasaviFrame;

として wasavi の骨組みを組み立てている。ここで wasaviFrame には、body 以下の骨組み全体となる html の文字列が入っていて、バックグラウンドから送られてくる。バックグラウンド側ではこの文字列は、エクステンションのアーカイブ内から読み出す。

この innerHTML の操作を DOM のメソッドを使用して要素ずつ組み立てる処理に置き換えるのは、ちょっとコストが高すぎる。また、前述の通り内容が外部から操作されるというものでもない。したがってこの箇所については、innerHTML の使用は問題ないはずだ。そういうことを説明することにしよう。

ふたつめは、wasavi が拡張する対象となる textarea 要素の value を wasavi へ複製する際。

var html =
'

' + textarea_value
.replace(/&/g, '&')
.replace(//g, '>')
.replace(/\r\n/g, '\n')
.replace(/\u007f/g, '\u2421')
.replace(/[\u0000-\u0008\u000b-\u001f]/g, function (a) {
return String.fromCharCode(0x2400 + a.charCodeAt(0));
})
.replace(/\n/g, '\n
') +
'\n

';
this.elm.innerHTML = html;

こんな感じ。こちらは、textarea_value に入ってるものがページとユーザ次第のものなので、確かに innerHTML 経由だとセキュリティリスクが生まれる余地がある(上記の事前のエスケープを回避する方法はちょっとすぐには思いつかないが……)。というわけで、こちらは \n で分割した textarea_value を逐一生成した div の textContent に突っ込むようなループに変更した。これはテキストが 1 万行とかになるとパフォーマンスの問題が出てくるかもしれない。

最後に、さまざまな要素の内容を生成する際に

elm.innerHTML = '';

とやっている箇所がいくつかある。これにはセキュリティリスクが入り込む余地はないと思うが、DOM Range を用いて内容を消去するように変更した。

function emptyNodeContents (node) {
var r = document.createRange();
r.selectNodeContents(node);
r.deleteContents();
r.detach();
}

innerHTML 関連は以上。

次に、javascript 内で他の javascript ソースを読み込むのに

document.write('