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
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする3 検証 | フロントエンドBlog | ミツエーリンクス
containプロパティにlayoutやpaintを指定した場合やcontent-visibilityプロパティを設定した場合のCSS Containmentの検証をご紹介します。 これまでの関連Blogについては「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする1 概要」「CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする2 検証」でご確認いただけます。 layoutの検証 contain: layout;の設定の有無による要素の配置の違いからLayoutの封じ込めを検証します。 containプロパティがない場合 containプロパティの設定がないブロックを用意します。 ブロック内に3つの要素を設置します。 1つ目の要素は、position: fixed;を設定して相対的な配置にします。 2つ目の要素は、flo
Interop 2024がスタート | フロントエンドBlog | ミツエーリンクス
Interop 2022、Interop 2023に続き、Interop 2024の取り組みがスタートした旨を知らせる記事が、参加組織それぞれから一斉に公開されました。 Interop 2024 | Blog | web.dev The web just gets better with Interop 2024 | WebKit Interop 2024 Launch - Bocoup Interop 2024 Launches | Igalia Microsoft Edge and Interop 2024 - Microsoft Edge Blog Announcing Interop 2024 - Mozilla Hacks - the Web developer blog 加えて、既にInterop 2024 Dashboardが公開されています。Interop 2023より引き
CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 | フロントエンドBlog | ミツエーリンクス
2023年11月28日 CSS Containmentの仕組みを理解してレンダリングパフォーマンスをアップする１ 概要 UI開発者 佐竹 Interop 2023の重点分野の中からWebページの表示性能に関わるCSS Containmentをご紹介します。 CSS Containmentにはcontainプロパティとcontent-visibilityプロパティが定義されており、コンテンツの一部を独立したサブツリーとしてブラウザに認識させる「封じ込め」に関する指定ができます。「封じ込め」を行うと、ブラウザはレンダリング処理の一部を省略したり、必要なタイミングでレンダリングするようになります。結果、Webページのレンダリングパフォーマン向上につながります。 レンダリングの基本的なフロー CSS Containmentの理解を深めるためにレンダリングについて確認します。 以下のフローはBlin
新しいビューポートの単位（sv*、lv*、dv*） | フロントエンドBlog | ミツエーリンクス
ミツエーリンクスでは全社的にInterop 2022の重点分野について調査をしています。 今回はその中から「新しいビューポートの単位」について紹介します。 ビューポートとは ビューポートはWebページを表示するための領域で、ブラウザウィンドウからアドレスバーなどのUIを除いた部分になります。 ビューポートの単位とは ビューポートの単位は相対的な長さの単位で、ビューポートの長さに従って指定します。 ブラウザで表示したビューポートの長さが対象となるため、@pageで宣言した印刷用のスタイルでは無効になります。 なぜ新しいビューポートの単位が必要になったのか 従来のビューポートの単位はUIがスクロールによって拡大縮小するような機能を持つ前に作成されました。 そのため後発の動的にサイズが変わるUIに対応しておらず、画面をスクロールする前の初期表示時に決定されたビューポートサイズを維持し続けます。
応答性を示す新しい指標「INP」 | フロントエンドBlog | ミツエーリンクス
ユーザーの直帰率や離脱率とパフォーマンスの関係から、コンテンツを表示する速度や応答性（ページがユーザー入力に応答する速度）がいかに重要であるかは、既によく知られるようになってきています。 ではコンテンツを表示する速度や応答性を上げるにはどうしたらいいでしょう。 結論から述べるとパフォーマンスを客観的な指標に基づいて正確かつ定量的に測定し、そこから課題を見つけて解決することが必要になります。 GoogleはChrome User Experience Reportに新しく応答性指標INPを導入しました。 INPとは INP（Interaction to Next Paint）は、ページの読み込みを開始してからユーザーがページを離れるまでの間に発生するユーザー入力の応答性（インタラクション）を評価する測定基準で、遅延時間を計測します。 計測対象のインタラクションは、以下となります。 ユーザー入
inert属性の使いどころ | フロントエンドBlog | ミツエーリンクス
inert属性はある要素とその要素のサブツリーに含まれる全ての要素を不活性にするための属性です。不活性とは簡単に言えば「クリックできない」「フォーカスできない」「選択できない」「編集できない」状態を指します。 また、HTML Standardでは「ページ内検索でも無視される場合がある」と記載されています。手軽に使える属性である一方、不用意に使うと思わぬところに影響がでる可能性があります。そこで今回はユースケースとinert属性を使う際の注意点をいくつかご紹介します。 ちなみに、似たような属性としてdisabled属性がありますが、disabled属性はinput要素やbutton要素などのフォームコントロール要素単体、およびフォームコントロール要素をグループ化するためのfieldset要素でのみ有効な属性です。 ユースケース inert属性はもともとdialog要素の仕様の一部として実装が
Chrome DevToolsのRenderingタブを活用しよう | フロントエンドBlog | ミツエーリンクス
Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。 サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。 利用方法と各機能について Renderingタブはデフォルトだと非表示になっており、利用するにはまず次のいずれかの方法で表示する必要があります。 Chrome DevToolsを開いた状態でWindowsではCtrl+Shift+P、MacではCommand+Shift+Pを押して表示されるコマンドメニューに「Rendering」と入力し、「Show Rendering」を選択 Chrome DevTools内の三点ドットから「More tools
Living Standard機能を取り込むW3C文書プロセスの更新 | フロントエンドBlog | ミツエーリンクス
2020年6月15日 Living Standard機能を取り込むW3C文書プロセスの更新 アクセシビリティ・エンジニア 中村（直） 先月末に公開されたW3C Strategic Highlights - May 2020で取り上げられていますが、2020年でのW3C Process Documentの大規模な更新によって、継続的にW3C技術文書を保守・更新をする新たな仕組みが導入される見込みです。 新たな仕組みが導入される背景として、Webは進化し続けているため、変更の提案やレビューを通して、W3C仕様も継続的に開発し続ける必要があります。しかし、現在のW3C Process Documentでは、仕様がCandidate Recommendation（CR; 勧告候補）に到達した場合、特にRecommendation（REC; 勧告）の場合、仕様の内容を変更することが非常に困難になるた
Request.destinationでリソースの種類別にキャッシュ戦略 | フロントエンドBlog | ミツエーリンクス
Request.destinationはRequestインターフェイスのプロパティで、リクエストしているコンテンツの種類を文字列で返します。これをService Workerのfetchイベント時に用いると、リソースの種類別にキャッシュ戦略を切り替えることができます。 Request.destinationの使い方 Request.destinationでは一体どんな文字列が返されるのでしょうか。Fetch StandardのRequest.destinationの仕様の一部を抜粋します。 A request has an associated destination, which is the empty string, "audio", "audioworklet", "document", "embed", "font", "image", "manifest", "object",
Web Bluetooth APIことはじめ | フロントエンドBlog | ミツエーリンクス
Bluetoothはデバイス間でのワイヤレス通信に日常的に使われています。代表的なものとしては、ヘッドフォンとPC間の接続や、外部センサーとスマートフォン間の接続などがあげられます。Bluetoothバージョン4.0で追加された速度よりも省電力に特化した通信方式 Bluetooth Low Energy（以下「BLE」）では、ここ数年で話題となったIoTデバイス間での接続などにも多く用いられています。 今回ご紹介する「Web Bluetooth API」は、そんなBluetoothをWebブラウザから利用して外部デバイスを検索したり、デバイスの持っている情報を読み書きするための機能を提供してくれるAPIです。 各ブラウザの実装についてはまだまだという状況ですが、macOSのGoogle Chromeではバージョン56からデフォルトの状態で使用可能になりました。APIの動作条件としてセキュリ
PWA（Progressive Web Apps）の現状とその開発方法 | フロントエンドBlog | ミツエーリンクス
PWAとは PWA（Progressive Web Apps）とは、ネイティブアプリ的な挙動をするWebサイトのことで、例えるならWebサイトとネイティブアプリを足して2で割ったような物と考えてもらえば解りやすいと思います。2015年に開催されたChrome Dev Summitや、2016年5月に開催されたGoogle I/O 2016において大々的に提唱され、実例や測定結果から2017年現在も注目を集めています。 個人的にはハイブリッドアプリの代名詞的な位置にあるApache Cordova（PhoneGap）のような印象があるPWAですが、後述の通りアプリとしての開発・公開の敷居は低く、仕様を理解していればエディタとGoogle Chromeだけで、特別なツールを使うことなく開発することができます。 PWAの利点 では、WebサイトをPWA化することに、どのようなメリットがあるのでし
WebサイトのPerformance Budgetとは | フロントエンドBlog | ミツエーリンクス
Performance Budgetについて紹介します。まずはじめにBudgetとは日本語で訳すと「予算」という意味です。そして、予算とはある目標値の達成に向けて費やすことのできる最大割り当て量を示すものです。Performance Budgetを要約すると、Webサイトのページ上で使用できるリソースのサイズ、ファイル数、表示時間などを数値で定義することを示します。 本記事を書くにあたって「Performance Budget」と検索しても日本語圏の記事はあまりなく、まだ馴染みのない言葉かと思いました。そこで、今回参考にさせていただいたページも掲載していますのであわせて読んでいただけると理解が深まるかと思います。 何のために作るのか、そして誰が使用するのか モバイルサイトでは3秒以上表示に時間がかかると53％の人が離脱する調査結果があります。しかし、この速度を構築時、そして運用を開始してか
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
