CODEWITHSUNDEEP
htmlhttphttps
FailedMathematician
FailedMathematician

Reputation: 467

Why html components in http are not working in https

So i tried out others http jsfiddle from this site.

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();
});

It does't work when the jsfiddle is in https.

Same as above

This is exactly the same situation I am having when developing in my PC (latest Chrome, Windows 10), e.g. file:///C:/path/to/projectname/index.html (It is displaying https version). May I know how can I solve this?

Upvotes: 0

Views: 1109

Answers (1)

vtortola
vtortola

Reputation: 35905

The Google Chrome console explains the problem:

Mixed Content: The page at 'https://fiddle.jshell.net/z6MJN/show/' was loaded over HTTPS, but requested an insecure script 'http://code.jquery.com/ui/1.9.2/jquery-ui.js'. This request has been blocked; the content must be served over HTTPS.

and

Mixed Content: The page at 'https://fiddle.jshell.net/z6MJN/show/' was loaded over HTTPS, but requested an insecure stylesheet 'http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css'. This request has been blocked; the content must be served over HTTPS.

MDN explains very well the problem.

If the HTTPS page includes content retrieved through regular, cleartext HTTP, then the connection is only partially encrypted: the unencrypted content is accessible to sniffers and can be modified by man-in-the-middle attackers, and therefore the connection is not safeguarded anymore. When a webpage exhibits this behavior, it is called a mixed content page.

You can use the syntax // rather than http:// or https://, and the browser will use the current page protocol to load those links.

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

Upvotes: 2

Related Questions