DOMの古い仕組みを悪用した脆弱性 | フロントエンドBlog | ミツエーリンクス
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
Web技術を駆使してユーザーの画面を「録画」する
Bundle Side Optimization in Future JavaScript - JSConf JP 2021
Using React DOM in Expo native apps
Learn about rendering React DOM elements in Expo native apps. Warning: DOM components are an experimental feature. The public API (expo/dom, dom prop), prop transport system, asset handling, and export embedding system are subject to breaking changes. Use WebViews directly for a production-ready approach. Expo offers a novel approach to work with modern web code directly in a native app via the 'u
Release Version 25.0.0 · jsdom/jsdom
This major release changes the prototype of a jsdom's EventTarget.prototype to point to the Object.prototype inside the jsdom, instead of pointing to the Node.js Object.prototype. Thus, the prototype chain of Window stays entirely within the jsdom, never crossing over into the Node.js realm. This only occurs when runScripts is set to non-default values of "dangerously" or "outside-only", as with t
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript – Frontend Masters Boost
Patterns for Memory Efficient DOM Manipulation with Modern Vanilla JavaScript July 29, 2024 I’ll discuss best practices to avoid excess memory usage when managing updating the DOM to make your apps blazingly fast™️. DOM: Document Object Model – A Brief OverviewWhen you render HTML, the live view of those rendered elements in the browser is called the DOM. This is what you’ll see in your developer
A virtual DOM in 200 lines of JavaScript
In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools like React. React, Vue and the Elm language all simplify the creation of interactive web
シンタックスハイライトをライブラリなしで簡単に！Custom Highlight APIの魅力 - コハム
Syntax Highlighting code snippets with Prism and the Custom Highlight API 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 ウェブ上の構文ハイライトの一般的な仕組みは、すべてのトークンを要素で囲み、適切なクラスを割り当て、CSSを使って色付けすることです。 CSS Custom Highlight APIのおかげで、DOMツリーにを散りばめてカラー情報を追加するステップを省略できます。 Custom Highlight APIの基礎 ブラウザサポート 静的コードスニペットの構文ハイライト 仕組み ステップ1:セットアップ ステップ2:コードのトークン化 ステップ3:トークンとハイライトの関連付け Custom Highlight APIの欠点 制限されたスタイリングオ
HTML attributes vs DOM properties
Attributes and properties are fundamentally different things. You can have an attribute and property of the same name set to different values. For example: <div foo="bar">…</div> <script> const div = document.querySelector('div[foo=bar]'); console.log(div.getAttribute('foo')); // 'bar' console.log(div.foo); // undefined div.foo = 'hello world'; console.log(div.getAttribute('foo')); // 'bar' consol
DOMDOMタイムス#14: Eventインタフェースのbubblingとcomposed
めちゃくちゃ久しぶりの更新になってしまったドムドムタイムスです👶 (JSConfに全身全霊を捧げていました！) さて、今日はEventインターフェースのbubblingとcomposedについてチラチラ見ていってみます。 イベントのインターフェースのおさらい まずイベントがどういうインターフェースになっていたか軽く確認してみましょう！ 例えばclickイベントはPointerEventインターフェースを持ったオブジェクトの1つでした。 このPointerEventインターフェースとやらは辿っていってみると、下のようにEventインターフェースをinheritしているわけですね。 Eventインターフェースを起点として、いろいろなイベントが実装されています。 例えばEventインターフェースをinheritしているUIEventと同じレベルにSubmitEventやCustomEventな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://scnps.co/papers/sp23_domclob.pdf
security: fix DOM clobbering in auto public path by alexander-akait · Pull Request #18700 · webpack/webpack
Release v15.0.0 · capricorn86/happy-dom
LavaDome is vulnerable to onmouseover · Issue #37 · LavaMoat/LavaDome
Chrome Platform Status
onFocusIn and onFocusOut events incorrectly set · Issue #4314 · preactjs/preact
Should `onfocusin`/`onfocusout` IDL attributes be added? · Issue #4542 · whatwg/html
GitHub - mozilla/readability: A standalone version of the readability lib
GitHub - facebook/react-strict-dom: React Strict DOM (RSD) standardizes the development of styled React components for web and native.
sanitizer-api/explainer.md at main · WICG/sanitizer-api
GitHub - WICG/pointer-event-extensions: Extensions to PointerEvents