写在前面
这个Issue不影响本地的文件加载,因为默认策略就是只能加载本地,它是提醒你现在能加载的location,如果有其他的加载就需要修改CSP策略。
issue
使用官方的入门文档发现了一个issue
官方的html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>
原因就在于上面两行meta
正常创建的html文件是这样的
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
但是会发出警告。让你添加CSP策略,最好还是添加上。
Content Security Policy (CSP)
内容安全策略(Content Security Policy,简称CSP)是一种以可信白名单作机制,来限制网站是否可以包含某些来源内容,缓解广泛的内容注入漏洞,比如 XSS。 简单来说,就是我们能够规定,我们的网站只接受我们指定的请求资源。
默认配置下不允许执行内联代码(script块内容,内联事件,内联样式),以及禁止执行eval() , newFunction() , setTimeout([string], …) 和setInterval([string], …) 。
CSP 指令
两种方式
CSP可以由两种方式指定: HTTP Header 和 HTML。
通过定义在HTTP header 中使用:
"Content-Security-Policy:" 策略集
通过定义在 HTML meta标签中使用:
<meta http-equiv="content-security-policy" content="策略集">
策略是指定义 CSP 的语法内容。
如果 HTTP 头 与 meta 标签同时定义了 CSP,则会优先采用 HTTP 头的 。
定义后,凡是不符合 CSP策略的外部资源都会被阻止加载。
部分参数
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
CSP 指令(部分)
部分
"default-src" : 定义针对所有类型(js/image/css/font/ajax/iframe/多媒体等)资源的默认加载策略,如果某类型资源没有单独定义策略,就使用默认的。
"script-src" : 定义针对 JavaScript 的加载策略。
CSP 指令值(部分)
'self':允许加载相同源的内容
'*' :允许加载任何内容
'none':不允许加载任何内容