単純ではない、最新「クロスサイトスクリプティング」事情:HTML5時代の「新しいセキュリティ・エチケット」(2)(1/3 ページ) 連載目次 皆さんこんにちは。ネットエージェントのはせがわようすけです。第1回目は、Webアプリケーションセキュリティの境界条件であるオリジンという概念について説明しました。 現在のWebブラウザーでは、同一オリジンのリソースは同じ保護範囲にあるものとし、オリジンを超えたアクセスについてはリソースの提供元が明示的に許可しない限りはアクセスできないという、「同一オリジンポリシー(Same-Origin Policy)」に従ってリソースを保護しています。 その保護範囲であるオリジンを超え、リソースにアクセスする攻撃の代表事例であるクロスサイトスクリプティング(XSS)について、今回、および次回の2回に分け、HTML5においてより高度化された攻撃と、その対策を説明しま
巷でAngularJSが盛り上がっているのを横目に、最近は黙々とKarmaを触っていました。Karmaはかなりよくできていて素晴らしいと思うんですが、具体的な使い方はあまり見ないので紹介したいと思います。 Karmaについて http://karma-runner.github.io/ Karmaはいわゆるリモートテストランナーです。リモートテストランナーというと、色んなブラウザでテストを走らせることが目的のように思えますが、そうではありません。Karmaは ワークフローの問題を解決すること に主眼が置かれています。なので、コマンドラインでテストを実行するほかに ファイルの変更監視 CIサーバとの連携 デバッグのサポート プラグインによる機能拡張 といった機能を持っています。実際に使ってみると、単にテストを実行してくれるだけでなく、ワークフローが劇的に変わることを実感できると思います。 K
本エントリは JavaScript Advent Calendar 201314日目となります。 来年遂にXPが逝去されるということで、IE9以降のシェアが飛躍的に伸びることを祈りつつ、IE9以降でJavaScriptでできるようになることを気がつく限りまとめてみました。 DOM addEventListener / removeEventListener イベントを登録/削除するためのメソッド。IE8まではattachEventとdetachEventという似たような、でも割と細かいところで動きが違うメソッドを使う必要があったが、IE9から標準のaddEventListenerがサポートされている。 ※ jQueryのon/offとかbind/unbindとだいたい同じ。 ※ 第3引数はuseCaptureといって、trueにするとイベント伝播を上位のDOMから発生させることができる。ま
先日のng-mtg#4 AngularJS 勉強会でLTしようと思ったけど申し込みが間に合わなかったのでブログに書きます。 先月リリースされたAngularJS 1.2はセキュリティがんばってる的なことを聞いたので、セキュリティ周りの仕組みを調べてみました。 お題は以下です。 CSRF JSON CSP (Content Security Policy) Escaping CSRF ユニークなトークンをHTTPリクエストに載せてサーバーでチェックする対応が世の中では主流(最近はカスタムヘッダのチェックによる対策も) AngularJSでは、XSRF-TOKEN Cookieにトークンが載っていると、$httpを使ったHTTPリクエストのヘッダに自動的にX-XSRF-TOKENヘッダーが付く。 XSRF-TOKEN CookieはもちろんNot HttpOnlyで。 Angular界ではCS
このエントリーは以下の「Webの未来 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること〜」というスライドへのアンサーエントリーです。 ひょんなことからまとめはじめたのですが、とりあえずタイトルにあがっているようなasm.js(あせむじぇいえす)やPNaCl(ぴなくる)、LLVMという単語が知らない人でもわかないひとがわかった気になれるように書きました。つまりわかってないやつとはエントリを書いている本人のことだよ! PNaClとasm.jsでカワルミライ Webの未来 〜 PNaClとasm.jsでカワルミライ - いま、モバイルWebの先端で起こっていること from Kei Nakazawa 結構ブクマが多いのでみんな気になっているんだろうなぁ、という雰囲気があります。 でも読んでみると良く分からない単語があったり、業界背景を理解して
I would like to upload a file asynchronously with jQuery. $(document).ready(function () { $("#uploadbutton").click(function () { var filename = $("#file").val(); $.ajax({ type: "POST", url: "addFile.do", enctype: 'multipart/form-data', data: { file: filename }, success: function () { alert("Data Uploaded: "); } }); }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min
項目説明: delimiter – テンプレートを書く際の区切り文字 ({{}} や <%%>) が変更できる。 logic-less – テンプレート上で演算や複雑な制御構文が書けない仕様により、ロジックとテンプレートが完全に分離される。 precompile – テンプレートを事前に実行可能な JavaScript のコードにコンパイルできる。 escape – テンプレートエンジンで自動的に HTML エスケープができる。 method – テンプレート上からデータとして与えられたメソッドを呼び出し、結果を挿入することができる。 standalone – テンプレートエンジンが別途ライブラリを必要とせず単独で動く。 partials – 部分的に別のテンプレートファイルを組み込むことができる。 (include のようなもの) 上の表で表現しきれないそれぞれのテンプレートエンジンの特
Offline Note to users pre-0.6.0: Offline previously used a cloudfront hosted file as one of it's methods of detecting the connection status. This method is now deprecated and the image has been removed. Please upgrade to Offline 0.7.0+. Improve the experience of your app when your users lose connection. Monitors ajax requests looking for failure Confirms the connection status by requesting an imag
http://www.youtube.com/watch?v=MVw8N3hTfCI 「AngularJSの設計思想」の元ネタVideoの中で、GoogleのBrad GreenがJavaScriptのTest実行ツールKarmaを絶賛していたので、調べてみました。 Node.jsで開発されたJavaScriptテスト実行ツール テストの実行スピードが早い。また、ファイルがセーブされたり、変更があったりすれば、Karmaが検知して自動でテストを実行する。テキストエディタとブラウザをいったりきたりする必要がない。 実機ブラウザもしくはヘッドレスブラウザPhantomJSでテストできる。一度に複数のクライアントで実行できる。ブラウザを立上げ、キャプチャをとり、閉じるまで全て自動。結果をまとめて開発者に知らせてくれる。 コマンドラインもしくはIDEで操作 Jasmine, Mocha, QUni
2013-09-12 続・Casper.JSのススメ 前回;Casper.JSのススメCasperJSで受け入れテスト書くかって話になったので、チームの皆さんにおはなしした。 ↓少し削っているのでちぐはぐな気がする。 Casper導入資料 from Yuuki Tan-nai あとは口頭での説明だったので、その内容をざっくりまとめる。①casperjsコマンド $ casperjs test test/suite/ --direct --log-level=debug --fail-fast --pre=test/common/casper_pre.coffee --includes=test/common/casper_inc.coffee --xunit=log.xml testサブコマンドが必要。オプションは以下のとおり。 --pre: 全ファイルの実行前に一度だけ実行されるスク
フロントエンドのパラダイムを参考にバックエンド開発を再考する / TypeScript による GraphQL バックエンド開発
近年、モバイルブラウザ上でアプリケーションを作るにあたり、JavaScriptでも不安定な回線上で動作する設計が求められるようになってきました。 ここでは、「オフラインファースト」をはじめとする、モバイルなどの回線が不安定な状況を想定したWebアプリケーション設計に関して、キャッシュ方法やよく使われるAPIなどを紹介したいと思います。 「オフラインファースト」とは2012年ごろから提唱されていた、「回線がオフラインになることを前提にアプリケーションの設計を行う思想」のことで、オフライン前提に設計することにより回線状況によらないサービス提供や、効率的な通信をベースにした高速な動作を目指すものです。 それではここからはキャッシュ方法とそれぞれ向いているコンテンツの紹介を行います。 読み込みデータのキャッシュ ApplicationCacheやlocalStorage、オンメモリキャッシュなどを
「location.hrefが信用出来ない問題」 http://hoge.com%2F@example.com/へアクセスした場合にlocation.hrefがhttp://hoge.com/@example.com/を返す (勝手にデコードされている) location.href = location.hrefで別のページに飛ぶ iOS 6.0未満、Android4.1未満の標準ブラウザで再現 Masato Kinugawa Security Blog: location.hrefの盲点 「location.hrefが信用出来ない問題」 location.hrefに@使ってなにか入れるのは普通にできる (http://hoge:huga@example.com/のlocation.hrefはhttp://hoge:huga@example.com/) location.hrefを独自解析
「Webサイト・アプリ高速化テクニック徹底解説」第8回は、モバイルブラウザに向けた最適化について紹介します。 モバイル端末はPCに比べ、CPUやネットワークなどの性能面で劣ることからボトルネックの影響が出やすく、またゲーム開発など突き詰めたチューニングを行う場面では、特殊なノウハウも必要になります。 しかしきちんと最適化を行えば、その効果もその分著しく、比較的低スペックな端末や3G回線であっても、サクサク軽量なサービス提供が可能です。今回の記事では、その勘所をお伝えしたいと思います。 1. ボトルネックを取り除く まずはやってしまいがちなボトルネックの事例について、挙げていきたいと思います。前述のようにモバイル端末では、その性能からPCよりも顕著に、未最適化箇所が体感に影響を及ぼします。 仕事がらそこそこの数のアプリケーションを見てきましたが、モバイル向けに特化したチューニングができていな
“One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.” – Addy Osmani In modern day JavaScript, it’s easy to pursue the development of large scale JavaScript applications. We are constantly writing more and more complex web apps that thrive
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く