HTTPS 是以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 HTTP 请求,一旦出现就是提示或报错
上图来自此前 占位图服务 的页面,结果就是
解决办法
以下方法让页面一旦发现存在上述响应头,会在加载 HTTP 资源时自动替换成 HTTPS 请求
CSP 设置 upgrade-insecure-requests
nginx 写法
server {
...
add_header Content-Security-Policy upgrade-insecure-requests;
...
}
PHP 的三种写法
header("Content-Security-Policy: upgrade-insecure-requests");
header('Upgrade-Insecure-Requests: 1');
引入 icy2003/php,使用 Header::send
,区别在于本方法支持 Workerman 框架
use icy2003\php\ihelpers\Header;
Header::send('Content-Security-Policy: upgrade-insecure-requests');
页面中加入 meta 头
目前支持这个设置的还只有 chrome 43.0+。建议用 header 的方法
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
如果页面比较多,需要统一修改,可以在全局 js 文件里
document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />')