はてなブックマーク

特に技術的に新しいものではないので公開せずに放置していたが、XSS Auditorをバイパスする方法はいろいろあるので気をつけましょうという話。 XSS Auditorをバイパスする方法は、Chrome XSS Auditor - SVG Bypass - Hack 2 Learnを参考にした(最新版ではすでにこの手法は塞がれた)。 実演と解説 見た方がわかりやすいと思うので、動画にしたので見てほしい。 これはある大学のログイン画面に存在するXSSで、 login.php?fromURL=xxx">Please complete the captcha before proceeding.<br><svg width=242px height=65px><a><image href=https://i.imgur.com/6W1W2jE.png/><animate attributeNam

あけましておめでとうございます 久しぶりのブログで新年一発目からこんなタイトルの記事を書くのもどうかと思うけど、今年からまたブログ更新していこうと思う。 経緯 去年、23歳で、あと4単位を残して大学を中退した。自分はオーストラリアの大学で短大卒に当たるAssociate Degree of Information Technologyを取得した後に3年次でBachelor of Computer Science in Science、つまり情報科学の学部に編入したのだけど、IT学部時代からずっとモチベーション維持に苦労していて、ストレスで体調を崩したりしていた。中退しないほうがいい、絶対に卒業したほうがいいと言われ続けたが、勇気を出して辞めた。 自分は中学からプログラミングをやっていてある程度プログラミングを知ってたのだけど、やりたいことも定まっていた一方(Webやセキュリティなど)、大学

忙しくてブログを全然更新していなかったが、最近、友達に英文法を教えているので、 役に立つかもしれないのでログを載せておく。 パート2: 英文法の話パート2、to doとsomething to doの見分け方と使い方についてなど - 素人がプログラミングを勉強していたブログ パート3: 英文法の話パート3、which,thatの使い方についてなど - 素人がプログラミングを勉強していたブログ 質問者 Leaves turned red in fall.とLeaves got red in fall.って同じ？ javascripter 同じ。Turnedのほうがただ、 変わったという動作が少し強調されてる感じするがほぼ変わらないと思う 質問者 なるほどね javascripter I got 20 years old I turned 20 years old javascripter こ

ちょっと説明がし難いがindex.htmlというファイルがあったとして、ファイルプロトコル経由で file://path/index.html などのように直接ブラウザで起動すると、プロトコルの関係でファイルが読み込めなかったり、エラーになったりすることがよくある。サーバーをたててlocalhostなどから読み込めばいいのだが、微妙にセットアップが面倒臭い。下記コードをindex.htmlとして保存すると node index.html とするだけでブラウザが立ち上がり、index.html自身をルートとしてそのディレクトリ以下のファイルを配信する簡易サーバーが立ち上がる。具体的には、 http://localhost:port/index.html のような形でアクセスできるようになる。コマンドを実行したディレクトリの絶対パスをもとにポートを自動生成しているので、すでにサーバーが起動済み

下記にセキュリティに関する追記あり。読了後、そちらもチェックしてください ユーザーと管理者アカウントがあるウェブサイトで、管理者がユーザーのパスワードをリセットできたりといった風に、アカウントによって権限が違う場合のセキュリティについての考察である。 /loginにアクセスし, emailとパスワードでuser/adminにアクセスできるとする。 （ログインページは1つであり、user/admin間のemailは重複してはいけない） 論理的構造を考えると account->user, account->admin といった階層構造になっているので、自然に設計すると accountテーブルにuser/admin情報をもたせて、 pragma foreign_keys=1; CREATE TABLE account( id INTEGER PRIMARY KEY, email TEXT UNI

プログラマであればアルゴリズムに関する話で、O(n)だとかO(log n)だとか、O(n2)だとか、そういった記号を目にすることはよくあると思う。 なんとなく、log n < n < n2の順に計算量が増加していくとかそういうことも知っていると思うが、計算量の増加とは何か説明しろと言われると、なかなか難しいと思う。この記事では高校数学レベルでわかるように考えていきたい。 まず、計算にかかる時間を、nを入力のサイズとしてf(n)を計算にかかる最大時間を返す関数とすると、計算量一般を、O(f(n))という、入力に対する計算時間の増加率として定義することができる（より厳密には、f:R+ -> R+ where R+=[0,∞)で、a>bであればf(a) >= f(b)であるとき）。 g(n) = n ^ 2 はn = 1に対して1を返す一方、より増加率の低い h(n) = n + 100 は、n

JavaScript の Promise を返す関数を直列で実行したいので Pinscher というライブラリを作ってみた。 - (define -ayalog '())について。 例えば、非同期に実行されるPromise p1, p2, p3があったとしてcallbackをp1, p2, p3の順番に実行したい場合、reduceが使える。 例1は、p1, p2, p3を並列に実行した上で、callbackの順序を保証したい場合。 まずテスト用に、一定時間まってからvalueでresolveする関数resolveLaterを定義しておく。 function resolveLater(value, ms) { return new Promise(function (resolve) { setTimeout(function () { resolve(value); }, ms); });

ちょっとハマったのでメモ。 例えば alert(A); function A() { } はできるが、 alert(A); class A { } ができないのはなぜか。 class A { } class B extends A { } 例えば、このようなコードの場合、hoisting（スコープ先端への巻き上げ）をしても問題ないが、 関数と違ってextendsはその場で評価しなければいけないことがある。 例えば、 var A = function () { }; A.prototype.x = function () { return 1; }; class B extends A { } alert(new B().x()); というコードの場合、BクラスはAを継承しなければいけないので、var Aで宣言されているものはhoistingされないのでclass宣言もその場で評価しないと、

最近いろいろな環境でES6まわりの環境が整いはじめたので、使っていくために下調べしておこうと思う。 ES6の実装状況であるが、ECMAScript 6 compatibility tableにまとめが載っている。 例えば、io.js (nodeのfork)のES6実装状況。stableなES6 featuresが元から有効になってる。 現在有効なのは、文字列テンプレート、for of、generators, Promise, Map, WeakMap, Setなど。 最新版をターゲットにするのであれば、上の機能は何も考えずにそのまま使うことができる。 このうち、テンプレート、for of, WeakMap以外はpolyfillが手に入るので、それらを使わなければPromise, Mapなどはfeature detectして実装されていない場合はmoduleを読み込むことで幅広いバージョンを

※ただのメモで、未来志向なのであまり真に受けてはいけない。 良いっぽい React.js 早速い/コンポネント志向/APIの設計がいい。JSXと他のトランスパイラの組み合わせという問題はある Promise ネイティブに入った、誰もが使ってる TypeScript ES6時代でも存在意義のある言語。TypeScript互換のFacebook Flowの動向に注目 Backbone.js ModelとEventを使う/Viewは使わなくていい Lodash Underscore.jsをよくしたやつ Gulp Gruntより良いという意味で。browserifyまわりがうまく動かない問題があってnpm runのほうがいいという噂もあるがまあ良いに分類してもいい EventEmitter Custom EventはDOMにくっ付いてる感があるのでロジック志向の物にはEventEmitter使った

onscrollを監視していると大量にeventが来てパフォーマンスが劣化するというのはよく聞く話で、 underscore.jsなどでイベントをthrottleやdebounceさせて対処していることが多い。 ただ、scrollに応じてスタイルを変更させたりする場合は、0.1秒くらい遅れがあると視覚的にカクカクしがちで、仕方なくsetTimeout(fn, 0)でthrottleさせることも多いと思う。 scrollイベントは画面のフラッシュレートと同期していないので、マウスやトラックパッドの動きに応じて大量に呼ばれていて、setTimeoutも画面のフレッシュレートとは関係なく内部の実行タイマーに応じて動いている。よって、setTimeout(fn, 0)でthrottleしてもまだ無駄が多い。実験してみたところ、requestAnimationFrameを使うと少しだけマシになること

indexOf(val) >= 0の話 配列に要素が含まれているかのチェックに [1, 2, 3].indexOf(2) >= 0; // true のようなコードを使っている場面を極めて頻繁に（それ以外を使っているのを見ることは稀なくらい）見るが、 function contains(a, v) { return a.indexOf(v) >= 0; } は厳密にはJavaScriptでは正しく動くとは限らない。上記コードのどこが間違っているのか、下記の解説を見る前に考えてみてほしい。こんなシンプルなコードにも、バグがある。 解説 containsがどのように動くべきなど明白だというのは間違いである。実は微妙な問題がたくさんある。 まず、致命的な部分をあげると、最初のナイーブな実装だと contains([NaN], NaN) // false となってしまう。明らかに意図した動作と異な

それほど新しい話題でもないが、FacebookがReact | A JavaScript library for building user interfacesというDOMを抽象化したようなView操作のライブラリをリリースした。 Githubが出してるエディタのAtomが実験的にReactを採用したり、Instagramが採用していたり、エディタでReactのシンタックスがサポートされ始めたり、海外では実際に使われはじめていて、実際に使ってみたら思いのほか使いやすかったので、簡単に使い方を書いていこうと思う。 まず、ReactにはJSXという、htmlをJS内で書ける言語がある。オプショナルなものだが、使ったほうがコードが綺麗になるので、この記事では使っていく。下記コードはEdit fiddle - JSFiddleなどでコンパイルなしにそのままテストできるので、適当にコピーしながら確

setTimeout() vs ハッカー、仁義なき戦いによると function isNativeFunction(func, name) { for (var o in func) { if (o === "toString") return false; } var match = func.toString().match(/^function (\S+)\(\)\s*{\s*\[native code\]\s*}$/); return (match && match[1] === name); } setInterval = function(){}; isNativeFunction(setInterval, 'setInterval'); // false でsetIntervalが偽装されているか調べられると書いてあるが、そんなことはない。 自分が普段使っているブラウザはSa

11 August 2014: はてなのサポートから連絡がきた。 いつもはてなをご利用いただきありがとうございます。 ご指摘いただきました件につきまして、ただいま対応を検討しております。 第三者に悪用される可能性もございますので、 もし、脆弱性を確認された場合には、先に弊社にご連絡いただき、 脆弱性が修正されるまで、ブログなどで詳細を公開されないようご協力いただけますと幸いです。 もしなにかご不明な点などございましたらご連絡ください。 どうぞよろしくお願いいたします。 しかしサポートにはこの記事のURLしか送っていないし、既に（一部ユーザによるDDoSも含めて）89656のスターがつくほど閲覧されているので、この記事を消してもしょうがない。よって、このまま放置する。読者は修正されるまで、決して悪用しないでほしい。 テスト RSSで見てる人は直接開いてください はてブで指摘があったが、このペ

Project Parfaitとは、adobeが開発してるβ版の、ウェブサイト作成支援のサービス。これを使うと、.psdのデザインファイルからHTMLを書き起こすのが異常に高速になるので、オススメしておこうと思う。 具体的には、psdファイルをアップロードすると、psdファイルの要素がレイヤー別に選択できるようになる。わかりやすいように画像で実例を出すと（一部塗りつぶしてあるが） このようになる。 あとは、Copy Textをクリックするとクリップボードに文字が選択されるので、HTMLファイルを書きながら <li><a href="#">{テキストをペーストする}</a></li> のように書いて、その後、Copy CSSをクリックし li { /*CSSをペーストする*/ } のように、貼り付けて上記の画像の場合はfont-weightがおかしいのでboldに手動で直して、widthやh

昨日、.tokyoドメインの一般登録が始まったので、ムームードメインでprogrammers.tokyoを取得した。 用途を考えずに取ったので、何か使い道を思いつくまでは仮のindex.htmlでも置いておこうと思い、でもそのためにわざわざ月額払うのももったいないので、Github Pagesを使うことにした。 Github Pagesは、username.github.ioというレポジトリを作るとhttp://username.github.ioにウェブページが公開される機能と、projectというプロジェクトにgh-pagesのブランチを作ってそこに置くとusername.github.io/projectというディレクトリで公開される2つの機能がある。 自分のユーザ名のGithub Pagesは自分のページ用にとっておきたいし、projectページはうまく独自ドメインに割り当てられな

たまたま通販サイトを見ていたらログインページに脆弱性を発見したので、書いておく。 下記サイトのサポート部門から、システム部門に問い合わせて早急に調査するとの連絡があった。 16 June 2014: 脆弱性を確認したので今日か明日中に修正し修正が終わったら連絡するとのメールが来た。 18 June 2014: システム改修が終了したとのメールがあった。 報告済みであるがまだ修正されていないので、ドメインは仮にwww.******.jpとしておく。 https://www.7netshopping.jp/esi.svl?start&CID=ESI997&r_url=http://www.7netshopping.jp.example.com のように、ドメインのバリデーションを先頭一致で行っていたため、末尾に.example.comなどとつけると、ログイン成功時にユーザを任意のドメインのサイ

最近調べたnode.jsのstreamに関連した雑多な内容を、思いつくままに適当に書く。 例えば、 function* createPiGenerator() { var result = 0; for (var i = 1;; i += 4) { yield result * 4; result += 1/i - 1/(i + 2); } } こんな感じのジェネレータがあったとして、それをファイルに出力したい場合 function createPiStream() { var r = new require('stream').Readable(); r.setEncoding('UTF-8'); // バッファじゃなくてstringとして処理したい var g = createPiGenerator(); // piの計算をするジェネレータ var tid; r._read = fun

普段、Web Inspectorはデバッガとして使っていると思うが、Web Inspectorは実は様々な物を表示できる。 例えば、コンソールでライフゲームを表示することができる。 Web Inspector Life Gameに、コードを置いた。タイミングによっては上手く動かないので、コンソール上でCmd+Rなどを押してリロードすると上手くいく。 以下に、実装に使ったハックや技術を紹介する console.logで色付き文字を表示する まず、console.warnやconsole.infoなどを使うと、黒字以外の文字を表示できることを思い出してほしい。console画面は、HTMLで実装されているのである。 console.log("%s", "aa"); のように、printf形式で文字を表示できる機能があることを知っているだろうか。 この中に、色指定をするためのものがある。%cであ

海外に住んでいると、日本語の本を入手することの難しさもあって日本語の本を全く読まなくなってしまう。海外の書籍はお店やネット通販で気軽に買えるし、英語圏の電子書籍は日本の電子書籍と比べて品揃えが格段に良いからだ。 英語の本ばかり読むことになるが少し物足りない。日本人である自分は日本の書籍を読むほうが楽で、特に難しい本や自分が勉強したことのない分野だと、日本語で書いてあるものを一度ざっと読んでから英語の本を読んだ方が、トータルで見たら時間の節約になることが多い。 最近、2013-08-27 - 登 大遊＠筑波大学大学院コンピュータサイエンス専攻の SoftEther VPN 日記というページを見つけて、まさにこれは自分が求めていたものだと思ったので、いくつか本を買ってみたら非常にすばらしかったので、ほとんどさきほどのページと書いてあることと同じだが、手順をここに記しておく。 まず、書籍のスキャ

Capy CAPTCHA 早速、実証コードが(CAPY IS A VERY READABLE CAPTCHA)出たようだ。このように一瞬で突破されてしまい意味がない。 さきほどインターネットを見ていたらスパム防止用の「読みづらい画像認証」に、日本人が終止符を打った技術が斬新過ぎる！経由で、Capy - 低コストで導入も簡単な不正ログイン対策という、パズルを使った新しい新しくないCAPTCHAを知った。 コンテストに優勝するなど肯定的な反応が多いので、この記事では、このCAPTCHAのセキュリティ上の問題点について簡単に書いておこうと思う。 まず、Capy - デモにデモが乗っているので、タイプ別に問題点を示す。 パズルタイプの破り方 ジグソーパズルの空白を埋めるタイプのCAPTCHAである。話にならない。 まず、縦横が5pxごとに吸い付くようになっているので、縦横400px*300pxだと

更新し忘れたが、既に下記の脆弱性は修正されている 4/11/2013 6:42 PM 追記:　明日エンジニアと調査するとカスタマーサポートから連絡があり、また近日アップデートパッチを用意するとのことだ。 先日紹介した、Satechi Smart Travel Routerだが、ふと直感的にセキュリティに問題があるような予感がしたので、自分のルーターをアタックしてみた。 結果から言うとCSRFが存在し、外部からインターネット越しに細工をしてあるURLを踏ませることで、ルーターのパスワード、SSIDを書き換えたり、WiFi to WiFiのリピータ機能のソースとなるWiFiを勝手に別の場所に書き換えて、Man in the middle攻撃を成立させたりできることが発覚した。 自分がどのようにSatechi Smart Travel Routerの脆弱性を発見したのかを動画にとったので、無編集

Promiseってなんとなくモナドっぽいなと思って、ジェネレータ使ってHaskellのdoを再現できないかなあというのがはじまり。結論からいうと、できない。 そもそもPromiseがモナドであるかを考える。 return :: Monad m => a -> m a 値を受け取ってfulfilledされたPromiseを返すものだ Promise.fulfill / Promise.resolveがこれにあたる。 Promise.mreturn = Promise.fulfill || Promise.resolve; >>= :: Monad m => m a -> (a -> m b) -> m b bindとも呼ばれたりする。この関数に、値を受け取ってモナドを返す関数を渡すと、その値が結果になる。 Promise.prototype.mbind = Promise.prototype

Pocket Wifiの話ではなく、電源を使うタイプの、Airport Expressのようなタイプの小型ルーターの話である。 先日、Satechi Smart Travel Routerという、持ち運びできる小型ルータを購入したら予想よりも大幅に便利だったので、紹介しようと思う。 まず、これが何なのかというと、 世界中の電源プラグの形に対応した、旅行用の電源プラグ変換器 USBポートからの充電 無線ルータ機能 がついた、片手におさまるサイズの軽いガジェットである。 各機能を詳しく説明する 電源プラグ変換の機能 自分はオーストラリア、日本間の行き来を毎年のようにしているのだが、電源の形が日本とオーストラリアでは違う。パソコンのAC充電器やひげ剃り、ヘアアイロンなど、日本で買ったものやオーストラリアで買ったものが混在しているので、旅行するたびに、数百円程度の変換器をいくつか持っていっていた。