开发者社区> 杰克.陈> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Cordova页面加载外网图片失败,Refused to load the image

简介: 原文:Cordova页面加载外网图片失败,Refused to load the image 1.使用Cordova页面加载外网图片失败,抛出异常 Refused to load the image 'http://xxx.
+关注继续查看
原文:Cordova页面加载外网图片失败,Refused to load the image

1.使用Cordova页面加载外网图片失败,抛出异常

Refused to load the image 'http://xxx.png' 
because it violates the following Content Security Policy directive: "default-src 'self' 
data: gap: https://ssl.gstatic.com 'unsafe-eval'". 
Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.

错误原因:

index.html页面标头 的 default-src为self,默认不使用外网资源

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * ">

解决方案:

在标头最佳 img-src * 来允许加载外网图片

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src * ;img-src *">

2.关于Content-Security-Policy 介绍

官网文档:

https://www.w3.org/TR/2012/CR-CSP-20121115/

Content Security Policy 介绍(转)

本文介绍的是W3C的Content Security Policy,简称CSP。顾名思义,这个规范与内容安全有关,主要是用来定义页面可以加载哪些资源,减少XSS的发生。

Chrome扩展已经引入了CSP,通过manifest.json中的content_security_policy字段来定义。一些现代浏览器也支持通过响应头来定义CSP。下面我们主要介绍如何通过响应头来使用CSP,Chrome扩展中CSP的使用可以参考Chrome官方文档

浏览器兼容性

早期的Chrome是通过X-WebKit-CSP响应头来支持CSP的,而firefox和IE则支持X-Content-Security-Policy,Chrome25和Firefox23开始支持标准的的Content-Security-Policy,见下表。

响应头 Chrome Firefox Safari IE
Content-Security-Policy 25+ 23+ - -
X-Content-Security-Policy - 4.0+ - 10.0(有限的)
X-Webkit-CSP 14+ - 6+ -

完整的浏览器CSP支持情况请移步CanIUse

如何使用

要使用CSP,只需要服务端输出类似这样的响应头就行了:

Content-Security-Policy: default-src 'self'

default-src是CSP指令,多个指令之间用英文分号分割;'self'是指令值,多个指令值用英文空格分割。目前,有这些CSP指令:

指令 指令值示例 说明
default-src 'self' cnd.a.com 定义针对所有类型(js、image、css、web font,ajax请求,iframe,多媒体等)资源的默认加载策略,某类型资源如果没有单独定义策略,就使用默认的。
script-src 'self' js.a.com 定义针对JavaScript的加载策略。
style-src 'self' css.a.com 定义针对样式的加载策略。
img-src 'self' img.a.com 定义针对图片的加载策略。
connect-src 'self' 针对Ajax、WebSocket等请求的加载策略。不允许的情况下,浏览器会模拟一个状态为400的响应。
font-src font.a.com 针对Web Font的加载策略。
object-src 'self' 针对<object>、<embed>或<applet>等标签引入的flash等插件的加载策略。
media-src media.a.com 针对<audio>或<video>等标签引入的html多媒体的加载策略。
frame-src 'self' 针对frame的加载策略。
sandbox allow-forms 对请求的资源启用sandbox(类似于iframe的sandbox属性)。
report-uri /report-uri 告诉浏览器如果请求的资源不被策略允许时,往哪个地址提交日志信息。 特别的:如果想让浏览器只汇报日志,不阻止任何内容,可以改用Content-Security-Policy-Report-Only头。

指令值可以由下面这些内容组成:

指令值 指令示例 说明
* img-src 允许任何内容。
'none' img-src 'none' 不允许任何内容。
'self' img-src 'self' 允许来自相同来源的内容(相同的协议、域名和端口)。
data img-src data 允许data:协议(如base64编码的图片)。
www.a.com img-src img.a.com 允许加载指定域名的资源。
*.a.com img-src *.a.com 允许加载a.com任何子域的资源。
https://img.com img-src https://img.com 允许加载img.com的https资源(协议需匹配)。
https: img-src https: 允许加载https资源。
'unsafe-inline' script-src 'unsafe-inline' 允许加载inline资源(例如常见的style属性,onclick,inline js和inline css等等)。
'unsafe-eval' script-src 'unsafe-eval' 允许加载动态js代码,例如eval()。

从上面的介绍可以看到,CSP协议可以控制的内容非常多。而且如果不特别指定'unsafe-inline'时,页面上所有inline的样式和脚本都不会执行;不特别指定'unsafe-eval',页面上不允许使用new Function,setTimeout,eval等方式执行动态代码。在限制了页面资源来源之后,被XSS的风险确实小不少。

当然,仅仅依靠CSP来防范XSS是远远不够的,不支持全部浏览器是它的硬伤。不过,鉴于低廉的开发成本,加上也没什么坏处。如果担心影响面太大,也可以像下面这样,仅收集不匹配规则的日志,先观察下:

Content-Security-Policy-Report-Only: script-src 'self'; report-uri http://test/

这样,如果页面上有inline的JS,依然会执行,只是浏览器会向指定地址发送一个post请求,包含这样的信息:

{"csp-report":{"document-uri":"http://test/test.php","referrer":"","violated-directive":"script-src 'self'","original-policy":"script-src 'self'; report-uri http://test/","blocked-uri":""}}

CSP先介绍到这里。现代浏览器支持不少与安全有关的响应头以后接着再介绍。已经写完了,请点这里继续浏览

原文链接:https://imququ.com/post/content-security-policy-reference.html参与评论


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
全方位解读服务网格(Service Mesh)的背景和概念
为了解决微服务框架的侵入性问题,我们引入服务网格。
1241 0
PolarDB 并行查询的前世今生
本文会深入介绍PolarDB MySQL在并行查询这一企业级查询加速特性上做的技术探索、形态演进和相关组件的实现原理,所涉及功能随PolarDB MySQL 8.0.2版本上线。
502 0
企业内部应用接入钉钉获取部门及人员信息
企业内部应用接入钉钉,同时通过API获取当前企业下部门及人员信息
1186 0
MySQL模糊查询再也用不着 like+% 了!
我们都知道 InnoDB 在模糊查询数据时使用 "%xx" 会导致索引失效,但有时需求就是如此,类似这样的需求还有很多,例如,搜索引擎需要根基用户数据的关键字进行全文查找,电子商务网站需要根据用户的查询条件,在可能需要在商品的详细介绍中进行查找,这些都不是B+树索引能很好完成的工作。 通过数值比较,范围过滤等就可以完成绝大多数我们需要的查询了。但是,如果希望通过关键字的匹配来进行查询过滤,那么就需要基于相似度的查询,而不是原来的精确数值比较,全文索引就是为这种场景设计的。
25671 0
阿里云云原生一体化数仓正式发布  助力企业数据驱动业务创新
云原生一体化数仓是集阿里云大数据产品MaxCompute、DataWorks、Hologres三种产品能力于一体的一站式大数据处理平台。核心是3个一体化和全链路数据治理能力,包括离线实时一体、湖仓一体、分析服务一体、全链路数据治理。
1610 0
全面公测|Grafana服务:一张图表胜过千行指标&日志
Grafana 帮助运维人员轻松处理各类运维过程中遇到的各类数据可视化与分析难题。目前阿里云 Grafana 服务全面免费公测,帮助企业轻松构建运维数据可视化平台,轻松实现数据驱动运维!
1158 0
一起学Golang系列(五)初次接触Go语言可能遇到的各种坑!
前面介绍了Go语言的基础语法,所谓磨刀不误砍柴工,希望大家还是能熟悉掌握这些基础知识,这样后面真正学起Go来才会得心应手。 作为初学者。Go语言的语法有些和java类似,但也有很多不一样的地方。刚开始都会遇到各种各样的坑。下面就来总结下学习go语言的过程中,遇到的各种坑。
1033 0
设备接入--海康摄像头SDK
springboot-对接海康摄像头,兼容window和Linux环境
1340 0
Flink SQL 在快手的扩展和实践
快手实时计算团队技术专家张静、张芒在 FFA 2021 的分享
1143 0
无影云桌面,企业与个人的应用神器
阿里云无影云桌面( Elastic Desktop Service)的原产品名为弹性云桌面,融合了无影产品技术后更名升级。它可以为您提供易用、安全、高效的云上桌面服务,帮助您快速构建、高效管理桌面办公环境,提供安全、灵活的办公体系。
276298 0
+关注
杰克.陈
一个安静的程序猿~
10425
文章
2
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载