Intro このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 31 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie このエントリもいよいよ終わりに近づいてきたようだ。 振り返り ここまでの Chrome の動きを振り返る。 2020/01: 3rd Party Cookie を 2022 年には廃止する計画を発表 https://blog.chromium.org/2020/01/building-more-private-web-path-towards.html 2021/06: 2023 年後半に延期 https://blog.google/pro
Device Bound Session Credentials（DBSC）は、Cookie の盗難やセッションの不正使用からユーザー セッションを保護するために設計された新しいウェブ機能です。この機能は、Chrome 135 でオリジン トライアルとしてテストできるようになりました。 背景 Cookie は、最新のウェブ認証において重要な役割を果たしており、ユーザーがブラウジング セッション間でログインしたままにしておくことが可能です。しかし、攻撃者は盗まれた認証 Cookie を悪用してセッションを乗っ取り、多要素認証やその他のログイン セキュリティ メカニズムを回避するケースが増えています。 マルウェアの運営者は、侵害されたデバイスからセッション Cookie を抜き出し、ユーザー アカウントへの不正アクセスを可能にします。Cookie は署名なしトークンであるため、所有権の証明を必
Intro 4 月末にリリースされる Chrome 136 からは、一部のケースで「閲覧履歴があってもリンクの色が変わらない」状態が発生する。 もしこの挙動に依存して閲覧をしているユーザがいれば、多少不便に感じるかもしれない。 しかし、これは長年問題視されてきた、ユーザのプライバシー保護のための更新だ。 ユーザ側でも、「サイトが壊れたのでは?」と思う人もいるだろうため、前半は技術用語を少なめに解説し、エンジニア向けの解説は後半で行う。 従来の挙動 例えば、Wikipedia では、リンクをクリックして閲覧先を確認すると、閲覧済みのリンクの色が変わる。 これは、ブラウザに保存された閲覧履歴に該当するリンクの色を、訪問済みとして変えるブラウザの機能だ。 多くのリンクがある場合、確認済みかどうかがわかるために、便利に使われることもあるだろう。 (最近では、閲覧済みでもリンクの色を変えないように実
[@JSConf.jp おかわり Node学園46時限目](https://nodejs.connpass.com/event/344588/)にて発表した資料です。
Intro Chrome チームより提案された Device Bound Session Credentials の実装が進み、Flag 付きで試すことができる。 この提案の背景と、解決する問題、現時点での挙動について解説する。 背景 2FA や Passkey の普及により、認証部分はかなりセキュアになってきた。インシデントによりパスワードが漏洩しても、それだけでなりすましを成立させるのも困難になっている。 そこで攻撃者の注目を集めているのが、Cookie の窃取(Cookie Theft)だ。 認証がいかに堅牢になっても、有効な Session Cookie を盗むことができれば、その値を Cookie フィールドに付与してリクエストするだけで、なりすましを成立させることができる。 いわゆる Session Cookie は、Proof of Authentication として実装さ
Intro このエントリは、2023 年の 3rd Party Cookie Advent Calendar の 30 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie このアドベントカレンダーを開始した 2023 年末の時点では、2024 年(つまり今年)の年始に Chrome による 1% Deprecate が始まり、2024 年をかけてその範囲を広げ、今頃は Post 3rd Party Cookie の世界が訪れている見通しだった。 しかし、その予定は大きく変更され、これからどうなるのかも不透明だ。 つまり、この話は 2025 年も継続することになってしまったため、2024 年の現状を一旦まとめて
パフォーマンスチューニングで、ソースコードに触らず非破壊でネットワークリクエストを書き換えて、LCPがどれだけ改善するかの実験ツールが欲しかったんですが、この目的で良いプロキシツールがないです。 世のローカルプロキシツールは DNS の設定を要求してきます。これは潜在的に意図しない状況を引き起こすので、使いたくありませんでした。 tl;dr puppeteer の page.setRequestInterception(true) でリクエストを覗いて、書き換えた ブラウザからリクエスト内容を奪う方法 テスト用HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <script type="module"> const x = await fetch('https://jsonp
こんにちは！サイボウズ株式会社フロントエンドエンジニアのdaiki（@k1tikurisu）です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024/10/01のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 WebKit Features in Safari 18.0 Safari 18.0がリリースされました。一部機能を抜粋します。 新機能 Distraction Control ウェブブラウジング中の邪魔な要素を非表示にできる iPhone Mirroring and remote inspection MacからiPhoneをミラーリングし、リモートiOS上のWebサイトのテストやデバッグができる CSS View Tra
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
Chrome 129 Beta Chrome 129 Betaが2024-08-21にリリースされました。 position-area の名称変更や Intl.DurationFormat の追加といったアップデートが盛り込まれています。 本記事では、アップデートの中でも特に実験的な機能のひとつである interpolate-size と calc-size() について紹介します。 前提知識: intrinsic-size(内在サイズ) intrinsic-sizeはピクセルや一般的なパーセンテージ指定のような外部レイアウトに依存したサイジングではなく、要素に含まれるコンテンツの大きさを基準に要素のサイズを変更する仕組みです。 現在、auto や min-content、max-content といったキーワード値がこれに該当しており、それぞれ要素内コンテンツの折り返し可能なサイズを基準
Signage at the Google headquarters in Mountain View, California, Jan. 27, 2022. Photographer: David Paul Morris/Bloomberg 米アルファベット傘下グーグルがオンライン検索市場を独占しているとの画期的な判決を受け、米司法省が検討している選択肢の一つはグーグルの分割を求めることだ。事情に詳しい複数の関係者が明らかにした。 違法な市場独占を理由に米政府が企業分割を求めれば、約20年前にマイクロソフトの分割を試みて失敗して以来となる。非公表情報を理由に関係者が匿名で語ったところでは、グーグルに競合企業とのデータ共有を増やすよう義務付けることや人工知能（ＡＩ）製品で不当な優位性を得るのを防ぐ措置など、より穏やかな選択肢も検討されている。 グーグル、検索巡る支払いは反トラスト法違反－司
Intro このエントリは、3rd Party Cookie Advent Calendar の 29 日目である。 3rd Party Cookie のカレンダー | Advent Calendar 2023 - Qiita https://qiita.com/advent-calendar/2023/3rd-party-cookie 先日、Google より Privacy Sandbox の方針転換について発表があった。 本当は、まだ記事を書くには情報が足りていないため、あまり書く気はなかったが、今後出てくる発表に備えて経緯をまとめるために、「何がまだ分かっていないか」の現状を書いておくことにする。 Privacy Sandbox の方針転換 問題の記事は 2024/07/22 に公開された以下だ。 A new path for Privacy Sandbox on the web
3rd Party Cookie 廃止の方針変更など : Cybozu Frontend Weekly (2024-07-23号) こんにちは！サイボウズ株式会社 フロントエンドエキスパートチームの @mugi_uno です。 はじめに サイボウズ社内では毎週火曜日に Frontend Weekly と題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2024 年 7 月 23 日 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Temporal を取り巻く仕様を整理する ECMAScript Stage 3 の Temporal に関する発表資料です。仕様そのものの整理や、タイムゾーン・カレンダーのサポート、Intl との関係性について解説されています。 Fastly が開発者向けの無料プランを提供開始
Google、Google Sheetsの計算エンジンをWebAssemblyに最適化し、2倍の性能を実現したと発表 GoogleはWebブラウザ上でスプレッドシート機能を提供する「Google Sheets」の計算エンジンの性能をWebAssembyで実装し、従来のJavaScriptによる実装と比較して性能を2倍に向上させたことを明らかにしました。 これにより単純なSUM計算から複雑なクエリまで、シート上でのあらゆる計算を始め、ピボットテーブルの作成、条件付きフォーマットなどさまざまな処理が高速になるとのことです。 この性能向上は、JavaScriptで構築されていた計算エンジンをWebAssemblyに最適化したことで実現していると説明されており、そのためにWebAssemby GC（ガベージコレクション）機能を用いたとのことです。 そのため現時点ではChromeとMicrosoft
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
こんにちは！ Chrome 111からView Transitions APIが利用可能になりましたが、今まで試す機会がありませんでした。 今回満を持して試してみたところ非常に面白かったので、この記事で共有したいと思います。 また、2024年6月11日にリリースされたChrome 126からView Transitions APIが強化されましたので、その点についても触れてみたいと思います。 View Transitions APIとは View Transitions APIは一言で言うと、 異なる DOM 状態間のアニメーション遷移を簡単に作成する仕組み だそうです。 ほう...？？🤔 百聞は一見にしかずということで、以下のサイトにView Transitions APIを使ったデモがわかりやすくまとまっており、イメージがつきやすいので触ってみてください！ View Transiti
Intro Chrome 126 で筆者が実装した URL.parse が Ship された。 Chromium にコントリビュートしたことは何回かあったが、単体機能を Ship したのは初めてだった。 invalid URL の処理 new URL() によって、文字列の URL をパースすることができるようになって久しいが、この API は invalid な場合に例外を投げる。 例外処理をするよりも、先に URL としてパース可能かどうかを知るための URL.canParse() が提案され、先に実装が進んだ。 URL.canParse(str) // boolean しかし、これでは二回パースが必要になるため無駄が多い。 if (URL.canParse(str)) { // 1 回目のパース return new URL(str) // 2 回目のパース } そこで、失敗したら
DOMDOMタイムス#17: Blinkはテキストやそのデコレーション、カゲをどうやってペイントしているの？ 久しぶりのDOMDOMタイムスです！！ Chromium(Blink)のbug fixを通じてテキストのPaintingまわりの実装について知ったので、自分用にまとめてみます👀 なんかもうDOMとかじゃないんですけど、これもまたDOMDOMタイムスなのです。 いきさつ どんなバグだったのよ めちゃ一言で言うと「テキストをverticalにしたときに、それにあわせて回転する文字が入っていると、text-shadowの位置が仕様と異なっちゃう」というバグのbug fixをやってみています。 こういうことです。 右が正しい実装だと考えている方もいるのではないかと思ったり。 要するにshadowのoffsetは回転に影響を受けない、絶対的なものだよというわけです。この仕様はCSS Wri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く