Wie Debuggen "Mixed Content" Fehler in einem Browser?

Question

Ich arbeite an einem Projekt in Codepen (es ist ein großes Projekt für mich als Anfänger). Also habe ich beschlossen, es in https://www.dirtymarkup.com/ ein wenig zu säubern und aufgeräumten Code wieder in Codepen eingefügt. Nach diesem Vorgang ist mein Code jedoch fehlerhaft und zeigt eine Reihe von Fehlern in console.log. Wenn Sie auf die Konsole schauen müssen.

Project on codepen

HTML

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> 

<!--********** HEADER **********--> 

    <header class="navigation"> 
     <div class="icon"> 
      <span class="glyphicon glyphicon-align-justify" onclick= 
      "openNav()"></span> 
      <div id="headerText"> 
       Social Media 
      </div> 
     </div><!--icon div--> 
     <div id="textRandomQuote"> 
      Random Quote Project 2016 <span id="by">by</span> <span id= 
      "nzMai">NZ MAI</span> 
     </div> 
    </header><!--********** QUOTE SECTION **********--> 
    <section> 
     <div class="container"> 
      <div class="row"> 
       <div class="col-md-6 col-md-offset-3 quoteDiv col-xs-12"> 
        <p id="quotes"></p><!--end of "quotes" p--> 
        <button class="btn btn-primary" id="getQuote" type= 
        "button">Get Quote</button> 
        <div class="like&share pull-right"> 
         <span class="glyphicon glyphicon-heart social-but" 
         data-placement="left" data-toggle="tooltip" title= 
         "Like the Quote"></span> <span class= 
         "glyphicon glyphicon-share" data-placement="left" 
         data-toggle="tooltip" title="Share the Quote"></span> 
         <span><i aria-hidden="true" class="fa fa-twitter" 
         data-placement="left" data-toggle="tooltip" title= 
         "Tweet the Quote"></i></span> 
        </div> 
       </div><!--end of "col-md-6 col-md-offset-3" div--> 
      </div><!--row--> 
      <div class="row"> 
       <div class= 
       "col-md-6 col-md-offset-3 col-xs-12 bioDivContainer"> 
        <h1 class="authorName"></h1> 
        <p class="bioDiv"></p> 
       </div> 
      </div><!--row--> 
     </div><!--end of container--> 
    </section> 
    <section class="articlesSection"> 
     <div class="container"> 
      <div class="row"> 
       <div id="wikiArticlesDiv"> 
        <h1 class="wikiArticlesHeader"></h1> 
        <ul class="wikiArticlesList"></ul> 
       </div> 
      </div> 
     </div> 
    </section><!--SIDE NAVIGATION--> 
    <div class="sidenav" id="mySidenav"> 
     <a class="closebtn" href="javascript:void(0)" onclick= 
     "closeNav()">&times;</a> <a href="#">About</a> <a href="#"><img alt= 
     "twitter" id="twitter" src= 
     "https://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png"></a> 
     <a href="#"><img alt="youtube" id="youtube" src= 
     "https://worldartsme.com/images/youtube-icon-clipart-1.jpg"></a> 
     <a href="#"><img alt="facebook" id="facebook" src= 
     "https://rocketfans.com/wp-content/uploads/2014/12/Buy-facebook-likes.png"> 
     </a> 
    </div><!-- Use any element to open the sidenav --> 
    <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page --> 

CSS

@import https://fonts.googleapis.com/css?family=Roboto; 

.navigation { 
    width: 100%; 
    height: 80px; 
    background-color: #e0f2f1; 
    box-shadow: 1px 5px 16px #aec0bf; 
} 

.icon { 
    display: inline; 
    width: 240px; 
    height: 100%; 
} 

.glyphicon-align-justify { 
    font-size: 30px; 
    margin-top: 20px; 
    margin-left: 20px; 
    margin-right: 0; 
} 

#headerText { 
    display: inline; 
    font-size: 24px; 
    margin-left: 10px; 
    border-right: 2px solid #000; 
    padding-right: 5px; 
    font-family: 'Roboto',sans-serif; 
    font-weight: 700; 
    opacity: .9; 
    color: #424242; 
} 

#textRandomQuote { 
    width: auto; 
    display: inline; 
    margin-left: 20px; 
    font-family: 'Roboto',sans-serif; 
    font-size: 18px; 
    font-weight: 700; 
    opacity: .75; 
} 

#by { 
    font-size: 12px; 
    font-family: 'Roboto',sans-serif; 
    opacity: .4; 
} 

#nzMai { 
    font-size: 18px; 
    font-family: 'Roboto',sans-serif; 
    border: 1px solid #424242; 
    padding: 10px; 
} 

.quoteDiv { 
    padding-bottom: 20px; 
    transition: all .7s ease; 
    background-color: #b2b2b2; 
    height: auto; 
    margin-top: 40px; 
    padding-top: 40px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
    background-image: repeating-linear-gradient(90deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-linear-gradient(180deg,transparent,transparent 50%,#F5F5F5 50%,#F5F5F5),repeating-radial-gradient(circle,#607D8B,#607D8B 45%,transparent 45%,transparent 60%,#607D8B 60%,#607D8B 100%); 
    background-size: 3px 3px; 
} 

.quoteDiv:hover { 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
    background-image: repeating-linear-gradient(45deg,transparent,transparent 50%,#9E9E9E 50%,#9E9E9E),repeating-linear-gradient(-45deg,transparent,transparent 50%,#424242 50%,#424242); 
    background-size: 50px 50px; 
} 

#quotes { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    font-size: 36px; 
    color: #FAFAFA; 
    text-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
} 

#getQuote { 
    text-align: center; 
} 

.bioDivContainer { 
    padding-bottom: 20px; 
    background-color: #ebf9fe; 
    height: auto; 
    margin-top: 40px; 
    padding-top: 40px; 
    box-shadow: 0 1px 6px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.24); 
} 

h1 { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
} 

.bioDiv { 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
    font-size: 18px; 
} 

.articlesSection { 
    margin-top: 45px; 
    height: auto; 
    background-color: #e0f2f1; 
    box-shadow: 1px 5px 16px #aec0bf; 
    margin-bottom: 45px; 
} 

#wikiArticlesDiv { 
    padding-top: 20px; 
    margin: 0 auto; 
    width: 60%; 
    margin-top: 25px; 
    margin-bottom: 25px; 
    height: auto; 
    opacity: .9; 
    border: 2px solid #000; 
} 

.wikiArticlesHeader { 
    text-align: center; 
    font-family: 'Roboto',sans-serif; 
    opacity: .9; 
    color: #424242; 
} 

.wikiArticlesList { 
    padding-left: 0; 
} 

.articleItem { 
    list-style-type: none; 
    text-align: center; 
    font-size: 22px; 
    opacity: .8; 
} 

.shortInfo { 
    color: red; 
    display: block; 
    font-family: 'Roboto',sans-serif; 
    font-size: 18px; 
    opacity: .8; 
} 

.glyphicon-heart,.glyphicon-share,.fa-twitter { 
    font-size: 20px; 
    color: #337ab7; 
    cursor: pointer; 
    opacity: .8; 
} 

.active { 
    color: red; 
    opacity: .8; 
} 

/**********SIDE NAVIGATION****************/ 
/* The side navigation menu */ 
.sidenav { 
    height: 100%; 
/* 100% Full-height */ 
    width: 0; 
/* 0 width - change this with JavaScript */ 
    position: fixed; 
/* Stay in place */ 
    z-index: 1; 
/* Stay on top */ 
    top: 0; 
    left: 0; 
    background-color: #111; 
/* Black*/ 
    overflow-x: hidden; 
/* Disable horizontal scroll */ 
    padding-top: 60px; 
/* Place content 60px from the top */ 
    transition: .5s; 
/* 0.5 second transition effect to slide in the sidenav */ 
} 

/* The navigation menu links */ 
.sidenav a { 
    padding: 8px 8px 8px 32px; 
    text-decoration: none; 
    font-size: 25px; 
    color: #818181; 
    display: block; 
    transition: .3s; 
} 

/* When you mouse over the navigation links, change their color */ 
.sidenav a:hover,.offcanvas a:focus { 
    color: #f1f1f1; 
} 

/* Position and style the close button (top right corner) */ 
.closebtn { 
    position: absolute; 
    top: 0; 
    right: 25px; 
    font-size: 36px !important; 
    margin-left: 50px; 
} 

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */ 
#main { 
    transition: margin-left .5s; 
    padding: 20px; 
} 

/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ 
@media screen and (max-height: 450px) { 
    .sidenav { 
     padding-top: 15px; 
    } 

    .sidenav a { 
     font-size: 18px; 
    } 
} 

a #twitter { 
    width: 60px; 
} 

a #youtube { 
    width: 60px; 
    padding-left: 0; 
} 

a #facebook { 
    width: 60px; 
    padding-left: 0; 
} 

@media all and (max-width: 1000px) { 
    #wikiArticlesDiv { 
     width: 90%; 
    } 
} 

@media all and (max-width: 800px) { 
    .wikiArticlesHeader { 
     font-size: 24px; 
    } 

    .authorName { 
     font-size: 24px; 
    } 

    #quotes { 
     font-size: 24px; 
    } 

    a { 
     font-size: 18px; 
    } 

    .shortInfo { 
     font-size: 16px; 
    } 

    .bioDiv { 
     font-size: 16px; 
    } 
} 

@media all and (max-width: 600px) { 
    #by,#nzMai { 
     display: none; 
    } 
} 

Javascript

var randomQuoteGenerator = (function() { 
    //var foundArticle = "Ben Stein"; 
    ////////// 
    ///General 
    ////////// 
    var general = { 
     // The URL to the quote API 
     url: 'https://api.forismatic.com/api/1.0/', 
     // What to display as the author name if s/he's unknown 
     unknownAuthor: 'Unknown', 
     // Base URL for the tweet links generation 
     tweetURL: 'https://twitter.com/home?status=', 
     //wikiURL:'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + foundArticle + '&format=json&callback=wikiCalback' 
    }; 
    ///////////// 
    ////DOM cache 
    ///////////// 
    var domCache = { 
     $quoteDiv: $('#quotes'), 
     $authorDiv: $('#author'), 
     $clickButton: $('#getQuote'), 
     $tweetButton: $('#tweetQuote'), 
     $bioDiv: $('.bioDiv'), 
     $authorName: $('.authorName'), 
     $wikiArticlesDivHeader: $('.wikiArticlesHeader'), 
     $wikiArticlesList: $('.wikiArticlesList'), 
     $wikiArticlesDiv: $('#wikiArticlesDiv') 
    }; 
    var getWikiAuthorBio = function(author) { 
      var url = 
       'https://en.wikipedia.org/w/api.php?action=opensearch&search=' + 
       author + '&format=json&callback=wikiCalback' 
       ////////////// 
       //Wiki request 
       ///////////// 
      var wikirequest = function() { 
        $.ajax({ 
         url: url, 
         dataType: 'jsonp', 
         success: function(wikiData) { 
           // Fetch the biographical information 
           var bioName = wikiData[2][0]; 
           // Check if instead of bio there is a phrase "The article may refer to...." if so then change indices 
           if (bioName.indexOf(
            'may refer to') >= 0) { 
            bioName = wikiData[2][1]; 
           } else { 
            var bioName = wikiData[2][0]; 
           } 
           var wikiArcticles = wikiData[1]; 
           var wikiArticlesShortInfo = 
            wikiData[2] 
           domCache.$wikiArticlesList.html(
            ''); 
           var authorName = wikiData[0]; 
           if (authorName === "Unknown") { 
            console.log(
             "This is author's name " + 
             authorName); 
            $('.bioDiv').html(''); 
            $('.bioDiv').text(
             'No available information' 
            ); 
           } 
           for (var j = 0; j < wikiData.length; j++) { 
            var articleAuthor = 
             wikiData[1][j]; 
            var articleInfo = wikiData[ 
             2][j]; 
            var linkAuthor = wikiData[3] 
             [j]; 
            domCache.$wikiArticlesList.append(
             '<li class="articleItem">' + 
             '<span>' + 
             '<a href =' + 
             linkAuthor + 
             ' target="_blank" >' + 
             articleAuthor + 
             '</a>' + '</span>' + 
             '<span class="shortInfo">' + 
             articleInfo + 
             '</span>' + '</li>' 
            ); 
            // Check if some articles are undefined if so hide them 
            if (typeof articleAuthor === 
             "undefined") { 
             $('.articleItem').last() 
              .html(''); 
            } 
            if (articleInfo === "") { 
             $('.shortInfo').last().html(
              ''); 
            } 
            //console.log(j + " " + articleAuthor); 
            //console.log(j + " " + articleInfo); 
            //console.log(j + " " + linkAuthor); 
           } // end of for loop 
           // Short biography 
           console.log(wikiData); 
           console.log(wikiArcticles); 
           console.log(url); 
           domCache.$bioDiv.text(bioName); 
          } // end of success 
        }); 
       } // wikirequest 
      wikirequest(); 
     } 
     /////////////////////////////// 
     //Display the quote on the page 
     /////////////////////////////// 
    var displayQuote = function(quote, author) { 
     domCache.$quoteDiv.text(quote); 
     domCache.$authorDiv.text(author); 
     domCache.$authorName.text(author); 
     domCache.$bioDiv.text(getWikiAuthorBio(author)); 
    }; 
    ////////// 
    //getQuote 
    ///////// 
    var getQuote = function() { 
      $.ajax({ 
       url: general.url, 
       type: 'GET', 
       dataType: 'jsonp', 
       jsonpCallback: "saveQuote", 
       data: 'method=getQuote&format=jsonp&lang=en&jsonp=saveQuote', 
       success: function(data) { 
         if (!data.quoteAuthor) { 
          data.quoteAuthor = general.unknownAuthor; 
         } 
         var quote = data.quoteText; 
         var author = data.quoteAuthor; 
         displayQuote(quote, author); 
         var addon = 
          "'s Related Wikipedia Articles"; 
         domCache.$wikiArticlesDivHeader.text(
          author + addon) 
         console.log(data); 
        } // end of success 
      }); 
     } // get quote 
     //////////////////////////// 
     //get new quote by clicking 
     /////////////////////////// 
    var ul = function() { 
     domCache.$clickButton.on('click', getQuote); 
     domCache.$wikiArticlesList.html(""); 
    }; 
    var init = function() { 
     // Display a quote 
     getQuote(); 
     ul(); 
    }; 
    return { 
     init: init 
    }; 
})(); // end of self-invoking function "randomQuoteGenerator" 
////////// 
//function is ready 
/////////// 
$(document).ready(function() { 
    // Initialize the QuoteGenerator module 
    randomQuoteGenerator.init(); 
}); 
// SIDE NAVIGATION 
/* Set the width of the side navigation to 250px */ 
function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
    } 
    /* Set the width of the side navigation to 0 */ 

function closeNav() { 
     document.getElementById("mySidenav").style.width = "0"; 
    } 
    /* Set the width of the side navigation to 250px and the left margin of the page content to 250px */ 

function openNav() { 
     document.getElementById("mySidenav").style.width = "250px"; 
     document.getElementById("main").style.marginLeft = "250px"; 
    } 
    /* Set the width of the side navigation to 0 and the left margin of the page content to 0 */ 

function closeNav() { 
    document.getElementById("mySidenav").style.width = "0"; 
    document.getElementById("main").style.marginLeft = "0"; 
} 
$(".social-but").click(function() { 
    $(this).toggleClass("active"); 
}); 

Fehler in der Konsole

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'. This request has been blocked; the content must be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://www.socialflow.com/wp-content/uploads/2016/04/twitter1.png'. This content should also be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure image 'http://worldartsme.com/images/youtube-icon-clipart-1.jpg'. This content should also be served over HTTPS. 

Mixed Content: The page at 'https://codepen.io/nazimkazim/pen/YWjALR' was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?callback=saveQuote&method=getQuote&format=jsonp&lang=en&jsonp=saveQuote&_=1470391383459'. This request has been blocked; the content must be served over HTTPS. 

Answer 1

Die Konsole Fehler Sie sind genau das erhalten, was sie sagen, sie sind, Mixed Content Fehler. Sie laden die Codepage über HTTPS, aber die in den Fehlern genannten Ressourcen werden über HTTP geladen. Sie können entweder die URLs für diese Ressourcen in HTTPS-URLs ändern (ändern Sie http: // zu https: //) oder die Protokollbezeichnungen vollständig entfernen, sodass der Browser das zu verwendende Protokoll auswählen kann (entfernen Sie http: lassen Sie nur //).