렌더링 된 GitHub README.md에서 이미지 리소스에 대한 HTTP 302 리디렉션을 브라우저가 따르지 않는 이유는 무엇입니까?

Question

이 질문은 GitHub에 대한 것 같지만이 질문은 실제로 HTTP 및 브라우저에 관한 것입니다. 불행히도 GitHub에서만이 문제를 재현 할 수 있으므로 아래에 제시 한 것보다 최소한의 예제가 없습니다.

https://github.com/lonelearner/img-load-issue을 방문하면 문제가 발생할 수 있습니다. 렌더링 된 README에로드되지 않은 이미지가 문제입니다.

이것은 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)에서보기 소스를 클릭하면 위의 마크 다운이 다음 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 코드도 괜찮아 보입니다. 왜 브라우저가 이미지를로드하지 못합니까?

동일한 HTML 코드를 jsfiddle에 삽입하면 이미지가 잘로드되는 것 같습니다. 예 : https://jsfiddle.net/qxybjwf1/

왜 이미지가 jsfiddle.net에서 잘로드되지만 GitHub에서는로드됩니까?

Firefox 검사기의 네트워크 탭에서 요청 및 응답 헤더를 확인했습니다. ulam.png에 대한 GET 요청은 내가 파이어 폭스가 amazonaws.com의 URL을 검색하는 또 다른 요청을 볼 수 없습니다, 네트워크 탭에서

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 검사기의 네트워크 탭에있는 전체 요청 및 응답 헤더입니다.

요청 헤더 :

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 

Answer 1

화상 Content Security Policy 부하가 차단되고 있다는 GitHub의 페이지가 문제.

페이지의 응답 헤더를 보면 Content-Security-Policy가 발급됩니다.

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

이 브라우저는 현재 페이지에서 이미지를로드 할 수있는 모든 위치를 나열 나는 CSP 헤더 값의 해당 부분을 잘라했습니다. 당신이 정책을 보면 당신은 CSP 키워드 'self' 페이지가 게재 된 기원을 의미하는 사용되는 것을 볼 수 있습니다

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

: 페이지에 이미지 태그에서로드하려고 from, github.com.이 경우. 즉, 초기 이미지 요청이 전송되도록 허용됩니다.이 요청은 302의 위치에 응답한다 : 브라우저가 요청이 전송 될 출력 허가하지 않도록

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

는 불행하게도 github-cloud.s3.amazonaws.com 도메인이 img-src 지침에 존재하지 않습니다. 브라우저의 개발자 콘솔에서 오류를 볼 수 있어야합니다.

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의 보안이이 문제를 제기하고 그들의 CSP 헤더에 해당 항목을 추가했습니다. 이 문제는 이제 해결 될 것입니다!