AWS S3 网站静态页面中图片引用外部资源时无法显示

最新推荐文章于 2023-08-30 09:46:09 发布

fddqfddq

最新推荐文章于 2023-08-30 09:46:09 发布

阅读量616

点赞数

分类专栏： AWS S3 文章标签： html html5 css

本文链接：https://blog.csdn.net/fddqfddq/article/details/120310169

版权

AWS 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

静态页面中图片引用上传到S3的地址当然是可以访问的。

问题描述：本地有个静态页面，里面是一些img图片,url为外部地址，在浏览器打开这个静态页面，页面可以正常显示图片，但是把这个静态页面上传到AWS S3后，静态页面中的图片无法显示。

html内容如下，本地正常访问，但是放到S3上后，图片不显示。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高圆圆气质杂志封面 自信从容-明星图片-liuchangwei.com</title>
<meta name="keywords" content="高圆圆" />
</head>
<body>
<div align="center">
	<div><h1>高圆圆-气质杂志封面 自信从容<h1>
	</div>
	<div>
	<ul>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153P2.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153P8.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q1.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q4.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q9.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153R3.jpg" alt=""></li>
	</ul>
	<div>
</div>
</body>
</html>

加了一句话：<meta name="referrer" content="never"> 就可以正常显示了。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>高圆圆气质杂志封面 自信从容-明星图片-liuchangwei.com</title>
<meta name="referrer" content="never">
<meta name="keywords" content="高圆圆" />
</head>
<body>
<div align="center">
	<div><h1>高圆圆-气质杂志封面 自信从容<h1>
	</div>
	<div>
	<ul>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153P2.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153P8.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q1.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q4.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153Q9.jpg" alt=""></li>
		<li><img src="https://img.lianzhixiu.com/uploads/allimg/140401/3-140401153R3.jpg" alt=""></li>
	</ul>
	<div>
</div>
</body>
</html>

这样就实现了在S3上访问外部图片了，向S3托管静态网站跨了一大步。

解决办法：

在图片显示的界面把meta referrer标签改为never

<meta name="referrer" content="never">

或者在img标签上加上：

referrerpolicy="no-referrer"

即可显示

策略名称	属性值（新）	属性值（旧）
No Referrer	no-referrer	never
No Referrer When Downgrade	no-referrer-when-downgrade	default
Origin Only	origin	-
Origin When Cross-origin	origin-when-crossorigin	-
Unsafe URL	unsafe-url	always

No Referrer：任何情况下都不发送 Referrer 信息；
No Referrer When Downgrade：仅当发生协议降级（如 HTTPS 页面引入 HTTP 资源，从 HTTPS 页面跳到 HTTP 等）时不发送 Referrer 信息。这个规则是现在大部分浏览器默认所采用的；
Origin Only：发送只包含 host 部分的 Referrer。启用这个规则，无论是否发生协议降级，无论是本站链接还是站外链接，都会发送 Referrer 信息，但是只包含协议 + host 部分（不包含具体的路径及参数等信息）；
Origin When Cross-origin：仅在发生跨域访问时发送只包含 host 的 Referrer，同域下还是完整的。它与 Origin Only 的区别是多判断了是否 Cross-origin。需要注意的是协议、域名和端口都一致，才会被浏览器认为是同域；
Unsafe URL：无论是否发生协议降级，无论是本站链接还是站外链接，统统都发送 Referrer 信息。正如其名，这是最宽松而最不安全的策略；

fddqfddq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AWS S3 网站静态页面中图片引用外部资源时无法显示

静态页面中图片引用上传到S3的地址当然是可以访问的。问题描述：本地有个静态页面，里面是一些img图片,url为外部地址，在浏览器打开这个静态页面，页面可以正常显示图片，但是把这个静态页面上传到AWS S3后，静态页面中的图片无法显示。html内容如下，本地正常访问，但是放到S3上后，图片不显示。<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
复制链接

扫一扫