テキストをCSS用にエスケープするオンラインツールを作ってみた
テキストをCSS用にエスケープするツールを作ったので、一応紹介しておきます。 CSSのcontentプロパティなどでテキストを書くときなど、そのまま書いてもいいのですが、日本語などの場合は文字コードが面倒くさいのでエスケープした文字列を入れておくと便利だと思っています。 font-familyの指定とかに使うこともあるかもしれません。 この辺の話はWebTecNoteさんの「[css] contentプロパティで挿入できるコンテンツ」という記事が分かりやすいです。 で、上記リンク先にも今回作ったものと似たような変換機があって、以前はよく使わせてもらっていたのですが、何と言うか、練習も兼ねて自分で作ってみたいと思ったわけです。 まあ自分なりに使いやすいものができたかと思います。 Text Escaping for CSS 使い方は上のテキストエリアに好きな文字列を入れるだけです。 あ、改行も
JavaScript：unescapeHTMLの妥当な実装
JavaScriptにはHTMLを実体参照化する関数、PHPで言うところのhtmlspecialchars()にあたる関数が存在しません。 正式な理由はよく知りませんが、教科書的な回答としては、「DOMを使えばエスケープなんて気にしなくていいよ」が挙げられるでしょう。うだうだ言わず黙ってDOMを使うべし。 …まあでも、必要なケースもあるでしょう。特にinnerHTMLの高速性は魅力的です。T.jsを作ったときにベンチマークを取ったのですが、エスケープ関数をはさんでもinnerHTMLの方が高速に動作することが確かにありました。 そんなわけで、世の中にはHTMLをエスケープする自前実装の関数があふれています。さんざん語り尽くされている気もしますが、prototype.jsの実装を見ていて少し気になったので取り上げてみます。 escapeHTMLの場合 escapeHTML 文字列中の特定の文
DHTML - 構造化テキストは構造化するのがやっぱ正しい : 404 Blog Not Found
2010年09月23日02:00 カテゴリLightweight Languages DHTML - 構造化テキストは構造化するのがやっぱ正しい うーん、気に食わない。 404 Blog Not Found:構造化テキストの間違ったエスケープ手法について make_link = function(href, text) { var a = document.createElement('a'); a.href = href; a.innerHTML = text; var div = document.createElement('div'); div.appendChild(a); return div.innerHTML; }; 何が気に食わないって、折角作ったDOMという構造をベタテキストに戻しちゃうところ。 脱構造しない例 こうすればよいのではないか。 (function(){ v
Kazuho@Cybozu Labs: (Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について
昨日の Twitter の XSS 騒ぎは、まだ皆さんの記憶に新しいことと思います。いい機会なので、ツイートのような構造化テキストのエスケープ手法について触れておきたいと思います。 Twitter のメッセージは、単なる平文（プレインテキスト）ではなく、「@英数字」のような他のユーザーへの言及と「http://〜」のような URL を自動的にハイパーリンク化する構造化テキストです。 このような複数のルールをもつ構造化テキストを HTML 化する際には、どのようなコードを書けばいいのでしょう？ まず「@〜」をリンク化してから、URL をリンク化すればいいのでしょうか？ それだと、@〜 のをリンク化した A HREF タグの中の URL がさらにリンク化されていまいますね。 では、URL をリンク化してから @〜 をリンク化すればいいのでしょうか？ それだと、@ を含む URL があった場合に
Kazuho@Cybozu Labs: String::Filter っていうモジュール書いた - 続: (Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について
先のエントリ「(Twitter の XSS 脆弱性に関連して) 構造化テキストの正しいエスケープ手法について」の続き。 弾さんが「404 Blog Not Found:DHTML - 構造化テキストは構造化するのがやっぱ正しい」で示されているような DOM ベースの操作を行えば、原理的に XSS 脆弱性を防ぐことができます。ただ、クライアントサイド JavaScript によるレンダリングはウェブの構造を破壊するという点で筋が悪い（テーブルと FONT タグを利用したページレイアウトが批判されていた頃を覚えていらっしゃいますでしょうか。JavaScript によるレンダリングはウェブのリンク構造も破壊するので一層たちが悪いというのが自分の考え）ですし、サーバサイドでの DOM 操作は重たいので、できれば避けたいところです。 構造化テキストの HTML への変換は、よほど複雑な記法でない限り
There's more to HTML escaping than &, <, >, and " - wonko.com
A few days ago I tweeted: If I had a dollar for every HTML escaper that only escapes &, <, >, and ", I'd have $0. Because my account would've been pwned via XSS." This was exaggeration for effect—there aren’t many cases where a simple XSS injection could actually empty a bank account—but I wanted to make a point. By some coincidence, I’ve found myself working with various open source projects rece
jQueryで文字参照に変換
jQueryに文字列に含まれる特定の文字を文字参照へ変換するそのものずばりなメソッドは無い(よね？)が、ダミーの要素を作成し、text()で変換したい文字列をセットしてからhtml()で内容だけ取り出してやるとうまいこと変換することができる。 var s = $("<u/>").text(s).html(); これだけでsが文字参照に変換される。どう変換されるかは各ブラウザのinnerHTMLの仕様に依存するのだと思う。 思いついた時はreplace()並べるよりはマシかなと思ったけど、直観的なコードではないので一長一短。各ブラウザがきっと良きに計らってくれるであろう点はなかなか良い気もする。 短いエントリだ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
