为什么浏览器没有对呈现的GitHub README.md上的图像资源执行HTTP 302重定向？_Http_Github_Browser_Http Status Code 302

为什么浏览器没有对呈现的GitHub README.md上的图像资源执行HTTP 302重定向？

http github browser

为什么浏览器没有对呈现的GitHub README.md上的图像资源执行HTTP 302重定向？,http,github,browser,http-status-code-302,Http,Github,Browser,Http Status Code 302,这个问题似乎是关于GitHub的，但实际上是关于HTTP和浏览器的。不幸的是，我只能用GitHub重现这个问题，所以我没有比下面提供的例子更简单的例子可以通过访问来观察问题。问题在于图像未加载到呈现的自述文件中这是README.md中的标记代码 Foo <img src="https://github.com/lonelearner/img-load-issue/releases/download/v1.0.0/ulam.png" alt="Image of Ulam spiral"

这个问题似乎是关于GitHub的，但实际上是关于HTTP和浏览器的。不幸的是，我只能用GitHub重现这个问题，所以我没有比下面提供的例子更简单的例子

可以通过访问来观察问题。问题在于图像未加载到呈现的自述文件中

这是README.md中的标记代码

Foo

<img src="https://github.com/lonelearner/img-load-issue/releases/download/v1.0.0/ulam.png" alt="Image of Ulam spiral">

Bar

在网络选项卡中，我没有看到Firefox再次请求检索amazonaws.com URL。为什么?

以下是Firefox inspector网络选项卡中完整的请求和响应标题

请求标头：

Host: github.com
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:45.0) Gecko/20100101 Firefox/45.0
Accept: image/png,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: https://github.com/lonelearner/img-load-issue
Cookie: logged_in=no; _gh_sess=eyJzZXNzaW9uX2lkIjoiNzdkNGI0N2UxYjUzNzhkNGE4ODZlMzU1YzA2ODE4NDgiLCJzcHlfcmVwbyI6ImxvbmVsZWFybmVyL2ltZy1sb2FkLWlzc3VlIiwic3B5X3JlcG9fYXQiOjE0NzAwMzYzMzYsIl9jc3JmX3Rva2VuIjoiSnBMK0Yxd3NWb1VOc3NSRnZjWnUxSkswbG1FVkpqS3BEcEF0TkFxbmpqRT0iLCJyZWZlcnJhbF9jb2RlIjoiaHR0cHM6Ly9naXRodWIuY29tL2xvbmVsZWFybmVyL2ltZy1sb2FkLWlzc3VlIiwiZmxhc2giOnsiZGlzY2FyZCI6WyJhbmFseXRpY3NfbG9jYXRpb24iXSwiZmxhc2hlcyI6eyJhbmFseXRpY3NfbG9jYXRpb24iOiIvPHVzZXItbmFtZT4vPHJlcG8tbmFtZT4ifX19--1fe743598d196f7f04c9f1f6d27901b542b6bea3; _ga=GA1.2.594721001.1470036331; _octo=GH1.1.1243010616.1470036331; _gat=1; tz=Asia%2FKolkata
Connection: keep-alive

响应标题：

Cache-Control: no-cache
Content-Type: text/html; charset=utf-8
Date: Mon, 01 Aug 2016 07:25:37 GMT
Location: https://github-cloud.s3.amazonaws.com/releases/64644360/7e448240-57e5-11e6-8bda-58e154461718.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAISTNZFOVBIJMK3TQ%2F20160801%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20160801T072537Z&X-Amz-Expires=300&X-Amz-Signature=fb0e8423517a09b80624b3512f8ebeffc54cfb976e409379c532b4625b179095&X-Amz-SignedHeaders=host&actor_id=0&response-content-disposition=attachment%3B%20filename%3Dulam.png&response-content-type=application%2Foctet-stream
Public-Key-Pins: max-age=5184000; pin-sha256="WoiWRyIOVNa9ihaBciRSC7XHjliYS9VwUGOIud4PB18="; pin-sha256="RRM1dGqnDFsCJXBTHky16vi1obOlCgFFn/yOhI/y+ho="; pin-sha256="k2v657xBsOVe1PQRwOsHsw3bsGT2VzIqz5K+59sNQws="; pin-sha256="K87oWBWM9UZfyddvDfoxL+8lpNyoUB2ptGtn0fv6G2Q="; pin-sha256="IQBnNBEiFuhj+8x6X8XLgh01V9Ic5/V3IRQLNFFc7v4="; pin-sha256="iie1VXtL7HzAMF+/PVPR9xzT80kQxdZeJ+zduCB3uj0="; pin-sha256="LvRiGEjRqfzurezaWuj8Wie2gyHMrW5Q06LspMnox7A="; includeSubDomains
Server: GitHub.com
Set-Cookie: _gh_sess=eyJzZXNzaW9uX2lkIjoiNzdkNGI0N2UxYjUzNzhkNGE4ODZlMzU1YzA2ODE4NDgiLCJzcHlfcmVwbyI6ImxvbmVsZWFybmVyL2ltZy1sb2FkLWlzc3VlIiwic3B5X3JlcG9fYXQiOjE0NzAwMzYzMzcsIl9jc3JmX3Rva2VuIjoiSnBMK0Yxd3NWb1VOc3NSRnZjWnUxSkswbG1FVkpqS3BEcEF0TkFxbmpqRT0iLCJyZWZlcnJhbF9jb2RlIjoiaHR0cHM6Ly9naXRodWIuY29tL2xvbmVsZWFybmVyL2ltZy1sb2FkLWlzc3VlIn0%3D--b5a70b2ac300eeac4032c88460bd8154b41e9b77; path=/; secure; HttpOnly
Status: 302 Found
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Transfer-Encoding: chunked
Vary: X-PJAX, Accept-Encoding
X-Frame-Options: deny
X-GitHub-Request-Id: C40F106C:24F2:900C5F6:579EF970
X-Request-Id: 33b9ee97cf3e035d814561d7a4ccc100
X-Runtime: 0.023602
X-Served-By: 50b06cef3698e972f044d7dc2cb41530
X-UA-Compatible: IE=Edge,chrome=1
X-XSS-Protection: 1; mode=block
content-security-policy: default-src 'none'; base-uri 'self'; connect-src 'self' uploads.github.com status.github.com api.github.com www.google-analytics.com github-cloud.s3.amazonaws.com wss://live.github.com; font-src assets-cdn.github.com; form-action 'self' github.com gist.github.com; frame-ancestors 'none'; frame-src render.githubusercontent.com; img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com; media-src 'none'; object-src assets-cdn.github.com; script-src assets-cdn.github.com; style-src 'unsafe-inline' assets-cdn.github.com
x-content-type-options: nosniff

GitHub在页面上发出的消息阻止了图像加载

如果查看页面的响应标题，您将看到发布了内容安全策略。我已经删除了CSP标题值的适当部分：

img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com;

这将列出允许浏览器加载当前页面图像的所有位置。页面上的图像标记正试图从以下位置加载：

https://github.com/lonelearner/img-load-issue/releases/download/v1.0.0/ulam.png

如果您查看该策略，您会发现使用了CSP关键字

'self'

，这意味着在本例中，该页面的服务来源是github.com。这意味着允许发送初始映像请求。使用302和以下位置响应此请求：

https://github-cloud.s3.amazonaws.com/releases/64644360/...

不幸的是，

img src

指令中不存在

github cloud.s3.amazonaws.com

域，因此浏览器不允许发送请求。您应该能够在浏览器的开发人员控制台中看到错误。Chrome给了我以下信息：

Refused to load the image 'https://github-cloud.s3.amazonaws.com/releases/64644360/7e448240-57e5-11e6-…%3B%20filename%3Dulam.png&response-content-type=application%2Foctet-stream' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com".

除非GitHub添加

GitHub cloud.s3.amazonaws.com

，否则您无法解决此问题

2016年8月4日更新：我向GitHub Security提出了这个问题，他们已将适当的条目添加到CSP头中。这个问题现在应该解决了

我在下面更新了我的答案，GitHub Secuity在我向他们提出问题后更新了他们的CSP以解决此问题。

https://github-cloud.s3.amazonaws.com/releases/64644360/...

Refused to load the image 'https://github-cloud.s3.amazonaws.com/releases/64644360/7e448240-57e5-11e6-…%3B%20filename%3Dulam.png&response-content-type=application%2Foctet-stream' because it violates the following Content Security Policy directive: "img-src 'self' data: assets-cdn.github.com identicons.github.com www.google-analytics.com collector.githubapp.com *.gravatar.com *.wp.com *.githubusercontent.com".