view raw
Lone Learner Lone Learner - 9 months ago 133
HTTP Question

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

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 The image not loading in the rendered README is the issue.

This is the markdown code in


<img src="" alt="Image of Ulam spiral">


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><a href="" target="_blank"><img src="" alt="Image of Ulam spiral" style="max-width:100%;"></a></p>

You can verify that the image really exists by going to 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:

Why is this image loading fine on 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

In the Network tab, I don't see Firefox making another request to retrieve the URL. Why?

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

Request Header:

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
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
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
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' wss://; font-src; form-action 'self'; frame-ancestors 'none'; frame-src; img-src 'self' data: * * *; media-src 'none'; object-src; script-src; style-src 'unsafe-inline'
x-content-type-options: nosniff


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: * * *;

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:

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

Unfortunately the 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 '…%3B%20filename%3Dulam.png&response-content-type=application%2Foctet-stream' because it violates the following Content Security Policy directive: "img-src 'self' data: * * *".

Unless GitHub add there is nothing you can do to resolve this.