Cordova页面加载外网图片失败,Refused to load the image
来源:互联网 发布:卸载mac上的软件 编辑:程序博客网 时间:2024/05/18 21:39
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,见下表。
完整的浏览器CSP支持情况请移步CanIUse。
如何使用
要使用CSP,只需要服务端输出类似这样的响应头就行了:
default-src是CSP指令,多个指令之间用英文分号分割;'self'是指令值,多个指令值用英文空格分割。目前,有这些CSP指令:
指令值可以由下面这些内容组成:
从上面的介绍可以看到,CSP协议可以控制的内容非常多。而且如果不特别指定'unsafe-inline'时,页面上所有inline的样式和脚本都不会执行;不特别指定'unsafe-eval',页面上不允许使用new Function,setTimeout,eval等方式执行动态代码。在限制了页面资源来源之后,被XSS的风险确实小不少。
当然,仅仅依靠CSP来防范XSS是远远不够的,不支持全部浏览器是它的硬伤。不过,鉴于低廉的开发成本,加上也没什么坏处。如果担心影响面太大,也可以像下面这样,仅收集不匹配规则的日志,先观察下:
这样,如果页面上有inline的JS,依然会执行,只是浏览器会向指定地址发送一个post请求,包含这样的信息:
CSP先介绍到这里。现代浏览器支持不少与安全有关的响应头,以后接着再介绍。已经写完了,请点这里继续浏览。
原文链接:https://imququ.com/post/content-security-policy-reference.html,参与评论。
- Cordova页面加载外网图片失败,Refused to load the image
- Cordova页面解析页面中script标签内容失败,Refused to execute inline script because it violates the following
- Cordova页面解析页面中script 内容失败,Refused to execute inline script because it violates the following
- ionic2 svg格式icon不显示,报错: Refused to load the image 'data:image/svg
- SQL Server子系统加载失败(The xx subsystem failed to load)错误的处理
- 失败加载jni分享库/Failed to load the jni shared library
- UG二次开发加载dll,ufusr出错,Failed to load image
- Android开源框架Universal-Image-Load网络图片加载
- ionic-image-lazy-load.js ionic图片加载优化
- 页面图片加载失败时自动替换
- cordova Failed to load webpage with error:The operation couldn`t be completed (NSURLErrorDomain err
- Cordova加载手机页面web
- ionic 、ionic-image-lazy-load网络图片的懒加载和和加载效果,居中显示
- ionic图片资源懒加载,延迟加载—— ionic-image-lazy-load
- 流输出图片到JSP页面:Image to Byte Array and Byte Array to Image
- flex image加载图片
- image加载图片
- 加载图片Image方法
- jquery的$.extend和$.fn.extend作用及区别
- hibernate 创建数据中一张表的方法
- arduino 内核分析
- leetcode-101. Symmetric Tree
- bat判断window服务是否存在
- Cordova页面加载外网图片失败,Refused to load the image
- 动作事件
- apt-get update: Not Found [IP: 91.189.92.152 80]
- UIScrollView基本使用(一)
- 75、myeclipse配置jdk
- 函数名与函数指针
- 高精度加法运算-Java语言描述
- ACM第三次练习—1001
- MySQL 5.7新特性的学习