- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
这个问题可能看起来是关于 GitHub,但实际上是关于 HTTP 和浏览器的。不幸的是,我只能在 GitHub 上重现这个问题,所以我没有比下面提供的例子更简单的例子了。
这个问题可以通过访问 https://github.com/lonelearner/img-load-issue 来观察。图像未加载到呈现的 README 中是问题所在。
这是 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) 上单击查看源代码时,我看到上面的 markdown 已呈现为以下 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 检查器的“网络”选项卡中检查了请求和响应 header 。返回 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 检查器网络选项卡中的完整请求和响应 header 。
请求 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
响应头:
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
最佳答案
图像加载被 Content Security Policy 阻止页面上的 GitHub 问题。
如果您查看页面的响应 header ,您会看到已发布 Content-Security-Policy。我已经删除了 CSP header 值的适当部分:
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 header 中。这个问题现在应该已经解决了!
关于http - 为什么浏览器不遵循呈现的 GitHub README.md 上图像资源的 HTTP 302 重定向?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38694187/
我正在练习自述文件,我有一个关于链接的问题。有没有办法链接到自述文件的特定部分?例如,我想创建一个目录,其中包含到我的 readme.md 文件的特定部分的链接。 # Title ## Sub Tit
这个问题在这里已经有了答案: Changing capitalization of filenames in Git (11 个答案) 关闭 3 年前。 我使用“readme.md”创建了我的存储库
不知何故,我最终在 github 上有了 README.md 和 readme.md。现在这两者相互影响,所以我的 GitHub.app 变得完全困惑。 Github网站没有任何文件删除功能。 如何删
我注意到一些 GitHub 项目不仅有 README 文件,还有 README.md 文件。 这些文件有什么区别?我知道 README 也可作为项目存储库页面中的介绍性文本,但我不知道 README.
检验 dplyr显示有两个 README.md文件和 README.Rmd文件。 在 .md文件,它说 README.md is generated from README.Rmd. Please e
我正在使用 RStudio,其中有 README.Rmd 和 README.md 文件。但是,当我只在 README.Rmd 中更改并想要提交并将其推送到 GIT 时,我得到了这个: RStudio
我在裸存储库中使用 git 管理我的点文件。见 article by Harfang Perch有关此方法的详细信息。 它工作得很好,但我想将 README.md 添加到 repository on
我正在使用 Jekyll 在 Github Pages 上构建一个项目网页,使用“Dinky”主题,开箱即用。 README.md自动转换为 index.html ,这对于快速入门非常有帮助。 但是,
我有一个项目的大量文档,我想开源(通过 github)。 问题是 github README 不支持 .html 文件。 我试过 html2text绝对可怕的结果。 是否有一种快速简便的方法可以将自然
1. 更新 Readme 文件 在你想要放置 Readme-WakaTime 的位置中放置以下注释,这将作为程序的入口
我使用github。我的 README.md 包含代码示例。使用浏览器在 github 中查看我的 README 时,如何使此代码显示为彩色?我愿意使用要点,但不确定如何将它们集成到自述文件中。 最佳
我正在尝试在README.md中创建链接,该链接使用相对路径而不是我现在使用的绝对路径链接到示例代码。例如,在markdown文件中,如果使用此命令: [someLabel](https://gith
我有一个简单的 package.json: { "name": "camapaign", "version": "0.0.1", "scripts": { "start": "no
编辑问题并单击预览以下 Markdown 源时: a b c 在新行上显示每个字母。 但是,在我看来,在 README.md 中推送类似的 Markdown 源结构会将所有字母连接到一行上。 我希望在
我使用 Windows 版 Bonobo Git Server 4.0.0.0。效果很好。我使用 readme.md 作为信息通知。我可以在每行之前使用 4 个空格来标记代码块(在这种情况下,语法格式
我是 github 新手,在 README.md 中想要使用 Iframe 显示 HTML 内容,或者这可能吗? 我尝试过的是,我只是创建 HTML 标签而不是 anchor ,但这是行不通的。 最佳
我试图在我的应用程序中使用 selendroid 作为网络抓取工具,但我收到此错误消息“使用独立于操作系统的路径‘README.md’找到了多个文件”。关于如何修复它有什么想法吗? 构建.gradle
我部署的网站只显示 readme.md。我不确定我做错了什么。网址:https://ssaba96.github.io/WDI-P2-funny-predictions/ 我已经为这个问题搜索了堆栈溢
我需要使用 php 解析 readme.md 文件内容以显示我的 readme.md 文件的内容。 例如,我在 github 上有以下 readme.md 原始文件的链接。 https://raw.g
例如,我有这些文件: /Applications/Emacs.app/Contents/Resources/etc/images/custom/README /Applications/Emacs.a
我是一名优秀的程序员,十分优秀!