javascript - Outlook Online 如何下载附件？

Question

我试图了解从电子邮件下载多个附件时 Office365 Outlook Online 中的“全部下载”按钮如何工作。

该按钮是“按钮”类型。它似乎不是表单的一部分。它有一些“点击”事件监听器(显然使用 React)，但我无法理解这些监听器是否以某种方式导致下载触发。

<button type="button" class="ms-Button ms-Button--action ms-Button--command _36CbeMUul160_BaOc004Od _25PDIRwPTbbCvgI4wMWgWF root-133" data-is-focusable="true">
  <span class="ms-Button-flexContainer flexContainer-78" data-automationid="splitbuttonprimary">
    <span class="ms-Button-textContainer textContainer-79">
      <span class="ms-Button-label label-49" id="id__875">Download all</span>
    </span>
  </span>
</button>

当我点击它时，Chrome 在“网络”选项卡中根本不显示网络事件。 Firefox 将其显示为 GET 请求，并且它看起来不像 XmlHttpRequest(没有 Origin header 等):

请求:

URL:https://outlook.office365.com/owa//service.svc/s/GetAllAttachmentsAsZip?id=...&X-OWA-CANARY=...
Request Method:GET
Remote Address:40.97.221.114:443
Status Code:
200
Version:HTTP/1.1
Referrer Policy:no-referrer

Host: outlook.office365.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:72.0) Gecko/20100101 Firefox/72.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
DNT: 1
Connection: keep-alive
Cookie: ...
Upgrade-Insecure-Requests: 1

回应:

HTTP/1.1 200 OK
Cache-Control: private
Transfer-Encoding: chunked
Content-Type: application/zip; authoritative=true;
Content-Encoding: gzip
Expires: Mon, 20 Jan 2020 02:34:12 +0000
Vary: Accept-Encoding
Server: Microsoft-IIS/10.0
request-id: ...
X-CalculatedFETarget: MAXPR0101CU002.internal.outlook.com
X-BackEndHttpStatus: 200
X-FEProxyInfo: MAXPR0101CA0031.INDPRD01.PROD.OUTLOOK.COM
X-CalculatedBETarget: MAXPR01MB2735.INDPRD01.PROD.OUTLOOK.COM
X-BackEndHttpStatus: 200
X-RUM-Validated: 1
X-MailboxGuid: ...
X-Content-Type-Options: nosniff
X-BeSku: WCS5
x-ms-appId: ...
X-OWA-Version: 15.20.2644.27
X-OWA-OWSVersion: V2018_01_18
X-OWA-MinimumSupportedOWSVersion: V2_6
X-Frame-Options: SAMEORIGIN
X-OWA-HttpHandler: true
Content-Disposition: attachment; filename*=UTF-8''subject.zip
X-BackEnd-Begin: 2020-01-21T02:34:12.321
X-BackEnd-End: 2020-01-21T02:34:12.349
X-DiagInfo: MAXPR01MB2735
X-BEServer: MAXPR01MB2735
X-UA-Compatible: IE=EmulateIE7
Strict-Transport-Security: max-age=31536000; includeSubDomains
X-Proxy-RoutingCorrectness: 1
X-Proxy-BackendServerStatus: 200
X-FEServer: MAXPR0101CA0031
X-FEServer: BYAPR03CA0003
Date: Tue, 21 Jan 2020 02:34:11 GMT

我无法判断使用什么机制来触发此请求:页面导航、XmlHttpRequest、Fetch？...是什么让浏览器将其视为附件？我尝试在 Fiddler 中拦截此响应并将响应 header 更改为

Content-Type: text/html
Content-Disposition: inline
Content-Length: 5

Hello

但是浏览器仍然将响应下载为文件，而不是内联渲染。这是为什么？

Answer 1

这是由动态添加的具有下载属性的 anchor 标记引起的:

<a href="foo.zip" download>Download All</a>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download

If Content-Disposition has a different filename than download, theheader takes priority. (If Content-Disposition: inline, Firefoxprefers the header while Chrome prefers download.)