ブラウザの仕組み | Articles | web.dev
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
DNS over HTTPS（DoH）の気になる Web Browser 実装を確認
Firefox の通信キャプチャ シナリオ 1-1 の通信を確認します。 まずは最初の Web Browser → DoH リクエストです。 Host: TEST_SERVER Accept: application/dns-message Accept-Encoding: Content-Type: application/dns-message Content-Length: 128 Cache-Control: no-store, no-cache Connection: keep-alive Pragma: no-cache 0x00 0x00 0x01 0x00 0x00 0x01 0x00 0x00 | ....... 0x00 0x00 0x00 0x01 0x03 0x77 0x77 0x77 | ......ww 0x06 0x67 0x6f 0x6f 0x67 0x6c
Spectre の脅威とウェブサイトが設定すべきヘッダーについて
長い記事なので先に結論を書きます。 Spectre の登場で、ウェブサイトに必要とされるセキュリティ要件は増えました。具体的に必要な対策は下記の通りです。 すべてのリソースは Cross-Origin-Resource-Policy ヘッダーを使って cross-origin なドキュメントへの読み込みを制御する。 HTML ドキュメントには X-Frame-Options ヘッダーもしくは Content-Security-Policy (CSP) ヘッダーの frame-ancestors ディレクティブを追加して、cross-origin なページへの iframe による埋め込みを制御する。 HTML ドキュメントには Cross-Origin-Opener-Policy ヘッダーを追加して popup ウィンドウとして開かれた場合の cross-origin なページとのコミュニ
リソースの読み込みを助けるウェブブラウザ API の世界
ウェブブラウザはネットワークから様々なリソースを集め、それらを処理して組み合わせてウェブページをレンダリングします。リソースが揃わないとレンダリングできないので、この一連の処理のどこかが遅れるとページの表示も遅くなります。レンダリングをすみやかに開始できるようにウェブブラウザはリソースの取得やその処理を最適化するための API を提供しています。本記事ではそれらを網羅的に紹介し、ウェブアプリの性能改善を図る上でどのようなブラウザ機能が使えるのかを知ってもらうことを目的としています。各機能の具体的な適用事例については他の記事に委ねます。 本記事の内容は記事公開時点での情報に基づいており、閲覧時点では既に古くなっている可能性があります。最新の正確な情報は一次情報源を参照してください。また特定のブラウザ実装について言及する場合は、断りがない限り Chrome を想定しています。誤りや補足、質問な
Life of a Pixel
This is the evergreen copy of "Life of a Pixel". Video of the presentation at Chromium University (Nov 2020): http://bit.ly/loap-2020-video LIFE OF A Steve Kobes skobes@chromium.org Nov 2020 slides: bit.ly/lifeofapixel with special thanks to past presenters dknox@, chrishtr@, pdr@ "The unexamined...
ブラウザフィンガープリント、その凄さ〜Torブラウザアクセスの識別可能性まで〜
フィンガープリントとはブラウザフィンガープリント技術（以下、FP技術）とは、文字通り、ブラウザの指紋を使ってブラウザをサーバ側で識別する技術です。 ここでの「識別」とは、同一ブラウザからのアクセスを同一ブラウザからのアクセスと判定し、違うブラウザからのアクセスは違うと判断することを言っています（図1）。 図1 フィンガープリントの識別の概念よく誤解される方がおりますが、これはあくまでサーバ側での識別です。（追記：「Torブラウザがどのサイトへ接続しているのか？」を識別するWebサイトフィンガープリントとも違います）また、どこの誰がアクセスしているのかというように、利用者を特定しているわけでもありませんのでご注意ください。 クッキーによる識別をご存知の方には、「クッキーによるセッション管理やトラッキングでの識別と同じです」と説明した方が分かりやすいでしょうか。FP技術自体は、クッキーの代替技
ブラウザの作り方
リンク集 - Populating the page: how browsers work: https://developer.mozilla.org/en-US/docs/Web/Performance/How_browsers_work/ - How Browsers Work: Behind the scenes of modern web browsers: https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/ - Let's build a browser engine!: https://limpet.net/mbrubeck/2014/08/08/toy-layout-engine-1.html/ - W3C: https://www.w3.org/ - WHATWG: https://html
TabFS
Going through the files inside a tab's folder. For example, the url.txt, text.txt, and title.txt files tell me those live properties of this tab (Read more up-to-date documentation for all of TabFS's files here.) This gives you a ton of power, because now you can apply all the existing tools on your computer that already know how to deal with files -- terminal commands, scripting languages, point-
How To Clear Cache for All Major Browsers
A cache, in general, is software or hardware that temporarily captures and stores data for the user to access that data in the future rapidly. There are several types of caching, like browser caching, distributed server caching for high volume systems, application caching to log website HTML, data caching for content management systems, gateway caching, proxy caching, and many other kinds. So, as
ITPのCNAMEクッキー規制について｜AD EBiS マーテック研究会
ご無沙汰しております。11月6日に、CNAMEレコードを使って付与された1st-party cookieの規制機能を搭載したiOS14.2がリリースされましたので、その内容をまとめます。いつものことですがマーケティングよりブラウザの細かい話です。正式発表前なので誤りの可能性がありますがご了承またはご指摘ください。 規制の仕組みまず規制されるのは、AppleのWebKitエンジニアJohn Wilanderさん（ITPの発明家）が「Third-party CNAME cloaking」として定義するものです。 Third-party CNAME cloaking means a first-party subdomain resolves to a third-party domain which does not match the resolution for the top frame
target=''_blank" な <a> タグに noopener だけでなく noreferrer も付けるべきか - mizdra's blog
追記 2020/10/29: モダンブラウザによって noreferrer が自動的に付与されつつある、という説明をしていましたが、正しくは noopener の間違いでした。失礼しました。既に記事の方は修正済みです。 追記終わり。 target="_blank" は新しいタブでリンク先を開くためのオプションです しかし、これにはリンク先のページからリンク元のページの window オブジェクトにアクセスできるという、ちょっと癖のある挙動があります この挙動自体は脆弱性ではありませんが、 フィッシング詐欺などに悪用される可能性がある、危険な挙動であることが知られています リンクのへの rel=noopener 付与による Tabnabbing 対策 | blog.jxck.io noopener そこで一般には、target="_blank" な <a> タグには noopener を指定
Full Third-Party Cookie Blocking and More
This blog post covers several enhancements to Intelligent Tracking Prevention (ITP) in iOS and iPadOS 13.4 and Safari 13.1 on macOS to address our latest discoveries in the industry around tracking. Cookies for cross-site resources are now blocked by default across the board. This is a significant improvement for privacy since it removes any sense of exceptions or “a little bit of cross-site track
責任ある開発者のためのHTTPヘッダー | Yakst
安全で、誰にも手頃でアクセスしやすく、ユーザーを尊重したWebを作るためのHTTPヘッダーのプラクティス [UI/UX]原文 HTTP headers for the responsible developer - Twilio (English) 原文著者 Stefan Judis 原文公開日 2019-04-23 翻訳依頼者 翻訳者 meiq 翻訳レビュアー doublemarket msh5 原著者への翻訳報告 1475日前 メールで報告済み 編集 This article was originally published on twilio.com, and translated with the permission of Twilio and the author. 当記事の原文はtwilio.comにて公開されたものであり、Twilio社および原著者の許可を得て翻訳しています
Web における技術の解釈とエコシステムによる合意形成プロセスについて | blog.jxck.io
Intro 「ユーザが意図する挙動」とは何か。技術的に可能であるが「やらない方が良いこと」は、誰がどう決めるのか。 Web には仕様、実装、デプロイ、そしてユーザの利用とフィードバックによって、そうした合意がゆるやかに形成されていく仕組みがあると筆者は考えている。 しかし、これは明文化されているわけでもなく、その全体像を把握するのは一般には難しいだろう。 今回は、ちょうど何度目かの議論が再発している ping 属性を例に、この合意形成の概観について解説を試みる。 リンクの ping 属性 <a> には ping という属性があり、以下のように URL を指定する。 <a href=https:example.com ping=/path/to/report>example.com</a> HTML Standard - ping Attribute このリンクは、クリックすると https
HTTP キャッシュを使用して不要なネットワーク リクエストを防止する | Articles | web.dev
HTTP キャッシュを使用して不要なネットワーク リクエストを防止する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ネットワーク経由でのリソースの取得には時間とコストがかかります。 サイズの大きいレスポンスの場合、ブラウザとサーバーの間で何度もやり取りする必要があります。 重要なリソースがすべてダウンロードされるまで、ページは読み込まれません。 限られたモバイルデータ プランでサイトにアクセスしている場合、不要なネットワーク リクエストはすべてユーザーのお金の無駄使いです。 不要なネットワーク リクエストを回避するにはどうすればよいでしょうか。ブラウザの HTTP キャッシュは防御の最前線ですこれは必ずしも最も強力で柔軟なアプローチではなく、キャッシュに保存されたレスポンスの存続期間を制御することは限られていますが、効果的であり、すべてのブラウザでサポ
「サードパーティーCookie」は“悪”なのか？ 私がSafariを使う理由 (1/2) - ITmedia NEWS
「サードパーティーCookie」は“悪”なのか？ 私がSafariを使う理由：ITりてらしぃのすゝめ（1/2 ページ） バナー広告などでよく利用される「サードパーティーCookie」。かつてはこれを無効にしてもWebサイト閲覧に支障が出ることはありませんでしたが、最近はサイト利用に支障が出ることもあるようです。 私は最近、macOSで使うWebブラウザを「Google Chrome」からAppleの「Safari」に変えました。スマホはiPhoneなので、モバイルでもPCでもSafariを使っています。 現在のWebブラウザのシェアはChromeが圧倒的です。ネットの歴史を見ても、最大のシェアを持つWebブラウザに最適化されたWebサイトが主流になるのは当たり前でしょう。とはいえ、現在ではInternet Explorer（IE）のような異端なブラウザはあまりなく、ブラウザによって極端に仕
Clear-Site-Data Header | blog.jxck.io
Intro Clear-Site-Data Header の実装が進んでいる。 このヘッダについて解説する。 Clear-Site-Data 例えばログアウト処理を実施する場合は、レスポンスヘッダで Cookie を無効にするといった形で実現されるだろう。 しかし、最近では Cookie 以外にも多くのストレージがあり、アカウント特有のデータが保存されていることが多い。 local storage session storage indexed db service worker cache api これらを、ログアウト処理の中で各 API を適切に呼び出し、全て確実に削除するのは簡単ではない。 また、 httponly の Cookie や browser cache などは、 JS からの削除もできない。 SPA のように実装されている場合は、その状態を含めて初期化しないと不整合が発生
ブラウザキャッシュとレスポンスヘッダ - murankの日記
ブラウザキャッシュとレスポンスヘッダの関係を調べてみた。 調べたブラウザ Firefox 3.5 IE 6 Opera 9.64 Google Chrome 2.0.172.33 レスポンスヘッダ Expires Last-Modified Cache-Control Pragma 結論 以下のレスポンスヘッダを返す。 Expires、Last-Modified、Cache-Control、Pragma 以外のヘッダについては任意。 キャッシュさせたい場合 Cache-Control: private, max-age=有効期間の秒数 条件付GETをさせたい場合 Expires: 過去の時刻 Last-Modified: 過去の時刻 キャッシュさせたくない場合 Cache-Control: no-cache 調査方法 それぞれのブラウザで以下のレスポンスヘッダを返すページを読み込んだときに
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Internet Explorer 11 はサポートを終了しました。長年のご愛顧ありがとうございました。 - Windows Blog for Japan
