为什么http中的html组件在https中不起作用

Question

所以我从这个site 尝试了其他http jsfiddle。

HTML

<div id="mainContent">
        <h1>This is an According Example</h1>           
    </div>
    <div id="accordion">
        <h3><a href="#">Heading for first sentence</a></h3>
        <div>
        <p>This is the first sentence.</p>
        </div>          
        <h3><a href="#">Heading for second sentence</a></h3>            
        <div>
        <p>This is the second sentence.</p>
        </div>
        <h3><a href="#">Heading for third sentence</a></h3>
        <div>
        <p>This is the third sentence.</p>
        </div>
    </div>

JS

$(document).on('ready', function(){
$("#accordion").accordion();
});

jsfiddle 在 https 时不起作用。

Same as above

这与我在 PC（最新的 Chrome、Windows 10）中开发时遇到的情况完全相同，例如file:///C:/path/to/projectname/index.html（显示https版本）。我可以知道我该如何解决这个问题吗？

Answer 1

谷歌浏览器控制台解释了这个问题：

混合内容：“https://fiddle.jshell.net/z6MJN/show/”处的页面是 通过 HTTPS 加载，但请求了不安全的脚本 'http://code.jquery.com/ui/1.9.2/jquery-ui.js'。该请求已 受阻；内容必须通过 HTTPS 提供。

和

混合内容：页面位于 'https://fiddle.jshell.net/z6MJN/show/' 是通过 HTTPS 加载的，但是 请求了不安全的样式表 'http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'。这个 请求已被阻止；内容必须通过 HTTPS 提供。

MDN explains very well the problem.

如果 HTTPS 页面包含通过常规检索的内容， 明文 HTTP，则连接仅部分加密： 嗅探器可以访问未加密的内容，并且可以通过以下方式修改 中间人攻击者，因此连接不是 不再受到保护。当一个网页表现出这种行为时，它是 称为混合内容页面。

您可以使用语法// 而不是http:// 或https://，浏览器将使用当前页面协议来加载这些链接。

https://jsfiddle.net/g0s4rj77/1/