Lone Learner Lone Learner - 4 months ago 30
HTTP Question

Why is the browser not following an HTTP 302 redirect for an image resource on a rendered GitHub README.md?

This question may seem about GitHub but this question is really about HTTP and browsers. Unfortunately, I am able to reproduce this issue only with GitHub, so I apologize for not providing a more minimal example of the issue.

The issue can be observed by visiting https://github.com/lonelearner/img-load-issue. The image not loading in the rendered README is the issue.

This is the 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


When I click view source on my browser (Firefox), I see that the above markdown has been rendered as the following HTML code.

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


You can verify that the image really exists by going to https://github.com/lonelearner/img-load-issue/releases and clicking on ulam.png. The generated HTML code also seems fine. Why does the browser fail to load the image then?

If I insert the same HTML code in jsfiddle, the image seems to load fine. Example: https://jsfiddle.net/qxybjwf1/

Why is this image loading fine on jsfiddle.net but on GitHub?

I checked the request and response headers in the Network tab of the Firefox inspector. The GET request for ulam.png returned

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 the Network tab, I don't see Firefox making another request to retrieve the amazonaws.com URL. Why?

Here are the complete request and response headers from the network tab of Firefox inspector.

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

The image load is being blocked by the Content Security Policy that GitHub issues on the page.

If you look at the response headers for the page, you will see Content-Security-Policy is issued. I've cut out the appropriate section of the CSP header value:

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


This lists all locations that the browser is permitted to load images from for the current page. The image tag on the page is trying to load from:

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


If you look at the policy you can see that the CSP keyword 'self' is used, which means the origin that the page was served from, github.com in this case. This means that the initial image request is permitted to be sent. This request is responded to with a 302 and a location of:

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


Unfortunately the github-cloud.s3.amazonaws.com domain is not present in the img-src directive so the browser will not permitt the request to be sent. You should be able to see an error in the developer console of your browser. Chrome gives me the following:

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


Unless GitHub add github-cloud.s3.amazonaws.com there is nothing you can do to resolve this.