Warum folgt der Browser nicht einer HTTP 302-Weiterleitung für eine Bildressource auf einer gerenderten GitHub README.md?

Question

Diese Frage mag über GitHub scheinen, aber diese Frage betrifft wirklich HTTP und Browser. Leider kann ich dieses Problem nur mit GitHub reproduzieren, daher habe ich kein minimaleres Beispiel als das unten angegebene.

Das Problem kann beobachtet werden, indem Sie https://github.com/lonelearner/img-load-issue besuchen. Das Bild, das nicht in das gerenderte README geladen wird, ist das Problem.

Dies ist der Markdown-Code in 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 

Als ich Ansicht Quelle in meinem Browser (Firefox) klicken, sehe ich, dass der oben Abschlag als den folgenden HTML-Code gemacht wurde.

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

können Sie überprüfen, ob das Bild wirklich existiert, indem Sie auf ulam.png zu https://github.com/lonelearner/img-load-issue/releases und klicken gehen. Der generierte HTML-Code scheint ebenfalls gut zu sein. Warum lädt der Browser das Bild dann nicht?

Wenn ich den gleichen HTML-Code in jsfiddle einfügen, scheint das Bild in Ordnung zu laden. Beispiel: https://jsfiddle.net/qxybjwf1/

Warum wird dieses Bild auf jsfiddle.net geladen, aber auf GitHub?

Ich überprüfte die Anforderungs- und Antwortheader auf der Registerkarte Netzwerk des Firefox-Inspektors. Die GET-Anforderung für ulam.png zurück

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 

In der Registerkarte Netzwerk Ich sehe nicht, Firefox eine weitere Anforderung stellt die amazonaws.com URL abzurufen. Warum?

Hier sind die vollständigen Anforderungs- und Antwortheader von der Netzwerkregisterkarte des Firefox-Inspektors.

Request-Header:

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 

Response-Header:

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 

Answer 1

Das Bild Last durch die Content Security Policy blockiert wird, dass GitHub Fragen auf der Seite.

Wenn Sie sich die Antwortheader für die Seite ansehen, wird die Content-Security-Policy ausgegeben. Ich habe den entsprechenden Abschnitt des CSP-Header-Wert ausgeschnitten:

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

Hier werden alle Orte, die der Browser Bilder laden von der aktuellen Seite ist zulässig. Der Bild-Tag auf der Seite versucht, von zu laden:

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

Wenn man sich der Politik schauen, können Sie sehen, dass das CSP Schlüsselwort 'self' verwendet wird, was bedeutet, den Ursprung, die die Seite serviert wurde von, github.com in diesem Fall. Dies bedeutet, dass die anfängliche Bildanforderung gesendet werden darf.Diese Anfrage wird beantwortet mit einem 302 und einem Ort:

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

Leider ist die github-cloud.s3.amazonaws.com Domain nicht in der img-src Richtlinie ist damit der Browser die Anforderung gesendet werden, nicht wird zul. Sie sollten einen Fehler in der Entwicklerkonsole Ihres Browsers sehen können. Chrome gibt mir die folgende:

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". 

Es sei denn, GitHub hinzufügen github-cloud.s3.amazonaws.com gibt es nichts, was man dieses Problem zu beheben tun können.

-Update 4. August 2016: Ich hob diese mit GitHub Sicherheit und sie haben den entsprechenden Eintrag in ihre CSP-Header hinzugefügt. Dieses Problem sollte nun behoben sein!