Masato Kinugawa Security Blog: SVGフォントとCSSを使ってページ内のテキストを読み取る
English version is here: https://mksben.l0.cm/2021/11/css-exfiltration-svg-font.html この記事では、SVGフォントとCSSを使って、ページ内のテキストを読み取る方法を紹介します。 CSSを使ってデータを読み取る方法はいくつか知られており、既知の手法が以下のサイトでよくまとめられています。 CSS Injection Primitives :: DoomsDay Vault https://x-c3ll.github.io/posts/CSS-Injection-Primitives/ これらのテクニックは、入力がサニタイズされていて使えるHTMLタグが限られているケースや、Content Security Policy(CSP)の制限によってJavaScriptが使えない状況などでも、スタイルの記述ができる
目指すのはぶっちぎりの速さ! なぜ HTML5 版CacooはSVGを採用するのか | 株式会社ヌーラボ(Nulab inc.)
こんにちは！ Cacoo チームの中原です。現在CacooチームはFlashで作られている図の編集画面(以下エディタと表現します)を* HTML5 で置き換える開発を進めています。このブログでは、 HTML5 版 Cacoo で図形の描画に使用される、SVGを選択した理由と経緯について説明したいと思います。 （*置き換える理由については「Good-Bye Flash ~ CacooはHTML5で生まれ変わります」をご覧ください） どの技術を使って図形を描く?重視したのは「パフォーマンス」 図形の描画にどんな技術を使うか。いくつか候補を上げました。 2D Canvas 3D Canvas (WebGL) SVG (これ以外に、Unityという意見もありましたが今回はWeb標準技術を使うことを前提にしました。) さて、どれを使おう。私たちがどの技術を選択するのか、基準を決める必要があります。そ
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
WEB+DB PRESS Vol.90 SVG特集も良い - rochefort's blog
昔の号を今更読んでますが、この号濃いです。 ドラクエとGitの話は日記に書きましたが、 他にもマテリアルデザイン、Electron（今見るとsampleが少し古いですが、何ができるかが分かる良い記事です。Erectronに未来があるのかはよくわかりませんが。）、react-rails、MatzのEmacsとRubyの話などすごく充実しています。 WEB+DB PRESS Vol.90 作者: 江口和宏,吉田太一郎,内田優一,青山公士,石本光司,まつもとゆきひろ,おにたま,田籠聡,竹内郁雄,南川毅文,伊藤直也,佐藤太一,?橋侑久,Magnolia.K,佐藤歩,泉水翔吾,西尾泰和,中島聡,はまちや2,竹原,宮崎亮輔,安藤祐介,WEB+DB PRESS編集部出版社/メーカー: 技術評論社発売日: 2015/12/23メディア: 大型本この商品を含むブログ (1件) を見る See Also WE
RailsとHamlでSVG - エンジニアのソフトウェア的愛情
ふつうに ブラウザがインラインのSVG表示に対応していれば、HamlでSVGを書くとそのまま表示してくれます。 app/controllers/circles_controller.rb class CirclesController < ApplicationController def index @circles = 30.times.map { {x: rand(500), y: rand(500), r: rand(100)} } end end app/views/circles/index.html.haml %svg{'xmlns' => 'http://www.w3.org/2000/svg', 'xmlns:xlink' => 'http://www.w3.org/1999/xlink', 'viewBox' => '0 0 500 500', 'width' => '
面倒なSVGのパスを簡単に作成できてしまう便利ツール -SVG Path Builder
面倒で複雑なSVGのパスでも簡単に作成できてしまう便利ツールを紹介します。 オンラインでもローカルでもどちらでも利用できます。
SVGと物理エンジンをマッピングするn個の方法 - Qiita
最近SVGにハマっている。ふとした思いつきで、SVGのcircle要素と物理エンジンをマッピングできたら、簡単にパーティクルが作れるのでは、と思ったのでやってみる。 PhysicsJS + Snap.svg(雑な描画マッピング) PhysicsJS + Snap.svg + 自力の差分管理 PhysicsJS + React 作るのは非常に雑な、こういうやつだ クリックしたらcircle要素が出現する 物理エンジンによって座標計算されて右方向に飛んで行く 50px 右に移動したら消える 物理エンジン的に面白い挙動とかはあとで考えることにする。 物理エンジンの世界を作る 今回はPhysicsJSを使うことにした。box2dはC++由来のAPIが古臭いし使いたくない。matter.js と PhysicsJSがメンテされててモダンな雰囲気がして試してみたのだけど、matter.jsは何かとおせ
Flashを使ってSVGを表示する·SVG Web MOONGIFT
SVGは次世代のWebブラウザを考える上で重要な技術だ。だが、古いブラウザではサポートされていないこともあって、普及には至っていない。実現可能性という意味ではFlashの方が一歩、二歩先んじている。 FlashでSVGの挙動を再現する それならば、と考えた（恐らく）のがSVG Webだ。FlashがSVGをレンダリングできれば問題は一気に解消する。 今回紹介するオープンソース・ソフトウェアはSVG Web、FlashでSVGをレンダリングするソフトウェアだ。 SVG Webを使うとSVGで提供される文字の装飾や画像の表示、アニメーションなどがFlashで描けるようになる。ブラウザの種類によってネイティブなSVGかFlashによるものかを選択すれば良いだけだ。現状では本来のSVGに比べると若干ノイズがあるように感じられる。 動画の再生も可能 とは言え再現性は非常に高い。殆どのレンダリングが実
IEでSVGを表示（プラグインなし）·SIE MOONGIFT
これは面白い。SVGはベクターグラフィックス言語として有力なのだが、プラグインが必要とあっていまいち流行らない。特に問題なのはブラウザでもっとシェアがあるIEで標準サポートされていないことだろう。 そこで、プラグインなしでもSVGが表示できるこちらのライブラリを紹介しよう。 今回紹介するオープンソース・ソフトウェアはSIE、プラグインなしでSVGを表示するJavaScriptライブラリだ。 全てのSVGに対応する訳ではないようだが、それでも表示できるものがあるのが素晴らしい。SIEを使えば、サイト上で存分にSVGの魅力を表現できそうだ。 標準のままでは表示不可 使い方は簡単で、SIEを読み込み、「<object data="Svg.svg" type="image/svg+xml" width="180" height="200"></object>」といった具合にimage/svg+xm
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
俺専用ReactのSVGスケッチ環境作った - mizchi's blog