最近在写 cordova 项目 准备做图片外链的时候来一个这样的错误
Refused to load the image 'https://hiwebpage.com/app/img/article/1809184.png' because it violates the following Content Security Policy directive: "img-src 'self' data: content:".
(⊙o⊙)?纳尼这是什么
然后通过 ”img-src“找到了
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://*.hiwebpage.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
这样的代码
这就有意思了(゚ー゚) 本人做前端差不多久两年之久 头一次发现这么骚操作的 meta标签 赶紧去学习学习(百度百度)
Content-Security-Policy(简称CSP)内容安全策略
引用 mdn:内容安全策略 (CSP, Content Security Policy) 是一个附加的安全层,用于帮助检测和缓解某些类型的攻击,包括跨站脚本 (XSS) 和数据注入等攻击。 这些攻击可用于实现从数据窃取到网站破坏或作为恶意软件分发版本等用途。
简单来说 csp 就是一个白名单,开发者明确告诉客户端,哪些外部资源可以加载和执行,从而杜绝XSS攻击。
大多数策略(csp)指令需要一个或多个内容源。内容源是一串表明内容可能从哪里加载的字符串。
源列表
源列表是一个字符串,指定了一个或多个互联网主机(通过主机名或 IP 地址),和可选的 URL 协议和/或端口号。站点地址可以包含可选的通配符前缀 (星号, '*'),端口号也可以使用通配符 (同样是 '*') 来表明所有合法端口都是有效来源。主机通过空格分隔。
有效的主机表达式包括:
http://*.foo.com
匹配所有使用 http: 协议加载 foo.com 任何子域名的尝试。
mail.foo.com:443
匹配所有访问 mail.foo.com 的 443 端口 的尝试。
https://store.foo.com
匹配所有使用 https: 协议访问 store.foo.com 的尝试。
如果端口号没有被指定,浏览器会使用指定协议的默认端口号。如果协议没有被指定,浏览器会使用访问该文档时的协议。
关键字
'none' 代表空集;即不匹配任何 URL。两侧单引号是必须的。 'self' 代表和文档同源,包括相同的 URL 协议和端口号。两侧单引号是必须的。 'unsafe-inline' 允许使用内联资源,如内联的 <script> 元素、javascript: URL、内联的事件处理函数和内联的 <style> 元素。两侧单引号是必须的。 'unsafe-eval' 允许使用 eval() 等通过字符串创建代码的方法。两侧单引号是必须的。
注意: 使用 'unsafe-inline' 和 'unsafe-eval' 都是不安全的,它们会使您的网站有跨站脚本攻击风险。
例如,您可以指定内容能从文档源和 trustedscripts.foo.com 加载:
Content-Security-Policy: default-src 'self' trustedscripts.foo.com
数据
注意: data: URI 是不安全的,如果它们被允许成为脚本来源,则会使您的网站有跨站脚本攻击风险。
data:
允许 data: URI 作为内容来源。这是不安全的,因为攻击者可以精心构造 data: URI 来攻击。请谨慎地使用这个源,并确保不要用于脚本。
mediastream:
允许 mediastream: URI 作为内容源。
Content-Security-Policy: default-src 'self'; img-src 'self' data:; media-src mediastream:
示例:常见用例
这一部分提供了一些常用的安全策略方案示例。
示例 1一个网站管理者想要所有内容均来自站点的同一个源 (不包括其子域名)
Content-Security-Policy: default-src 'self'
示例 2一个网站管理者允许内容来自信任的域名及其子域名 (域名不必须与CSP设置所在的域名相同)
Content-Security-Policy: default-src 'self' *.trusted.com
示例 3一个网站管理者允许网页应用的用户在他们自己的内容中包含来自任何源的图片, 但是限制音频或视频需从信任的资源提供者(获得),所有脚本必须从特定主机服务器获取可信的代码.
Content-Security-Policy: default-src 'self'; img-src *; media-src media1.com media2.com; script-src userscripts.example.com
在这里,各种内容默认仅允许从文档所在的源获取, 但存在如下例外:
- 图片可以从任何地方加载(注意 "*" 通配符)。
- 多媒体文件仅允许从 media1.com 和 media2.com 加载(不允许从这些站点的子域名)。
- 可运行脚本仅允许来自于userscripts.example.com。
示例 4一个线上银行网站的管理者想要确保网站的所有内容都要通过SSL方式获取,以避免攻击者窃听用户发出的请求。
Content-Security-Policy: default-src https://onlinebanking.jumbobank.com
该服务器仅允许通过HTTPS方式并仅从onlinebanking.jumbobank.com域名来访问文档。
示例 5 一个在线邮箱的管理者想要允许在邮件里包含HTML,同样图片允许从任何地方加载,但不允许JavaScript或者其他潜在的危险内容(从任意位置加载)。
Content-Security-Policy: default-src 'self' *.mailsite.com; img-src *
注意这个示例并未指定script-src。在此CSP示例中,站点通过 default-src 指令的对其进行配置,这也同样意味着脚本文件仅允许从原始服务器获取。
参考网站链接 :
https://developer.mozilla.org/zh-CN/docs/Web/Security/CSP/CSP_policy_directives (用法)