为什么浏览器不遵循HTTP 302重定向来呈现渲染的GitHub README.md上的图像资源？

Lone Learner 发表于 Dev

孤独的学习者

这个问题似乎与GitHub有关，但实际上与HTTP和浏览器有关。不幸的是，我只能在GitHub上重现此问题，因此我没有比我在下面提供的示例更简单的示例。

可以通过访问https://github.com/lonelearner/img-load-issue观察到此问题。问题是未在呈现的自述文件中加载图像。

这是README.md中的markdown代码。

Foo

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

Bar

当我在浏览器（Firefox）上单击查看源代码时，我看到上述标记已被呈现为以下HTML代码。

<article class="markdown-body entry-content" itemprop="text">
<p>Foo</p>
<p><a href="https://github.com/lonelearner/img-load-issue/releases/download/v1.0.0/ulam.png" target="_blank"><img src="https://github.com/lonelearner/img-load-issue/releases/download/v1.0.0/ulam.png" alt="Image of Ulam spiral" style="max-width:100%;"></a></p>
<p>Bar</p>
</article>

您可以通过转到https://github.com/lonelearner/img-load-issue/releases并单击ulam.png来验证图像是否确实存在。生成的HTML代码似乎也不错。为什么浏览器无法加载图像呢？

如果我在jsfiddle中插入相同的HTML代码，则该图像似乎可以正常加载。示例：https：//jsfiddle.net/qxybjwf1/

为什么此图像可以在jsfiddle.net上但在GitHub上很好地加载？

我在Firefox检查器的“网络”选项卡中检查了请求和响应标头。返回ulam.png的GET请求

302 Found
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

在“网络”标签中，我看不到Firefox再次提出检索amazonaws.com URL的请求。为什么？

这是Firefox检查器的“网络”标签中完整的请求和响应标头。

请求标头：

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在页面上发布的内容安全策略的阻止。

如果查看页面的响应头，则会看到已发布Content-Security-Policy。我已经裁剪出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/...

不幸的github-cloud.s3.amazonaws.com是，该img-src指令中没有域，因此浏览器将不允许发送请求。您应该能够在浏览器的开发人员控制台中看到错误。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标头中添加了适当的条目。现在应该解决此问题！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。