jQuery 1.8 で XSS 対策に .parseHTML メソッドが追加
jQuery の $ 関数はセレクタによる絞り込み、HTML 生成、ready イベントコールバックの3つのケースに使われますが、開発者がセレクタとして想定したものが HTML 生成として解釈され、XSS を引き起こすことがあります。次のコードは HTML と解釈され、error イベントハンドラに指定された alert が実行されます。 $("#"); 防衛策として jQuery 1.9 では $ 関数に渡すことのできる HTML に見える文字列の制約を厳しくするため、従来は認識できた文字列が認識できなくなる場合の回避策および、特に単独の要素を生成したり、外部のデータから文字列を生成する場合のために $.parseHTML を使うことをおすすめするとリリース記事に書いてあります。 .parseHTML メソッドの実装を見ると戻り値が配列であり、jQuery のメソッドチェーンを展開できな
ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」:phpspot開発日誌
Create.js - A new kind of web editing interface ページレイアウトそのままに見たまま編集が出来るようになるライブラリ「Create.js」。 起動すると、コンテンツテキストが編集可能になり、ページ上のツールバーを使って太字などの文字修飾ができ、そのままSaveボタンで保存できるという非常に使いやすい編集ツールとして使えます CMS等に実装するといいのかもしれません ページ全体をWYSIWYG編集可能にするモードもIEにはあったりしましたが、これは編集させたい部分だけを編集できるようになるという所がよいです。 ページ全体を下手に編集可能にするとデザインが崩れたりして大変であったりしますが、コンテンツ部分のテキストのみ編集可能にすればそういうことがないですね。 関連エントリ HTML5ベースの音声入力可能なWYSIWYGエディタ「wysihtml5
超面白！文字を選択してその文字にコメントできるJSライブラリ:phpspot開発日誌
Home - Annotator - Annotating the Web 超面白！文字を選択してその文字にコメントできるJSライブラリ。 ブログ等で記事のここにコメントしたい、といった場合に選択するとアイコンがあらわれます クリックするとコメント書き込みフォームがポップアップされます Saveボタンを押すと保存され、マウスオーバーでコメントが出るようになります コメント量の多いところはその分黄色く表示されます ストレージは自分のサーバに用意することもできますが、ホスティングを使う事もできます。 面白い上に、インタフェースが良い感じです。これを使ったサービスを作ってみるのも楽しそう。 関連エントリ スマホを判別するのに便利なJSスニペット ネットワーク図を美麗にビジュアル化できるJSライブラリ「sigma.js」 美麗なグラフをSVGで描画できるJSライブラリ「dc.js」 JavaScr
Highcharts - Interactive Charting Library for Developers
Our core library. Includes all standard chart types and more.
第1回 Meteorをはじめよう | gihyo.jp
Meteorとは？ Meteorは、2012年4月に彗星のように登場した、新たなアプリケーションプラットフォームです。この原稿の執筆時で、バージョンは0.3.6とされており、まだまだプレビュー版の域は超えていません。また、現状ではUNIX環境（MacOS Xを含む）でしかうまく動作しないようです。 しかし、Webアプリケーション開発をとことんまで素早く、楽に行えるようにするためのさまざまな仕組みが盛り込まれていることから、登場直後からかなりの注目を集めています（公式サイトには、「1日か2日でプロトタイプを、2～3週間で製品レベルのアプリを構築できるようにする」とあります）。 MeteorはMITライセンスに基づくオープンソースプロジェクトとして、Github上で公開されています。現在4人の開発者がフルタイムで開発に従事しており、1年以内に1.0をリリースする予定だとされています。 M
1分でWebアプリを作れて、3分で公開できた！オールJavaScriptでWebアプリを開発できるMeteorを触ってみた - IT-Walker on hatena
もうJavaもRubyも要らない？–JavaScriptオンリーの未来派WebアプリフレームワークMeteorがデビューという記事で知った、新しいフレームワークMeteor。 ちょっと気になったので、軽く触ってみました。すごすぎるフレームワークの登場です！！ 正確に言うと、実行環境＆フレームワーク＆クラウドPaaS＆パッケージマネージャーといったところでしょうか。Node.jsとHerokuとnpmが一緒になったようなもんだと思えば、イメージがわくと思いますが、実態はそれらを上回っています（パッケージ数はnpmの比じゃありませんが・・・使い勝手という意味で）。 インストール ターミナルをたちあげて、以下のコマンドを実行するだけ。 （行頭の$はターミナルであることを表してるだけで、コマンドの一部じゃありません） $ curl install.meteor.com | sh これで /usr/
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
Framekiller - Wikipedia
A framekiller (or framebuster or framebreaker) is a technique used by websites and web applications to prevent their web pages from being displayed within a frame. A frame is a subdivision of a Web browser window and can act like a smaller window. A framekiller is usually used to prevent a website from being loaded from within a frameset without permission or as an attack, as with clickjacking. Fr
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
情報セキュリティ技術動向調査（2011 年上期）：IPA 独立行政法人 情報処理推進機構
この何年かでWebアプリケーションは、サーバ上のみでプログラムが動作するものから、多くのJavaScriptコードがWebブラウザで動作し、背後でサーバと連携して、リッチかつスムーズな操作感を提供するものへと進化してきた。このことは、Webブラウザ上に悪意のスクリプトを送り込む「スクリプト注入（XSS）」攻撃を、より防止しづらく、悪用の懸念がより大きなものに変化させた。本稿は、WebアプリケーションにAjax等の進化をもたらした技術について振り返るとともに、スクリプト注入対策を考慮すべき新たな文脈について論じるものである。 Ajax（Asynchronous JavaScript and XML）[1]は、必要となるデータを非同期でWebサーバから取り寄せつつ、Webブラウザの画面上でなめらかな操作性を提供する形態のJavaScriptプログラムのことである。かつてのブラウザにおいてはこの
suggest.js - 入力補完ライブラリ
Japanese / English JavaScriptで入力補完を手軽に行うためのライブラリです。 (【お知らせ】ver2.0からprototype.jsを必要としなくなりました) 下記のような機能を持っています。 入力内容をもとに検索を行い、補完候補を表示します。(Google Suggestぽく) Ajaxでは無く、初回画面表示時のみデータの読み込みを行い、それ以降は、クライアント側で対象データから検索します。したがって、入力内容に変化があってもサーバ側にアクセスすることはありません。 検索は、前方一致/部分一致、大文字と小文字の区別あり/なしといったように、オプションで簡単に指定できます。また、その他にも様々なオプションが指定可能です。 検索結果の表示上限を指定できます。(デフォルト上限20件) 補完候補はキーボードの上下と、マウスにて選択できます。また、キーボードで選択中にES
JavaScriptの対PHPerトラップ 13: その傾向と対策 - Qiita
JavaScriptはPHPとよく似たシンタクスを持っています。PHPerにとっては親近感を感じる言語かもしれません。しかし、両者の言語仕様の違いはおそらくPHPerの想像以上です。『JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス』の著者、Douglas Crockford 氏が「JavaScriptはCの皮をかぶったLISP」と表現するくらいです。 PHPとJavaScriptが似ている(ように見える)が故に、はまりそうなポイントとその対策について簡単にまとめてみました。より詳しく知りたい方は『JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス』や『JavaScriptパターン ―優れたアプリケーションのための作法』を読んでみることをオススメします。 あと、自分も経験が浅いところがありますので間違
nide - Beautiful IDE for Node.JS
nide is a web-based IDE for Node.js, designed with simplicity and ease-of-use in mind. The current version of nide was designed and developed in only 48 hours, at the Node.js KO coding competition. An online installation of nide is available here for demonstration purposes. Note: Depending on the server load it might not respond. If so, try again later or try doing a local install. (Nide was not d
QunitによるWeb標準系UIのシナリオテスト - TechTalkManiacs
このエントリーはHTML5 Advent Calendarに参加しています。本当は18日目だったのですが、こんな時間になってしまいました。 Web標準系UI、というのは私が勝手に呼んでいる呼称なのですが、HTML+JavaScript+CSSを使ったUIのことです。なので、大まかにはWebサイトなども含まれます。 Web標準系UIは表現力の高さが魅力ですが、その分、画面が正常に動作するかのテストが大変です。もちろんSeleniumというツールもあるのですがこれは有名なので適当に検索してもらうとして、今回はあまりこういった文脈では紹介されることないQunitを紹介したいと思います。 QUnitとは？ 元々はjQueryのテスティングフレームワークとして開発されたもので、その時はJQUnitという名前でした。現在はjQueryから独立して依存性をなくしています。 各言語にある同様のツールとひと
jQuery 指定した文字列をハイライトするプラグイン 改良サンプル - 130単位
jQuery 指定した文字列をハイライトするプラグイン - 130単位 この記事のコメントで、「一度に複数の語句をハイライトするには？」というものがありました。すぐに回答できず申し訳なかったのですが、時間ができたので改良したサンプルを作ってみました。 サンプルページ http://deeeki.sitemix.jp/sample/jquery_highlight/ 前回はフォーム送信後でしたが、このサンプルはボタンクリックでハイライトします。 サンプルコード ※該当部分のみ <!-- 最新版JQueryを外部から読み込み --> <script type="text/javascript"src="http://code.jquery.com/jquery-latest.js"></script> <!-- ハイライトプラグイン読み込み --> <script type="text/jav
highlight: JavaScript text higlighting jQuery plugin
Text higlighting is part of DynaCloud – where tags/keywords are automatically highlighted once they’re clicked – so I took that code and made it a stand-alone JavaScript text highlighting jQuery plugin. Demo Each of the links will highlight the corresponding word. highlight javascript Remove highlights. Usage Add highlight Download jquery.highlight-2.js (2 KB) and add it to your page after jQuery.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
大規模なJavaScript開発の話
WebStorm指南書
yuga.jsのXSS直したバージョンがなかなかリリースされないので勝手に直したやつ
IBM Developer
