Object.prototype.__defineSetter__を使ったAndroidでのJSON Hijackingに関して
Object.prototype.__defineSetter__を使ったAndroidでのJSON Hijackingに関して こないだShibuya.XSSで徳丸さんが紹介されてたObject.prototype.__defineSetter__を使ったJSON Hijackingに関して「Fx3系とAndroid 2系で動作する」とのことだったので検証してみた。 前書き __defineSetter__とはブラウザベンダーが独自実装したProperty AccessorでECMAScriptには定義されていない（ECMAScriptでは別の方法が定義された） 具体的な使い方は以下のとおり。 hoge = {}; hoge.__defineSetter__(‘huga’, function(val) { this.huga_ = val; }); hoge.huga = 'foo’;
Webの高速化によって失われるもの
このエントリはFrontrend Advent Calendar 2013 - Adventar 25日目の記事です。最近asm.jsやPNaClやSPDYやHTTP2.0が話題になっていますが、その影で個人的に気になっていることがあります。 それはHackabilityHackabilityとはこの記事に詳しく書かれていますが、簡単に言うと「外部からの手の加えやすさ」（私の理解では） 最初に挙げた技術（asm.jsやPNaClやSPDYやHTTP2.0）は「Webの高速化」という点で大きな効果が期待されています。 しかし、同時に「これまでの技術に比べてHackabilityが低い」という点も持ち合わせています。 （asm.jsは素のJSとはいえ「元コードへアクセス出来ない」という点で既存の技術に比べると低いと考えています） これらの技術が使われている場合、以下の様なことはこれまでより困難
よいプラクティスの具体例 (ペアプロでわかるJavaScriptテスト入門 @ CROSS2014)
Intro2014/1/17(Fri) に開催される CROSS2014 にて、実況解説つき！ペアプロでわかるJavaScriptテスト入門というセッションを担当させていただくことになりました。 （ちなみに、去年のは CROSS2013 には 大規模JS開発徹底比較 という内容で参加させていただきました） 今日はこのセッションの意図と概要について書こうと思います。 テーマ「よいプラクティスの具体例」を増やしたい このセッションでは ペアプロとかTDDって良いとは聞くけどどう始めていいかわからない自分がやってるペアプロとかTDDが人と比べてどうなのか気になる方に向けて、 具体的にどう始めればいいか具体例の中で他にはどういった選択肢があるのかといった内容を見ていただくことを目的としています。 セッション内容ざっくり言うと「ペアプロで既存のコードにテストを足しつつ、その様子を解説してもらう」とい
Chrome AppsでWebAppの開発に必要なN個のこと
※元ネタは「PerlでWebAppの開発に必要なN個のこと」 あるプログラミング言語で実際にWebAppを開発できるようになるまで、何が必要だろうか。言語仕様の習得は終えているとしよう。おそらく、最低限以下のような知識が必要だと思われる。とりあえずChrome Appsについて知っていることを書いた。 これはChrome Apps上でWebAppを開発するための資料なので、通常のChrome Appsを開発するために参照することはおすすめできない。 パッケージマネージャChrome Appsは基本的にChrome上で動くため、bowerを使用するのがいいだろう。 ただ、ChromeはNode.jsと同じV8環境なため、Node.jsのAPIに依存しないコードならnpm経由でインストールしたライブラリも使えるかもしれない。 Node.js形式のコードをブラウザ上で実行できるように変換するno
ネットワーク通信を行う場合に検討すべきこと
特にモバイルアプリで頻繁にネットワークが切れる可能性がある場合こういった対策を考えた方がいい。 接続のタイムアウト通信を行う場合には基本的にタイムアウトの設定をする。 「どのくらいの秒数でタイムアウトするか」は難しいが、「課金や決済等の2重投稿が問題になる通信」は長く、「ページの表示等の2重投稿が問題にならない通信」は短くするのがいい。 ただし、2重投稿が問題になる通信でも、「タイムアウト後は再送信前にサーバに最初の通信が成功したかどうか確認する」のであればタイムアウトは短くても機能的な問題は少ない。 （または、サーバ側が2重送信前提で処理を行う） 自動再接続特にストリーミング等で「常時コネクションを張り続ける」系の実装を行う場合、一度通信が切断しても自動的に再接続する実装が行われることが多い。 ただ、このときにコネクションの管理が正しく行われず複数のコネクションが同時張られる状態になると
setIntervalで監視しつつコードを実行するときの注意点
以下のコードがベース var interval = setInterval(function () { // 前提条件 if (!$('body').length) { return; } // 実行コード alert('ready!'); // 監視停止 clearInterval(interval); }, 100); このコードの問題点 「コード実行時に前提条件が満たされてても必ず100ms待ってしまう」 改善 var interval = setInterval((function () { // 前提条件 if (!$('body').length) { return arguments.callee; } // 実行コード alert('ready!'); // 監視停止 if (interval) { clearInterval(interval); } })(), 100)
「ContextMenuから読み込んでいるJS、CSSを表示できるChrome Extension」を作成しました
作成しましたー contextmenu-source 同じドメイン上で読み込んでいるものは上に、外部ドメインで読み込んでいるものは下階層からアクセスできます。 クリックするとwindow.openでソースを参照します。 各ドメインはアルファベット順、同じドメイン上のファイルは読み込んだ順でソートされます。
RDocの脆弱性情報に見るjQueryの安全な使い方
2013-02-06に以下の脆弱性情報が公開されました。 RDoc で生成した HTML ドキュメントにおける XSS 脆弱性 (CVE-2013-0256) これはRDocの脆弱性情報ですが、実際にはdarkfish.jsというファイルの修正のみでありJSの問題であることがわかります。 問題のdarkfish.jsを確認すると該当の処理は「var anchor = window.location.hash.substring(1);から取得した値を$(“a[name=” + anchor + “]”);に渡した」処理であったことがわかります。 （このファイルが脆弱性情報のファイルと同じかは確認してないですが、ファイル名とコードから同一と判断しました） 修正方法としては$(“a[name=” + anchor + “]”)でのセレクター埋め込みをやめて$(“a[name]”).eachのe
CSSファイルをJSから非同期読込する方法
CSSファイルをクライアントサイドだけで動的なURLつけて非同期読み込みしたい場合、単純に以下のようなコードを書くと同期読み込みになって読み込み完了まで他のファイルの読み込みがブロックされる。 (function () { var href = 'style sheet url'; var link = document.createElement('link'); link.rel = 'stylesheet'; link.href = href; var head = document.getElementsByTagName('head')[0]; head.appendChild(link); })(); これに関しては以下のように別のiframeを作成して読みこめば非同期で読み込めるので、他のファイルの読み込みをブロックしない。 （iOS, Androidで動作を確認） (fun
JavaScript UnitTest Patterns
ここでは以下の順番でSinonJSとJsTestDriverを使用したJavaScriptのUnitTest Patternsを紹介します。 初期化の遅延非同期実行の同期化html, cssのテストイベントのテストその他問題になりうるコード初期化の遅延UnitTestを行う場合、まずは初期化functionが自動的に実行されないようにしましょう。 初期化functionをこちらの任意のタイミングで実行できるようにすることにより事前に対象外のコードをstub化したり、必要なfunctionへspyを仕込んだ状態でfunctionを実行できるようになります。 UnitTestの場合のみ初期化を遅延する一番簡単な方法はUnitTest実行時のみ条件分岐で初期化を止める方法です。 $(function () { if (window.sinon) { init(); } }); この方法は簡単かつ
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテスト
JsTestDriverとphantomjsとJenkinsを使ってのJSの継続的なテストを行う方法を解説します。 Javaのインストール JsTestDriver、Jenkins共に実行にJavaが必要になるため、Javaのインストールを行いましょう。 すでにインストール済みの場合は必要ありません。 JsTestDriverのインストール JsTestDriverのjarを落としましょうダウンロードしたJsTestDriverを–portオプションで起動しましょう（ $ java -jar JsTestDriver[バージョン番号].jar –port 9876 ）設定ファイルのサンプルをダウンロードしてJsTestDriver.jarと同じディレクトリにJsTestDriver.confの名前で保存しましょうこれでJsTestDriver serverが起動します。 今回はテスト対象と
JsTestDriverの設定ファイル書式
この内容はJsTestDriver WikiのConfigurationFileを意訳したものです。 http://code.google.com/p/js-test-driver/wiki/ConfigurationFile JsTestDriverの設定ファイルはYAMLで書きます。 設定ファイルはテストで使用するファイルをJsTestDriverが読み込むために使用され、標準はJsTestDriverコマンドを実行したカレントディレクトリの「jsTestDriver.conf」を参照します。 この参照先はコマンドラインオプションの「–config」から変更することができます。 各ファイルのベースパスはjsTestDriver.confと同じディレクトリとなりますが、コマンドラインオプションの「–basePath」から変更することができます。また、設定ファイル内のbasepathでも変
JsTestDriverのコマンドラインオプション
この内容はJsTestDriver WikiのCommandLineFlagsを意訳したものです。 http://code.google.com/p/js-test-driver/wiki/CommandLineFlags $ java -jar JsTestDriver.jar –help –browser VAR : The path to the browser executable –browserTimeout VAR : The ms before a browser is declared dead. –captureAddress VAL : The address to capture the browser. –captureConsole : Capture the console (if possible
最近のJS系のツールを触ってみたまとめ
社内用にまとめたものだけど、そもそもTwitter上で流したもののまとめなのでこちらにも投げてみる。 //——————– CoffeeScript 元からCoffeeScriptに慣れてるか、素のJSが書きにくいと感じる人にはおすすめ 素のJSが書きやすい人はロジック書きにくくなる部分あるので若干つらい 記述するコード量は減るけど、素のJSでもエディタとかのサポートがあれば記述時間はそれほど変わらないかも （特に変換後のJS想像しながら書く場合） ただ、素のJS好きな人でも対応は難しくないので、JS書きたくない人が開発するのであれば使うのはありかも （OSとかの環境によって開発に支障が出ることはなさそう） おすすめの使い方 サーバサイドの人がメインで書く場合 単体テスト用コード（ロジックは素のJS、テストはCoffeeScriptで書こうかな） WebStorm IDEとしての完成度は高い
JSコードTips
// 任意の連続した文字列生成 (new Array(10)).join(‘a’); // 任意の内容で初期化された配列生成（要Underscore.js） _(_.range(100)).map(function(n) { return ‘hoge’ }); // 高速なepoch秒生成 +(Date.now ? Date.now() : new Date()) // event throttle（scrollイベントの発生を100msに1回以下に抑える） var timer; $(window).on(‘scroll’, function (e) { if (timer) { return; }; /* hoge */ timer = setTimeout(function () { timer = undefined; }, 100); }); // 最初に一回実行するsetInte
もしもjQueryでクラスっぽく書くなら
（※この記事はJavaScript Advent Calendar 2011 (フレームワークコース) : ATNDの15日目の記事です） jQueryとクラスベースはうまく混ぜるのがむつかしいけど、こんな感じにすれば割とクラスっぽく書けると思う。 (function () { var $ = jQuery.sub(); jQuery.klass = jQuery.klass || {}; jQuery.klass.myKlass = $; var klassVar = ‘hoge’; $.fn.myMethod = function () { alert(klassVar); }; })(); (function () { var $ = jQuery.klass.myKlass.sub(); $(window).myMethod(); // alert('hoge’); })(); こ
JSでラベルがサポートされ続けなければならない理由
あまり知られてないし、実際殆ど使われてないけど、JSにはこんな感じで使うラベル構文がある。 hoge: for (;;) { while (1) { break hoge; }; }; 使われてない理由は色いろあると思うけど、functionの中から外に飛べないのでイテレータとの相性がわるいというのもあって、これがなんとかなれば多少は使われるのかなーという感じ。 ただ、それでもこの言語仕様はJSの実装上非常に重要な構文で、これがないとsyntax errorになるコードは結構多いはず。 具体的には以下のようなコードがsyntax errorにならないのはhttp:がラベルと解釈されてその後の//がコメントの開始と解釈されてるから。 http://example.com/ if (true) { alert(1); }; また、hoge.jsにこんなコードが書かれてるのも見たことがある。 j
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
