https网页中,如果请求的内容属于http协议,则称为 Mixed Content,W3C 将 Mixed Content 分为 Optionally-blockable 和 Blockable,Optionally-blockable定义为:

请求的资源风险较小,即使被中间人拦截并篡改也不会造成很大影响。现代浏览器默认会加载这类资源,但会在控制台打印警告信息,这类资源包括:

  • 通过 标签加载的图片;
  • 通过 <video> / <audio><source> 标签加载的视频或音频; 预读的(Prefetched)资源;

除Optionally-blockable之外所有的 Mixed Content 都是Blockable,浏览器必须禁止加载这类资源。所以现代浏览器中,对于 HTTPS 页面中的 JavaScript、CSS 等 HTTP 资源,一律不加载,直接在控制台打印错误信息,如下

Mixed Content: The page at 'https://your.page.url' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://your.request.url'. This request has been blocked; the content must be served over HTTPS.

解决方式

  1. http 头部定义方式:
Content-Security-Policy:block-all-mixed-content
  1. meta标签方式:
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

博主遇到这个错误是因为开启了cdn之后,页面http的资源引用造成的,提了一天的工单,终于在下班前解决了这个问题。
因为cdn证书那边原先设置的是http回源,改成协议跟随的回源方式后解决问题。

再来科普一下什么是协议跟随回源:
就是开启了https之后,如果没有强制https,客户端是可以用http/https访问的,根据客户端访问的协议来决定cdn返回资源的协议,客户端是https访问,那返回的资源就是https。奈何博主技术薄弱被这个问题困扰了一天,走了很多弯路,希望遇到同样问题的你能在这里找到答案。