draft-grigorik-http-client-hints-03

<!DOCTYPE html> <html data-bs-theme="auto" lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title> draft-grigorik-http-client-hints-03 </title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://static.ietf.org/fonts/inter/import.css" rel="stylesheet"> <link href="https://static.ietf.org/fonts/noto-sans-mono/import.css" rel="stylesheet"> <link rel="stylesheet" href="https://static.ietf.org/dt/12.28.2/ietf/css/document_html_referenced.css"> <script type="module" crossorigin="" src="https://static.ietf.org/dt/12.28.2/assets/embedded-e653257c.js"></script> <link href="https://static.ietf.org/dt/12.28.2/assets/create-pinia-singleton-091c62b7.js" type="text/javascript" crossorigin="anonymous" rel="modulepreload" as="script" /> <link href="https://static.ietf.org/dt/12.28.2/assets/Scrollbar-7de50899.js" type="text/javascript" crossorigin="anonymous" rel="modulepreload" as="script" /> <script src="https://static.ietf.org/dt/12.28.2/ietf/js/document_html.js"></script> <script src="https://static.ietf.org/dt/12.28.2/ietf/js/theme.js"></script> <link rel="alternate" type="application/atom+xml" title="Document changes" href="/feed/document-changes/draft-grigorik-http-client-hints/"> <meta name="description" content="HTTP Client Hints (Internet-Draft, 2015)" > <link rel="apple-touch-icon" sizes="180x180" href="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-180.png"> <link rel="icon" sizes="32x32" href="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-32.png"> <link rel="icon" sizes="16x16" href="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-16.png"> <link rel="manifest" href="/site.webmanifest"> <link rel="mask-icon" href="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-mask.svg" color="#ffffff"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="theme-color" content="#ffffff"> <meta property="og:title" content="HTTP Client Hints"> <meta property="og:url" content="https://datatracker.ietf.org/doc/html/draft-grigorik-http-client-hints-03"> <link rel="canonical" href="https://datatracker.ietf.org/doc/html/draft-grigorik-http-client-hints-03"> <meta property="og:site_name" content="IETF Datatracker"> <meta property="og:description" content="An increasing diversity of Web-connected devices and software capabilities has created a need to deliver optimized content for each device. This specification defines a set of HTTP request header fields, colloquially known as Client Hints, to address this. They are intended to be used as input to proactive content negotiation; just as the Accept header allows clients to indicate what formats they prefer, Client Hints allow clients to indicate a list of device and agent specific preferences."> <meta property="og:type" content="article"> <meta property="og:image" content="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-card.png"> <meta property="og:image:alt" content="Logo of the IETF"> <meta property="article:section" content="IETF - Internet Engineering Task Force"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="1200"> <meta property="og:image:height" content="630"> <meta name="twitter:card" content="summary_large_image"> <meta property="article:author" content="Ilya Grigorik"> <style> .diff-form .select2-selection__rendered { direction: rtl; text-align: left; } </style> </head> <body> <noscript><iframe class="status" title="Site status" src="/status/latest"></iframe></noscript> <div class="vue-embed" data-component="Status"></div> <div class="btn-toolbar sidebar-toolbar position-fixed top-0 end-0 m-2 m-lg-3 d-print-none"> <div class="dropdown"> <button class="btn btn-outline-secondary btn-sm me-1 dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" aria-label="Toggle theme"> <i class="theme-icon-active bi bi-circle-half"></i> </button> <ul class="dropdown-menu" aria-labelledby="bd-theme"> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <i class="me-2 opacity-50 theme-icon bi bi-sun-fill"></i> Light<i class="bi bi-check2 ms-auto d-none"></i> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <i class="me-2 opacity-50 theme-icon bi bi-moon-stars-fill"></i> Dark<i class="bi bi-check2 ms-auto d-none"></i> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <i class="me-2 opacity-50 theme-icon bi bi-circle-half"></i> Auto<i class="bi bi-check2 ms-auto d-none"></i> </button> </li> </ul> </div> <button class="btn btn-outline-secondary btn-sm sidebar-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar" aria-expanded="true" aria-controls="sidebar" aria-label="Toggle metadata sidebar" title="Toggle metadata sidebar"> <i class="bi bi-arrow-bar-left sidebar-shown"></i> <i class="bi bi-arrow-bar-right sidebar-collapsed"></i> </button> </div> <nav class="navbar bg-light-subtle px-1 fixed-top d-print-none d-md-none"> <a class="nav-link ps-1" href="/doc/draft-grigorik-http-client-hints/"> draft-grigorik-http-client-hints-03 <br class="d-sm-none"> <span class="ms-sm-3 badge rounded-pill badge-draft"> None </span> </a> <button class="navbar-toggler p-1" type="button" data-bs-toggle="collapse" data-bs-target="#docinfo-collapse" aria-controls="docinfo-collapse" aria-expanded="false" aria-label="Show document information"> <span class="navbar-toggler-icon small"></span> </button> <div class="navbar-nav navbar-nav-scroll overscroll-none collapse pt-1" id="docinfo-collapse"> <div class="bg-light-subtle p-0"> <table class="table table-sm table-borderless small"> <tbody class="meta align-top"> <tr> <th scope="row"></th> <th scope="row">Title</th> <td class="edit"></td> <td>HTTP Client Hints</td> </tr> </tbody> <tbody class="meta align-top "> <tr> <th scope="row">Document</th> <th scope="row">Document type</th> <td class="edit"></td> <td> <span class="text-danger">Replaced Internet-Draft</span> (candidate for <a href="/wg/httpbis/about/">httpbis WG</a>) <div class="badge rounded-pill text-bg-warning"> Expired & archived </div> <div class="alert alert-warning small p-2 mt-2" role="alert"> This document is an Internet-Draft (I-D). Anyone may submit an I-D to the IETF. This I-D is <strong>not endorsed by the IETF</strong> and has <strong>no formal standing</strong> in the <a href="/doc/rfc2026/">IETF standards process</a>. </div> </td> </tr> <tr> <td></td> <th scope="row">Select version</th> <td class="edit"></td> <td> <ul class="revision-list pagination pagination-sm text-center flex-wrap my-0"> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-00" > 00 </a> </li> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-01" rel="nofollow"> 01 </a> </li> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-02" rel="nofollow"> 02 </a> </li> <li class="page-item active"> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-03" > 03 </a> </li> </ul> </td> </tr> <tr> <td></td> <th scope="row">Compare versions</th> <td class="edit"></td> <td> <form class="form-horizontal diff-form" action="https://author-tools.ietf.org/iddiff" method="get" target="_blank"> <select class="form-select form-select-sm mb-1 select2-field" data-max-entries="1" data-width="resolve" data-allow-clear="false" data-minimum-input-length="0" aria-label="From revision" name="url1"> <option value="draft-grigorik-http-client-hints-03"> draft-grigorik-http-client-hints-03 </option> <option value="draft-grigorik-http-client-hints-02" selected> draft-grigorik-http-client-hints-02 </option> <option value="draft-grigorik-http-client-hints-01"> draft-grigorik-http-client-hints-01 </option> <option value="draft-grigorik-http-client-hints-00"> draft-grigorik-http-client-hints-00 </option> </select> <select class="form-select form-select-sm mb-1 select2-field" data-max-entries="1" data-width="resolve" data-allow-clear="false" data-minimum-input-length="0" aria-label="To revision" name="url2"> <option value="draft-grigorik-http-client-hints-03" selected> draft-grigorik-http-client-hints-03 </option> <option value="draft-grigorik-http-client-hints-02"> draft-grigorik-http-client-hints-02 </option> <option value="draft-grigorik-http-client-hints-01"> draft-grigorik-http-client-hints-01 </option> <option value="draft-grigorik-http-client-hints-00"> draft-grigorik-http-client-hints-00 </option> </select> <button type="submit" class="btn btn-primary btn-sm" value="--html" name="difftype"> Side-by-side </button> <button type="submit" class="btn btn-primary btn-sm" value="--hwdiff" name="difftype"> Inline </button> </form> </td> </tr> <tr> <td></td> <th scope="row">Author</th> <td class="edit"> </td> <td> <span ><a title="Datatracker profile of Ilya Grigorik" href="/person/igrigorik@google.com" >Ilya Grigorik</a> <a href="mailto:igrigorik%40google.com" aria-label="Compose email to igrigorik@google.com" title="Compose email to igrigorik@google.com"> <i class="bi bi-envelope"></i></a></span> <br> <a class="btn btn-primary btn-sm mt-1" href="mailto:draft-grigorik-http-client-hints@ietf.org?subject=draft-grigorik-http-client-hints" title="Send email to the document authors">Email authors</a> </td> </tr> <tr> <td></td> <th scope="row"> Replaced by </th> <td class="edit"> </td> <td> <a href="/doc/html/draft-ietf-httpbis-client-hints" title="HTTP Client Hints">draft-ietf-httpbis-client-hints</a> </td> </tr> <tr> <td></td> <th scope="row"> RFC stream </th> <td class="edit"> </td> <td > <img alt="IETF Logo" class="d-lm-none w-25 mt-1" src="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-white.svg" > <img alt="IETF Logo" class="d-dm-none w-25 mt-1" src="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor.svg" > </td> </tr> <tr> <td></td> <th scope="row"> Intended RFC status </th> <td class="edit"> </td> <td> <span class="text-body-secondary"> (None) </span> </td> </tr> <tr> <td></td> <th scope="row"> Other formats </th> <td class="edit"> </td> <td> <div class="buttonlist"> <a class="btn btn-primary btn-sm" target="_blank" href="https://www.ietf.org/archive/id/draft-grigorik-http-client-hints-03.txt"> <i class="bi bi-file-text"></i> txt </a> <a class="btn btn-primary btn-sm" target="_blank" href="/doc/draft-grigorik-http-client-hints/03/bibtex/"> <i class="bi bi-file-ruled"></i> bibtex </a> <a class="btn btn-primary btn-sm" target="_blank" href="/doc/bibxml3/draft-grigorik-http-client-hints-03.xml"> <i class="bi bi-file-code"></i> bibxml </a> </div> </td> </tr> <tr> <td> </td> <th scope="row"> Additional resources </th> <td class="edit"> </td> <td> <a href="http://lists.w3.org/Archives/Public/ietf-http-wg/"> Mailing list discussion </a> </td> </tr> </tbody> <tr> <th scope="row"></th> <th scope="row"></th> <td class="edit"></td> <td> <a class="btn btn-sm btn-warning mb-3" target="_blank" href="https://github.com/ietf-tools/datatracker/issues/new/choose"> Report a bug <i class="bi bi-bug"></i> </a> </td> </tr> </table> </div> </div> </nav> <div class="row g-0"> <div class="col-md-9 d-flex justify-content-center lh-sm" data-bs-spy="scroll" data-bs-target="#toc-nav" data-bs-smooth-scroll="true" tabindex="0" id="content"> <div class="rfcmarkup"> <br class="noprint">  <div class="rfcmarkup"><pre>HTTP Working Group I. Grigorik Internet-Draft Google Intended status: Informational August 24, 2015 Expires: February 25, 2016 <span class="h1">HTTP Client Hints</span> <span class="h1">draft-grigorik-http-client-hints-03</span> Abstract An increasing diversity of Web-connected devices and software capabilities has created a need to deliver optimized content for each device. This specification defines a set of HTTP request header fields, colloquially known as Client Hints, to address this. They are intended to be used as input to proactive content negotiation; just as the Accept header allows clients to indicate what formats they prefer, Client Hints allow clients to indicate a list of device and agent specific preferences. Status of this Memo This Internet-Draft is submitted in full conformance with the provisions of <a href="/doc/html/bcp78">BCP 78</a> and <a href="/doc/html/bcp79">BCP 79</a>. Internet-Drafts are working documents of the Internet Engineering Task Force (IETF). Note that other groups may also distribute working documents as Internet-Drafts. The list of current Internet- Drafts is at <a href="https://datatracker.ietf.org/drafts/current/">http://datatracker.ietf.org/drafts/current/</a>. Internet-Drafts are draft documents valid for a maximum of six months and may be updated, replaced, or obsoleted by other documents at any time. It is inappropriate to use Internet-Drafts as reference material or to cite them other than as "work in progress." This Internet-Draft will expire on February 25, 2016. Copyright Notice Copyright (c) 2015 IETF Trust and the persons identified as the document authors. All rights reserved. This document is subject to <a href="/doc/html/bcp78">BCP 78</a> and the IETF Trust's Legal Provisions Relating to IETF Documents (<a href="http://trustee.ietf.org/license-info">http://trustee.ietf.org/license-info</a>) in effect on the date of publication of this document. Please review these documents <span class="grey">Grigorik Expires February 25, 2016 [Page 1]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-2" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> carefully, as they describe your rights and restrictions with respect to this document. Code Components extracted from this document must include Simplified BSD License text as described in Section 4.e of the Trust Legal Provisions and are provided without warranty as described in the Simplified BSD License. Table of Contents <a href="#section-1">1</a>. Introduction . . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-3">3</a> <a href="#section-1.1">1.1</a>. Notational Conventions . . . . . . . . . . . . . . . . . . <a href="#page-3">3</a> <a href="#section-2">2</a>. Client Hint Request Header Fields . . . . . . . . . . . . . . <a href="#page-4">4</a> <a href="#section-2.1">2.1</a>. Sending Client Hints . . . . . . . . . . . . . . . . . . . <a href="#page-4">4</a> <a href="#section-2.2">2.2</a>. Server Processing of Client Hints . . . . . . . . . . . . <a href="#page-4">4</a> <a href="#section-2.2.1">2.2.1</a>. Advertising Support for Client Hints . . . . . . . . . <a href="#page-4">4</a> <a href="#section-2.2.2">2.2.2</a>. Interaction with Caches . . . . . . . . . . . . . . . <a href="#page-5">5</a> <a href="#section-3">3</a>. The DPR Client Hint . . . . . . . . . . . . . . . . . . . . . <a href="#page-6">6</a> <a href="#section-3.1">3.1</a>. Confirming Selected DPR . . . . . . . . . . . . . . . . . <a href="#page-6">6</a> <a href="#section-4">4</a>. The Width Client Hint . . . . . . . . . . . . . . . . . . . . <a href="#page-6">6</a> <a href="#section-5">5</a>. The Viewport-Width Client Hint . . . . . . . . . . . . . . . . <a href="#page-7">7</a> <a href="#section-6">6</a>. The Downlink Client Hint . . . . . . . . . . . . . . . . . . . <a href="#page-7">7</a> <a href="#section-7">7</a>. The Save-Data Hint . . . . . . . . . . . . . . . . . . . . . . <a href="#page-7">7</a> <a href="#section-8">8</a>. Examples . . . . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-7">7</a> <a href="#section-9">9</a>. Security Considerations . . . . . . . . . . . . . . . . . . . <a href="#page-8">8</a> <a href="#section-10">10</a>. IANA Considerations . . . . . . . . . . . . . . . . . . . . . <a href="#page-9">9</a> <a href="#section-11">11</a>. Normative References . . . . . . . . . . . . . . . . . . . . . <a href="#page-10">10</a> Author's Address . . . . . . . . . . . . . . . . . . . . . . . . . <a href="#page-10">10</a> <span class="grey">Grigorik Expires February 25, 2016 [Page 2]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-3" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> <span class="h2"><a class="selflink" id="section-1" href="#section-1">1</a>. Introduction</span> There are thousands of different devices accessing the web, each with different device capabilities and preference information. These device capabilities include hardware and software characteristics, as well as dynamic user and client preferences. One way to infer some of these capabilities is through User-Agent (UA) detection against an established database of client signatures. However, this technique requires acquiring such a database, integrating it into the serving path, and keeping it up to date. However, even once this infrastructure is deployed, UA sniffing has numerous limitations: o UA detection cannot reliably identify all static variables o UA detection cannot infer any dynamic client preferences o UA detection requires an external device database o UA detection is not cache friendly A popular alternative strategy is to use HTTP cookies to communicate some information about the client. However, this approach is also not cache friendly, bound by same origin policy, and imposes additional client-side latency by requiring JavaScript execution to create and manage HTTP cookies. This document defines a set of new request header fields that allow the client to perform proactive content negotiation [<a href="/doc/html/rfc7231" title=""Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content"">RFC7231</a>] by indicating a list of device and agent specific preferences, through a mechanism similar to the Accept header which is used to indicate preferred response formats. Client Hints does not supersede or replace the User-Agent header field. Existing device detection mechanisms can continue to use both mechanisms if necessary. By advertising its capabilities within a request header field, Client Hints allows for cache friendly and proactive content negotiation. <span class="h3"><a class="selflink" id="section-1.1" href="#section-1.1">1.1</a>. Notational Conventions</span> The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in [<a href="/doc/html/rfc2119" title=""Key words for use in RFCs to Indicate Requirement Levels"">RFC2119</a>]. This document uses the Augmented Backus-Naur Form (ABNF) notation of [<a href="/doc/html/rfc5234" title=""Augmented BNF for Syntax Specifications: ABNF"">RFC5234</a>] with the list rule extension defined in [<a href="/doc/html/rfc7230" title=""Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing"">RFC7230</a>], <a href="#appendix-B">Appendix</a> <a href="#appendix-B">B</a>. It includes by reference the DIGIT rule from [<a href="/doc/html/rfc5234" title=""Augmented BNF for Syntax Specifications: ABNF"">RFC5234</a>]; the OWS, field-name and quoted-string rules from [<a href="/doc/html/rfc7230" title=""Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing"">RFC7230</a>]; and the parameter rule from [<a href="/doc/html/rfc7231" title=""Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content"">RFC7231</a>]. <span class="grey">Grigorik Expires February 25, 2016 [Page 3]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-4" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> <span class="h2"><a class="selflink" id="section-2" href="#section-2">2</a>. Client Hint Request Header Fields</span> A Client Hint request header field is a HTTP header field that is used by HTTP clients to indicate configuration data that can be used by the server to select an appropriate response. Each one conveys a list of client preferences that the server can use to adapt and optimize the response. This document defines a selection of Client Hint request header fields, and can be referenced by other specifications wishing to use the same syntax and processing model. <span class="h3"><a class="selflink" id="section-2.1" href="#section-2.1">2.1</a>. Sending Client Hints</span> Clients control which Client Hint headers and their respective header fields are communicated, based on their default settings, user configuration and/or preferences. The user may be given the choice to enable, disable, or override specific hints. The client and server, or an intermediate proxy, may use an opt-in mechanism to negotiate which fields should be reported to allow for efficient content adaption. <span class="h3"><a class="selflink" id="section-2.2" href="#section-2.2">2.2</a>. Server Processing of Client Hints</span> Servers MAY respond with an optimized response based on one or more received hints from the client. When doing so, and if the resource is cacheable, the server MUST also emit a Vary response header field ([<a href="/doc/html/rfc7234" title=""Hypertext Transfer Protocol (HTTP/1.1): Caching"">RFC7234</a>]), and optionally Key ([<a href="#ref-I-D.fielding-http-key">I-D.fielding-http-key</a>]), to indicate which hints were used and whether the selected response is appropriate for a later request. Further, depending on the used hint, the server MAY also need to emit additional response header fields to confirm the property of the response, such that the client can adjust its processing. For example, this specification defines "Content-DPR" response header field that MUST be returned by the server when the "DPR" hint is used to select the response. <span class="h4"><a class="selflink" id="section-2.2.1" href="#section-2.2.1">2.2.1</a>. Advertising Support for Client Hints</span> Servers can advertise support for Client Hints using the Accept-CH header or an equivalent HTML meta element with http-equiv attribute. Accept-CH = #token For example: <span class="grey">Grigorik Expires February 25, 2016 [Page 4]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-5" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> Accept-CH: DPR, Width, Viewport-Width, Downlink When a client receives Accept-CH, it SHOULD append the Client Hint headers that match the advertised field-values. For example, based on Accept-CH example above, the client would append DPR, Width, Viewport-Width, and Downlink headers to all subsequent requests. <span class="h4"><a class="selflink" id="section-2.2.2" href="#section-2.2.2">2.2.2</a>. Interaction with Caches</span> When selecting an optimized response based on one or more Client Hints, and if the resource is cacheable, the server MUST also emit a Vary response header field ([<a href="/doc/html/rfc7234" title=""Hypertext Transfer Protocol (HTTP/1.1): Caching"">RFC7234</a>]) to indicate which hints were used and whether the selected response is appropriate for a later request. Vary: DPR Above example indicates that the cache key should be based on the DPR header. Vary: DPR, Width, Downlink Above example indicates that the cache key should be based on the DPR, Width, and Downlink headers. Client Hints MAY be combined with Key ([<a href="#ref-I-D.fielding-http-key">I-D.fielding-http-key</a>]) to enable fine-grained control of the cache key for improved cache efficiency. For example, the server MAY return the following set of instructions: Key: DPR;r=[1.5:] Above examples indicates that the cache key should be based on the DPR header, and the resource should be cached and made available for any client whose device pixel ratio is 1.5, or higher. Key: Width;r=[320:640] Above example indicates that the cache key should be based on the Width header, and the resource should be cached and made available for any request whose display width falls between 320 and 640px. Key: Downlink;r=[0.384:] Above example indicates that the cache key should be based on the Downlink header, and the resource should be cached and made available for any request whose advertised maxim downlink speed is 0.384Mbps (GPRS EDGE), or higher. <span class="grey">Grigorik Expires February 25, 2016 [Page 5]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-6" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> <span class="h2"><a class="selflink" id="section-3" href="#section-3">3</a>. The DPR Client Hint</span> The "DPR" header field is a number that, in requests, indicates the client's current Device Pixel Ratio (DPR), which is the ratio of physical pixels over CSS px of the layout viewport on the device. DPR = 1*DIGIT [ "." 1*DIGIT ] If DPR occurs in a message more than once, the last value overrides all previous occurrences. <span class="h3"><a class="selflink" id="section-3.1" href="#section-3.1">3.1</a>. Confirming Selected DPR</span> The "Content-DPR" header field is a number that indicates the ratio between physical pixels over CSS px of the selected image response. Content-DPR = 1*DIGIT [ "." 1*DIGIT ] DPR ratio affects the calculation of intrinsic size of image resources on the client - i.e. typically, the client automatically scales the natural size of the image by the DPR ratio to derive its display dimensions. As a result, the server must explicitly indicate the DPR of the selected image response whenever the DPR hint is used, and the client must use the DPR value returned by the server to perform its calculations. In case the server returned Content-DPR value contradicts previous client-side DPR indication, the server returned value must take precedence. Note that DPR confirmation is only required for image responses, and the server does not need to confirm the resource width as this value can be derived from the resource itself once it is decoded by the client. If Content-DPR occurs in a message more than once, the last value overrides all previous occurrences. <span class="h2"><a class="selflink" id="section-4" href="#section-4">4</a>. The Width Client Hint</span> The "Width" header field is a number that, in requests, indicates the resource width in CSS px (e.g. display width of an image). The provided CSS px value is a number rounded to the largest smallest following integer (i.e. ceiling value). Width = 1*DIGIT If the resource width is not known at the time of the request or the resource does not have a display width, the Width header field may be <span class="grey">Grigorik Expires February 25, 2016 [Page 6]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-7" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> omitted. If Width occurs in a message more than once, the last value overrides all previous occurrences. <span class="h2"><a class="selflink" id="section-5" href="#section-5">5</a>. The Viewport-Width Client Hint</span> The "Viewport-Width" header field is a number that, in requests, indicates the layout viewport width in CSS px. The provided CSS px value is a number rounded to the largest smallest following integer (i.e. ceiling value). Viewport-Width = 1*DIGIT If Viewport-Width occurs in a message more than once, the last value overrides all previous occurrences. <span class="h2"><a class="selflink" id="section-6" href="#section-6">6</a>. The Downlink Client Hint</span> The "Downlink" header field is a number that, in requests, indicates the client's maximum downlink speed in megabits per second (Mbps), as defined by the "downlinkMax" attribute in the W3C Network Information API. Downlink = 1*DIGIT [ "." 1*DIGIT ] If Downlink occurs in a message more than once, the minimum value should be used to override other occurrences. <span class="h2"><a class="selflink" id="section-7" href="#section-7">7</a>. The Save-Data Hint</span> The "Save-Data" header field is a boolean that, in requests, indicates client's preference for reduced data usage, due to high transfer costs, slow connection speeds, or other reasons. Save-Data = 1 The boolean is a signal indicating explicit user opt-in into a reduced data usage mode on the client, and when communicated to origins allows them to deliver alternate content honoring such preference - e.g. smaller image and video resources, alternate markup, and so on. <span class="h2"><a class="selflink" id="section-8" href="#section-8">8</a>. Examples</span> For example, given the following request headers: <span class="grey">Grigorik Expires February 25, 2016 [Page 7]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-8" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> DPR: 2.0 Width: 160 Viewport-Width: 320 The server knows that the device pixel ratio is 2.0, that the intended display width of requested resource is 160 CSS px, and that the viewport width is 320 CSS px. If the server uses above hints to perform resource selection for an image asset, it must confirm its selection via the Content-DPR response header to allow the client to calculate the appropriate intrinsic size of the image response. The server does not need to confirm resource width, only the ratio between physical pixels and CSS px of the selected image resource: Content-DPR: 1.0 The Content-DPR response header indicates to the client that the server has selected resource with DPR ratio of 1.0. The client may use this information to perform additional processing on the resource - for example, calculate the appropriate intrinsic size of the image resource such that it is displayed at the correct resolution. Alternatively, the server could select an alternate resource based on the maximum downlink speed advertised in the request headers: Downlink: 0.384 The server knows that the client's maximum downlink speed is 0.384Mbps (GPRS EDGE), and it may use this information to select an optimized resource - for example, an alternate image asset, stylesheet, HTML document, media stream, and so on. <span class="h2"><a class="selflink" id="section-9" href="#section-9">9</a>. Security Considerations</span> Client Hints defined in this specification do not expose any new information about the user's environment beyond what is already available to, and may be communicated by, the application at runtime via JavaScript - e.g. viewport and image display width, device pixel ratio, and so on. However, implementors should consider the privacy implications of various methods to enable delivery of Client Hints - see "Sending Client Hints" section. For example, sending Client Hints on all requests may make information about the user's environment available to origins that otherwise did not have access to this data (e.g. origins hosting non-script resources), which may or not be the <span class="grey">Grigorik Expires February 25, 2016 [Page 8]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-9" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> desired outcome. The implementors may want to provide mechanisms to control such behavior via explicit opt-in, or other mechanisms. Similarly, the implementors should consider how and whether delivery of Client Hints is affected when the user is in "incognito" or similar privacy mode. <span class="h2"><a class="selflink" id="section-10" href="#section-10">10</a>. IANA Considerations</span> This document defines the "Accept-CH", "DPR", "Width", and "Downlink" HTTP request fields, "Content-DPR" HTTP response field, and registers them in the Permanent Message Header Fields registry. o Header field name: DPR o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Width o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Viewport-Width o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Downlink o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Content-DPR o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Accept-CH o Applicable protocol: HTTP o Status: standard <span class="grey">Grigorik Expires February 25, 2016 [Page 9]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-10" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints o Header field name: Save-Data o Applicable protocol: HTTP o Status: standard o Author/Change controller: Ilya Grigorik, ilya@igvita.com o Specification document(s): [this document] o Related information: for Client Hints <span class="h2"><a class="selflink" id="section-11" href="#section-11">11</a>. Normative References</span> [<a id="ref-I-D.fielding-http-key">I-D.fielding-http-key</a>] Fielding, R. and M. Nottingham, "The Key HTTP Response Header Field", <a href="/doc/html/draft-fielding-http-key-02">draft-fielding-http-key-02</a> (work in progress), February 2013. [<a id="ref-RFC2119">RFC2119</a>] Bradner, S., "Key words for use in RFCs to Indicate Requirement Levels", <a href="/doc/html/bcp14">BCP 14</a>, <a href="/doc/html/rfc2119">RFC 2119</a>, DOI 10.17487/ <a href="/doc/html/rfc2119">RFC2119</a>, March 1997, <<a href="http://www.rfc-editor.org/info/rfc2119">http://www.rfc-editor.org/info/rfc2119</a>>. [<a id="ref-RFC5234">RFC5234</a>] Crocker, D., Ed. and P. Overell, "Augmented BNF for Syntax Specifications: ABNF", STD 68, <a href="/doc/html/rfc5234">RFC 5234</a>, DOI 10.17487/ <a href="/doc/html/rfc5234">RFC5234</a>, January 2008, <<a href="http://www.rfc-editor.org/info/rfc5234">http://www.rfc-editor.org/info/rfc5234</a>>. [<a id="ref-RFC7230">RFC7230</a>] Fielding, R., Ed. and J. Reschke, Ed., "Hypertext Transfer Protocol (HTTP/1.1): Message Syntax and Routing", <a href="/doc/html/rfc7230">RFC 7230</a>, DOI 10.17487/RFC7230, June 2014, <<a href="http://www.rfc-editor.org/info/rfc7230">http://www.rfc-editor.org/info/rfc7230</a>>. [<a id="ref-RFC7231">RFC7231</a>] Fielding, R., Ed. and J. Reschke, Ed., "Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content", <a href="/doc/html/rfc7231">RFC 7231</a>, DOI 10.17487/RFC7231, June 2014, <<a href="http://www.rfc-editor.org/info/rfc7231">http://www.rfc-editor.org/info/rfc7231</a>>. [<a id="ref-RFC7234">RFC7234</a>] Fielding, R., Ed., Nottingham, M., Ed., and J. Reschke, Ed., "Hypertext Transfer Protocol (HTTP/1.1): Caching", <a href="/doc/html/rfc7234">RFC 7234</a>, DOI 10.17487/RFC7234, June 2014, <<a href="http://www.rfc-editor.org/info/rfc7234">http://www.rfc-editor.org/info/rfc7234</a>>. <span class="grey">Grigorik Expires February 25, 2016 [Page 10]</span></pre> <hr class='noprint'/><pre class='newpage'><span id="page-11" ></span> <span class="grey">Internet-Draft HTTP Client Hints August 2015</span> Author's Address Ilya Grigorik Google Email: ilya@igvita.com URI: <a href="https://www.igvita.com/">https://www.igvita.com/</a> Grigorik Expires February 25, 2016 [Page 11] </pre></div> </div> </div> <div class="d-print-none col-md-3 bg-light-subtle collapse show" id="sidebar"> <div class="position-fixed border-start sidebar overflow-scroll overscroll-none no-scrollbar"> <div class="d-flex flex-column vh-100 pt-2 pt-lg-3 ps-3 pl-md-2 pl-lg-3"> <div> <a class="btn btn-primary btn-sm" href="/doc/draft-grigorik-http-client-hints/">Datatracker</a> <p class="fw-bold pt-2"> draft-grigorik-http-client-hints-03 <br> <span class="text-danger">Replaced Internet-Draft</span> (candidate for <a href="/wg/httpbis/about/">httpbis WG</a>) </p> </div> <ul class="nav nav-tabs nav-fill small me-2" role="tablist"> <li class="nav-item" role="presentation" title="Document information"> <button class="nav-link px-2" id="docinfo-tab" data-bs-toggle="tab" data-bs-target="#docinfo-tab-pane" type="button" role="tab" aria-controls="docinfo-tab-pane" aria-selected="true"> <i class="bi bi-info-circle"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Info</span> </button> </li> <li class="nav-item" role="presentation" title="Table of contents"> <button class="nav-link px-2" id="toc-tab" data-bs-toggle="tab" data-bs-target="#toc-tab-pane" type="button" role="tab" aria-controls="toc-tab-pane" aria-selected="false"> <i class="bi bi-list-ol"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Contents</span> </button> </li> <li class="nav-item" role="presentation" title="Preferences"> <button class="nav-link px-2" id="pref-tab" data-bs-toggle="tab" data-bs-target="#pref-tab-pane" type="button" role="tab" aria-controls="pref-tab-pane" aria-selected="false"> <i class="bi bi-gear"></i><span class="d-none d-md-block d-xl-inline ms-xl-1">Prefs</span> </button> </li> </ul> <div class="overflow-auto tab-content pt-2 me-2"> <div class="tab-pane" id="docinfo-tab-pane" role="tabpanel" aria-labelledby="docinfo-tab" tabindex="0"> <table class="table table-sm table-borderless"> <tbody class="meta align-top "> <tr> <th scope="row">Document</th> <th scope="row">Document type</th> <td class="edit"></td> <td> <span class="text-danger">Replaced Internet-Draft</span> (candidate for <a href="/wg/httpbis/about/">httpbis WG</a>) <div class="badge rounded-pill text-bg-warning"> Expired & archived </div> <div class="alert alert-warning small p-2 mt-2" role="alert"> This document is an Internet-Draft (I-D). Anyone may submit an I-D to the IETF. This I-D is <strong>not endorsed by the IETF</strong> and has <strong>no formal standing</strong> in the <a href="/doc/rfc2026/">IETF standards process</a>. </div> </td> </tr> <tr> <td></td> <th scope="row">Select version</th> <td class="edit"></td> <td> <ul class="revision-list pagination pagination-sm text-center flex-wrap my-0"> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-00" > 00 </a> </li> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-01" rel="nofollow"> 01 </a> </li> <li class="page-item "> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-02" rel="nofollow"> 02 </a> </li> <li class="page-item active"> <a class="page-link" href="/doc/html/draft-grigorik-http-client-hints-03" > 03 </a> </li> </ul> </td> </tr> <tr> <td></td> <th scope="row">Compare versions</th> <td class="edit"></td> <td> <form class="form-horizontal diff-form" action="https://author-tools.ietf.org/iddiff" method="get" target="_blank"> <select class="form-select form-select-sm mb-1 select2-field" data-max-entries="1" data-width="resolve" data-allow-clear="false" data-minimum-input-length="0" aria-label="From revision" name="url1"> <option value="draft-grigorik-http-client-hints-03"> draft-grigorik-http-client-hints-03 </option> <option value="draft-grigorik-http-client-hints-02" selected> draft-grigorik-http-client-hints-02 </option> <option value="draft-grigorik-http-client-hints-01"> draft-grigorik-http-client-hints-01 </option> <option value="draft-grigorik-http-client-hints-00"> draft-grigorik-http-client-hints-00 </option> </select> <select class="form-select form-select-sm mb-1 select2-field" data-max-entries="1" data-width="resolve" data-allow-clear="false" data-minimum-input-length="0" aria-label="To revision" name="url2"> <option value="draft-grigorik-http-client-hints-03" selected> draft-grigorik-http-client-hints-03 </option> <option value="draft-grigorik-http-client-hints-02"> draft-grigorik-http-client-hints-02 </option> <option value="draft-grigorik-http-client-hints-01"> draft-grigorik-http-client-hints-01 </option> <option value="draft-grigorik-http-client-hints-00"> draft-grigorik-http-client-hints-00 </option> </select> <button type="submit" class="btn btn-primary btn-sm" value="--html" name="difftype"> Side-by-side </button> <button type="submit" class="btn btn-primary btn-sm" value="--hwdiff" name="difftype"> Inline </button> </form> </td> </tr> <tr> <td></td> <th scope="row">Author</th> <td class="edit"> </td> <td> <span ><a title="Datatracker profile of Ilya Grigorik" href="/person/igrigorik@google.com" >Ilya Grigorik</a> <a href="mailto:igrigorik%40google.com" aria-label="Compose email to igrigorik@google.com" title="Compose email to igrigorik@google.com"> <i class="bi bi-envelope"></i></a></span> <br> <a class="btn btn-primary btn-sm mt-1" href="mailto:draft-grigorik-http-client-hints@ietf.org?subject=draft-grigorik-http-client-hints" title="Send email to the document authors">Email authors</a> </td> </tr> <tr> <td></td> <th scope="row"> Replaced by </th> <td class="edit"> </td> <td> <a href="/doc/html/draft-ietf-httpbis-client-hints" title="HTTP Client Hints">draft-ietf-httpbis-client-hints</a> </td> </tr> <tr> <td></td> <th scope="row"> RFC stream </th> <td class="edit"> </td> <td > <img alt="IETF Logo" class="d-lm-none w-25 mt-1" src="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor-white.svg" > <img alt="IETF Logo" class="d-dm-none w-25 mt-1" src="https://static.ietf.org/dt/12.28.2/ietf/images/ietf-logo-nor.svg" > </td> </tr> <tr> <td></td> <th scope="row"> Intended RFC status </th> <td class="edit"> </td> <td> <span class="text-body-secondary"> (None) </span> </td> </tr> <tr> <td></td> <th scope="row"> Other formats </th> <td class="edit"> </td> <td> <div class="buttonlist"> <a class="btn btn-primary btn-sm" target="_blank" href="https://www.ietf.org/archive/id/draft-grigorik-http-client-hints-03.txt"> <i class="bi bi-file-text"></i> txt </a> <a class="btn btn-primary btn-sm" target="_blank" href="/doc/draft-grigorik-http-client-hints/03/bibtex/"> <i class="bi bi-file-ruled"></i> bibtex </a> <a class="btn btn-primary btn-sm" target="_blank" href="/doc/bibxml3/draft-grigorik-http-client-hints-03.xml"> <i class="bi bi-file-code"></i> bibxml </a> </div> </td> </tr> <tr> <td> </td> <th scope="row"> Additional resources </th> <td class="edit"> </td> <td> <a href="http://lists.w3.org/Archives/Public/ietf-http-wg/"> Mailing list discussion </a> </td> </tr> </tbody> </table> <a class="btn btn-sm btn-warning mb-3" target="_blank" href="https://github.com/ietf-tools/datatracker/issues/new/choose"> Report a datatracker bug <i class="bi bi-bug"></i> </a> </div> <div class="tab-pane mb-5" id="toc-tab-pane" role="tabpanel" aria-labelledby="toc-tab" tabindex="0"> <nav class="nav nav-pills flex-column small" id="toc-nav"> </nav> </div> <div class="tab-pane mb-5 small" id="pref-tab-pane" role="tabpanel" aria-labelledby="pref-tab" tabindex="0"> <label class="form-label fw-bold mb-2">Show sidebar by default</label> <div class="btn-group-vertical btn-group-sm d-flex" role="group"> <input type="radio" class="btn-check" name="sidebar" id="on-radio"> <label class="btn btn-outline-primary" for="on-radio">Yes</label> <input type="radio" class="btn-check" name="sidebar" id="off-radio"> <label class="btn btn-outline-primary" for="off-radio">No</label> </div> <label class="form-label fw-bold mt-4 mb-2">Tab to show by default</label> <div class="btn-group-vertical btn-group-sm d-flex" role="group"> <input type="radio" class="btn-check" name="deftab" id="docinfo-radio"> <label class="btn btn-outline-primary" for="docinfo-radio"> <i class="bi bi-info-circle me-1"></i>Info </label> <input type="radio" class="btn-check" name="deftab" id="toc-radio"> <label class="btn btn-outline-primary" for="toc-radio"> <i class="bi bi-list-ol me-1"></i>Contents </label> </div> <label class="form-label fw-bold mt-4 mb-2">HTMLization configuration</label> <div class="btn-group-vertical btn-group-sm d-flex" role="group"> <input type="radio" class="btn-check" name="htmlconf" id="txt-radio"> <label class="btn btn-outline-primary" for="txt-radio" title="This is the traditional HTMLization method."> <i class="bi bi-badge-sd me-1"></i>HTMLize the plaintext </label> <input type="radio" class="btn-check" name="htmlconf" id="html-radio"> <label class="btn btn-outline-primary" for="html-radio" title="This is the modern HTMLization method."> <i class="bi bi-badge-hd me-1"></i>Plaintextify the HTML </label> </div> <label class="form-label fw-bold mt-4 mb-2" for="ptsize">Maximum font size</label> <input type="range" class="form-range" min="7" max="16" id="ptsize" oninput="ptdemo.value = ptsize.value"> <label class="form-label fw-bold mt-4 mb-2">Page dependencies</label> <div class="btn-group-vertical btn-group-sm d-flex" role="group"> <input type="radio" class="btn-check" name="pagedeps" id="inline-radio"> <label class="btn btn-outline-primary" for="inline-radio" title="Generate larger, standalone web pages that do not require network access to render."> <i class="bi bi-box me-1"></i>Inline </label> <input type="radio" class="btn-check" name="pagedeps" id="reference-radio"> <label class="btn btn-outline-primary" for="reference-radio" title="Generate regular web pages that require network access to render."> <i class="bi bi-link-45deg me-1"></i>Reference </label> </div> <label class="form-label fw-bold mt-4 mb-2">Citation links</label> <div class="btn-group-vertical btn-group-sm d-flex" role="group"> <input type="radio" class="btn-check" name="reflinks" id="refsection-radio"> <label class="btn btn-outline-primary" for="refsection-radio" title="Citation links go to the reference section."> <i class="bi bi-arrow-clockwise"></i> Go to reference section </label> <input type="radio" class="btn-check" name="reflinks" id="citation-radio"> <label class="btn btn-outline-primary" for="citation-radio" title="Citation links go directly to the cited document."> <i class="bi bi-link-45deg me-1"></i>Go to linked document </label> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> var _paq = window._paq || []; _paq.push(['disableCookies']); _paq.push(['trackPageView']); _paq.push(['enableLinkTracking']); (function() { var u="//analytics.ietf.org/"; _paq.push(['setTrackerUrl', u+'matomo.php']); _paq.push(['setSiteId', 7]); var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0]; g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s); })(); </script> <noscript><p><img src="//analytics.ietf.org/piwik.php?idsite=7" style="border:0;" alt="" /></p></noscript> <script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'8e740f0d3b2389b8',t:'MTczMjM5NTMxMi4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body> </html>

CINXE.COM

draft-grigorik-http-client-hints-03