You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
pagefindは静的サイトでも手軽にサイト内検索を実現できる全文検索ライブラリーです。先日、pagefindの脆弱性が修正されましたが、DOMの古い仕組みを悪用したものでした。その内容を興味深く感じたため、この記事で紹介します。なお、紹介する攻撃手法はDOM Clobberingと呼ばれています(DOM上書きという意味です)。 この記事で紹介する脆弱性はpagefind 1.1.1で修正されています。pagefind 1.1.1未満をご利用のかたは1.1.1に更新することをおすすめします。 CVE-2024-45389: DOM clobbering could escalate to XSS 概要 修正前のpagefindを利用しているサイトでは、サイトにHTMLを書き込める場合、外部のJavaScriptを読み込まれてしまう脆弱性がありました。書き込まれたHTMLにJavaScrip
皆さんは新しく実装が進む Node.prototype.moveBefore というメソッドをご存知でしょうか、この記事ではこの新しいメソッドについて簡単な解説を行おうと思います。 新しく実装が進む Node.prototype.moveBefore メソッド Node.prototype.moveBefore() とは新しく Node インターフェースに追加されるメソッドで Node.prototype.insertBefore() と同様のシグネチャーで要素の状態を維持しつつノードの移動ができる API です。 「要素の状態を維持しつつノードの移動ができる」という表現が想像できない人もいるかもしれませんが具体的な例としては、X のこのポストに付随している動画を見ていただけるとわかりやすいかと思います。 注目していただきたい点としては、要素が左右に移動した際にアニメーションの状態が保持さ
Lightweight module for morphing an existing DOM node tree to match a target DOM node tree. It's fast and works with the real DOM—no virtual DOM needed! This module was created to solve the problem of updating the DOM in response to a UI component or page being rerendered. One way to update the DOM is to simply toss away the existing DOM tree and replace it with a new DOM tree (e.g., myContainer.in
平日の早朝に道玄坂を下るアベックに破滅と滅亡を。どうも、@neer_chanです。 皆さん、仮想スクロールしてますか? 概要 仮想スクロールとは 仮想スクロールの仕組み 仮想スクロールの魅力 前提として、縦スクロールの話をします。 仮想スクロールとは GIFの通り、見えている範囲(+α)のみレンダリングするもの。 要は、ロケット鉛筆みたいなものです。(絶対に違う) 仮想スクロールの仕組み イカれたメンバーを紹介するぜ! 見える範囲を指定するためのDiv スクロールする高さを指定するDiv ListItemを置くUnorderdList いつかの、いくつかのきみとListItem 以上の4つが登場するメンバーだ! ちなみに、通常のスクロールの場合は2の役割を3が行う感じになります。 また、以下の要素をあらかじめ指定する必要があります。 見える範囲に表示する4のListItemの個数(あるいは
Intro 非常にシンプルかつミッシングピースだった Element.toggleAttribute という仕様が提案された。 最近になって各ブラウザが一斉に実装を進め、リリースに向けたアナウンスが出始めている。 この仕様について解説する。 Boolean Attributes Boolean Attribute とは、属性の存在によって真偽となる属性である。 https://html.spec.whatwg.org/#boolean-attribute 例えば button の disabled を例にとるとこうなる。 button を disabled にする場合は、仕様上は以下の 3 つの書き方がある。 <!-- 属性のみを書く --> <button id=target disabled>toggle target</button> <!-- 値を empty string にする
The tiny framework for building hypertext applications. Do more with less—We have minimized the concepts you need to learn to get stuff done. Views, actions, effects, and subscriptions are all pretty easy to get to grips with and work together seamlessly. Write what, not how—With a declarative API that's easy to read and fun to write, Hyperapp is the best way to build purely functional, feature-ri
Intro DOM のイベントリスナの仕様に Passive Event Listeners というオプションが追加された。 このオプションは、主にモバイルなどでのスクロールの詰まり(Scroll Junk) を解決するために導入されたものである。 今回は、この仕様が解決する問題と、本サイトへの適用を解説する。 Passive Event Listeners Spec Scroll Event の PreventDefault() 画面のスクロールに合わせたインタラクションを実装する場合、 Scroll Event にイベントリスナを登録する。 典型的な例では touchstart や touchend をフックし、その中で DOM の操作などを実施するなどがある。 場合によってはイベントリスナ内で preventDefault() を呼ぶことで、スクロールそのものを止めることもできる。
Nicholas C. Zakas is a web software engineer who specializes in user interface design and implementation for web applications using JavaScript, Dynamic HTML, CSS, XML, and XSLT. JavaScriptのNoteListオブジェクトは特殊なオブジェクトだ。同じオブジェクトであるにもかかわらず、動的なオブジェクトと静的なオブジェクトという2種類の実装を持っている。この違いが性能に大きな差を与えている。このあたりの話がWhy is getElementsByTagName() faster that querySelectorAll()? - NCZOnlineにわかりやすくまとまっており参考になる。 JavaScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く