SPA開発とセキュリティ - DOM based XSSを引き起こすインジェクションのVue, React, Angularにおける解説と対策 - Flatt Security Blog
Vue.js logo: ©︎ Evan You (CC BY-NC-SA 4.0 with extra conditions(It’s OK to use logo in technical articles for educational purposes)) / React logo: ©︎ Meta Platforms, Inc. (CC BY 4.0) / Angular logo: ©︎ Google (CC BY 4.0) はじめに こんにちは。株式会社Flatt Securityセキュリティエンジニアの森(@ei01241)です。 最近のJavaScriptフレームワークの進化は著しく、VueやReactやAngularは様々なWebサービスに採用されています。そのため、多くのWebサービスがSPAを実装するようになりました。JavaScriptフレームワークは便利な一方で
ブラウザレンダリングの仕組み
フロントエンド用語を100秒で解説するチャンネルを作りました！ よかったらチェックしてみてください！ はじめに 以前書いた記事「Webページがブラウザに表示されるまでに何が起こるのか？」で ブラウザレンダリングについて詳細に知りたいという意見をいただいたので、調べてまとめてみました。 全体図 レンダリングの大まかな流れです。 HTMLのダウンロード サーバから送られてきたHTMLをダウンロードします。 HTMLの解析 サーバから送られてきたHTMLファイルは、「0」と「1」でできたデータになっています。 ブラウザは、サーバから受け取ったデータをそのままHTMLとして解釈することはできないので、自分で扱うことができる形、つまりDOMに変換する必要があります。この作業を 解析 ( Parse ) と言います。 HTMLをダウンロードしたら、すぐにこの解析作業に入ります。作業は以下のようなステッ
Hayato.io
Hayato.io This Page Is Under Construction - Coming Soon! Why am I seeing this 'Under Construction' page? Related Searches: Free Credit Report Dental Plans Parental Control Healthy Weight Loss Work from Home Trademark Free Notice Review our Privacy Policy Service Agreement Legal Notice Privacy Policy|Cookie settings|Do Not Sell or Share My Personal Information
VS CodeがDOMによるターミナル実装のパフォーマンスを改善できなかったためCanvasに変更
Integrated Terminal Performance Improvements Electronという史上まれに見るそびえ立つクソのようなGUIプラットフォーム上で実装されているVS Codeが、ターミナルの実装をDOMによるものからCanvasによるものに変更したそうだ。これは、DOMによる実装ではパフォーマンスの改善が十分にできなかったからだという。 DOMでターミナルを実装する際の問題ごととして、テキスト選択、テキストアライメント、GC、パフォーマンスを上げている。 テキスト選択：ターミナルのテキスト選択を実現するためにDOMのテキスト選択の挙動をだいぶ上書きしなければならない。 テキストアライメント：一部の文字はモノスペースになってくれず、workaroundとして一文字ごとに固定長のspanで包む必要があるが、これはパフォーマンス上よろしくない。 GC：DOMでターミナ
JSerのための ブラウザコードリーディング （テスト編）
Meguro.es x Gotanda.js #1 in Drecom https://meguroes.connpass.com/event/49543/
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
Master the DOM
IntroductionMany web developers think the DOM is really difficult (or slow) and you need a huge framework to tame it. Then they invest a lot of their time to learn the framework. A year or two passes, another framework becomes popular and you need to learn everything from scratch. Repeat this a couple more times and JavaScript fatigue is born. Not to mention a huge pile of dependencies. What if I
速報：仮想 DOM は殺された。誰に？ magnum.js に - Qiita
mag.module('lister', { controller: function(props) { this.item = [1, 2, 3] this.title = 'Lister' }, view: function(state, props, element) { state.h2 = { _text: state.title, _onclick: function() { state.show = state.show ? !state.show : true state.item.reverse() state.title = 'Gister' + state.show } } } }) mag.module の第一引数、lister は <div id="lister"> と対応しており、ここで両者が結ばれます。controller 関数は一度だけ呼ばれて、view 関
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
Riot.js ドキュメント日本語版 - Qiita
このドキュメントは、Riotの公式ドキュメントのWhy Riot?とRiot developer guideの全訳です。修正あれば、こちらにプルリクエストください 追記・公式に取り込みました! 記事はこのまま置いておきますが、最新版は公式サイトを参照してください。 公式ドキュメント: http://riotjs.com/ja/ なぜ Riot? 答え1: カスタムタグ RiotはIE8以降の全てのブラウザで、カスタムタグを実現します。 <todo> <!-- layout --> <h3>{ opts.title }</h3> <ul> <li each={ item, i in items }>{ item }</li> </ul> <form onsubmit={ add }> <input> <button>Add #{ items.length + 1 }</button> </f
なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita
追記: 情報が色々と古くなったため、2020年に書き直した版へのリンクを張っておきます。 この記事は VirtualDOM Advent Calendar 2014 - Qiita の初日です。 初日ということで、基調講演風に、Virtual DOMとはなにか、なぜ僕はこんな興奮しているのか！という話から。 Virtual DOMとはなにか 既存の概念で当てはめると、JavaScriptのMVC, MVW(Whatever)フレームワークのViewに位置します。が、その程度では終わりません。仮想DOMとは世界を革命する力であり、このjQueryのDOM操作で汚れきったフロントエンドを救う救世主なのです。 現時点で自分が知っている限りは、以下の実装を指します。 facebook/react 最も使われてるFacebookの実装 Matt-Esch/virtual-dom Altenative
Web Components(+Virtual DOM)ラッパー書いてみた
Concept 『Web Components with Virtual DOM』 ahomu/Claylump Motivation Web Components ラッパーを書いてみたいなーと思った React の JSX がイマイチ気にくわない（JSとHTMLを一緒にするなオジサン） <template> に書いた内容を Virtual DOM 生成器に変換すればいいんじゃね というような所から人様のライブラリを借りてツギハギして習作してみた次第。借りてきたライブラリ（HTML String パーサと Virtual DOM）は独自実装しても楽しそうなので、やる気があればやる。 もちろん実験品なので、実用には耐えない Files claylump.polyfill.js（webcomponents.js + window.fetch + es6promise） claylump.run
Reactを実際に使ってみた話が増えてきた - ワザノバ | wazanova
http://youtu.be/uwnjDXtJufs 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 44分前 コンポーネントベースのviewレイヤのライブラリであるReactを、実際に使ってみた感想についての発信が増えてきているので、まとめてみました。（4)はFluxの話も入ってます。） 1) Reactとは？ E4E Developer Conf 2014の講演でFacebookのBen Andersonは、Reactを採用しているサービスを挙げています。 Facebook / Instagram / GitHub (Atom) / Khan Academy (with Backbone.js) / Mozilla Firefox (for Paneis) / NY Times / Reddit (stor
[JavaScript] 仮想DOMを提供する『React』について少し調べてみた - Qiita
たまに耳にする React を自分なりに少し調べてみたので、まとめがてらメモを残します。 ちなみに初めて React を知ったのは 天下一クライアントサイドJS MV*フレームワーク武道会でした。 Reactとは Facebook のチームが開発している、ユーザインタフェースを構築する為の JavaScript ライブラリです。公式ページ ⇒ http://facebook.github.io/react/ その特徴は（公式ページどおりですが）、 MVCの Viewのみ サポート なので恐らく 他のライブラリと容易に組み合わせ られる Virtual DOM (仮想DOM) 1方向 の Reactive バインディング Reactive .. きっと、(見えないところでシステムが)動的に View を更新する、という雰囲気でしょうか.. 公式ページを見ると、やり方によっては双方向にもできる
![[JavaScript] 仮想DOMを提供する『React』について少し調べてみた - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/75698438a9e02ba00783a5d2bd99560d33f42642/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCSmF2YVNjcmlwdCU1RCUyMCVFNCVCQiVBRSVFNiU4MyVCM0RPTSVFMyU4MiU5MiVFNiU4RiU5MCVFNCVCRSU5QiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4RVJlYWN0JUUzJTgwJThGJUUzJTgxJUFCJUUzJTgxJUE0JUUzJTgxJTg0JUUzJTgxJUE2JUU1JUIwJTkxJUUzJTgxJTk3JUU4JUFBJUJGJUUzJTgxJUI5JUUzJTgxJUE2JUUzJTgxJUJGJUUzJTgxJTlGJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWNsaXA9ZWxsaXBzaXMmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1hN2M4ZGQwNTRkYWFlOGRkMzBkZmY4MmJiOWMyZTNlYg%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwaGt1c3UmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTgzODlkZjUwMzQyMTYxZTIxNzkwY2ZmOGViMjg4M2Fh%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D9930aeca5845401dec7cc9bf5b52d65f)
Virtual DOMを持つMV*ライブラリのmercuryについて
最近node-webkitアプリを書く時、何かしらのMV*やデータバインディングライブラリと言われるものを試しているのですが、floating-memo.appではRaynos/mercuryを使いました。 mercury は小さなモジュールを組み合わせたライブラリとも言えますが色々特徴的です。 完全にモジューラーな実装 Virtual DOM FRP ファイルサイズが小さめ モジューラーな実装とは何かというとmercuryのindex.jsを見ると面白い事が書かれています。 /* Pro tip: Don't require `mercury` itself. require and depend on all these modules directly! */ require("mercury") しないで、直接それぞれのモジュールを読み込んで使えるという事が書かれています。 (これ
Backbone.jsでViewからModel・DOMを操作する時の流れ - maeharinの日記
自分の頭の中の整理のために。 はじめに Backbone.jsガイドブックを読んでいたら、このような事が書いてあった。 Backbone流MVCでは、ビューとコントローラは両方ともViewが担当します。（略）これらはそれぞれViewのメソッドとして実装しますが、本書では区別のために前者をビューメソッド、後者をコントローラメソッドと呼ぶことにします。（略）重要な点は、DOMイベントに応じてコントローラメソッドが実行されることで処理が始まり、その中でmodelやcollectionを操作し、その結果生じるイベントがビューメソッドを呼ぶ、という流れを意識することです。そのためにも、コントローラメソッドには処理の起点になる以上の仕事を与えず、DOM操作はすべてビューメソッドに集めるよう明確に区別しましょう。 図にするとこんな感じになる（点線がイベントで実線が直操作） しかし、なぜこのような書き方に
Angular.jsとBackbone.jsのDOM依存を図解する - ジンジャー研究室
果敢にもMVCフレームワークの図解を試みたので、どうぞ！ MVCの動機 MVCという言葉が初めて登場してから30年以上たった今、最早なんだったのか分からないほどMVCの定義は混迷をきたしているわけだが、どれがMVCでMVVMでMVPであるという定義についてあれこれ考察するのは個人的には好きでなくて、「結局何がしたいのか」という動機がぶれていなければ何でも良いと思っている。 じゃあそれは一体何なのかということを自分なりに考えてみたところ、次の一言に落ち着いた。 「ModelはViewに依存したくない」 世間的には（？）ModelとViewを単に「分ける」と説明されることが多いが、私はそれだけでは納得していなくて、依存の方向こそが重要だと思っている。たとえ分かれているように見えてもModelがViewを参照していたら、情報の取得先や表現方法は固定化されてしまう。 ModelはViewの事情から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Explore DOM Events
DOM Based XSSの自動検出の話
Incremental DOM ざっと見たやつ。追記: 初期バージョンのコードなので最新では異なる場合があります。
