JavaScript混合內容變通辦法

我試圖從OMDB API訪問數據，但我在混合內容圖像時遇到問題。 OMDB從IMDB中提取數據，禁止使用其https圖像，因此所有圖像源都必須帶有前綴http。JavaScript混合內容變通辦法

例如，JSON用於做正確的事情提供了SRC如下：

"Poster":"http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg"

當運行的代碼下面的圖片顯示，至少在Chrome和iOS的Safari瀏覽器，但在Chrome我得到的以下警告消息：Mixed Content: The page at 'https://run.plnkr.co/zv3BGVk31NLTM0Nh/' was loaded over HTTPS, but requested an insecure image 'http://ia.media-imdb.com/images/M/[email protected]@._V1_SX300.jpg'. This content should also be served over HTTPS.

這是代碼：

function getMovieInfo(myMoviesTitle, myMoviesYear, isLast) { 
    var xmlhttp = new XMLHttpRequest(); 
    var url = "https://www.omdbapi.com/?i&t=" + myMoviesTitle + "&y=" + myMoviesYear + "&plot=short&r=json"; 

    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var movieInfo = JSON.parse(xmlhttp.responseText); 

     if (!movieInfo.Error) { 
     makeMovieList(myMoviesTitle, movieInfo); 
     } 

     if (isLast) { 
     // Runs DOM manipulation functions 
     } 
    } 
    }; 
    xmlhttp.open('GET', url, true); 
    xmlhttp.send(); 
} 

function makeMovieList(myMoviesTitle, movieInfo) { 
    // Appends information from omdbapi.com to DOM. 
    var movie = document.createElement('li'); 
    movie.className = 'movie'; 

    var thumbnail = document.createElement('img'); 
    thumbnail.className = 'thumbnail'; 
    thumbnail.src = movieInfo.Poster; 
    movie.appendChild(thumbnail);

我已經試過CORS爲好，這在Chrome上Plnkr作品一種享受（根本沒有錯誤消息），但似乎並沒有iOS上運行，或當我我的代碼上傳到Github上main.js:232 Mixed Content: The page at 'https://giles-taylor.github.io/js-movie-finder/' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://www.omdbapi.com/?t=the+seven+year+itch&y=undefined&plot=short&r=json'. This request has been blocked; the content must be served over HTTPS.

function getMovieInfo(myMoviesTitle, myMoviesYear, isLast) { 
    var req = new XMLHttpRequest(); 
    var url = 'http://www.omdbapi.com/?t=' + myMoviesTitle + '&y=' + myMoviesYear + '&plot=short&r=json'; 

    if ('withCredentials' in req) { 
    req.open('GET', url, true); 
    req.onreadystatechange = function() { 
     if (req.readyState === 4) { 
     if (req.status >= 200 && req.status < 400) { 
      var movieInfo = JSON.parse(req.responseText); 

      if (!movieInfo.Error) { 
      console.log(movieInfo); 
      makeMovieList(movieInfo); 
      } 
      if (isLast) { 
      // Runs DOM manipulation functions 
      } 
     } else { 
      // Handle error case 
     } 
     } 
    }; 
    req.send(); 
    } 
} 

function makeMovieList(myMoviesTitle, movieInfo) { 
    // as above 
}

任何人都可以提出一個解決辦法，使這些圖像顯示安全（並且沒有控制檯警告）？謝謝！

來源

2016-08-24 dedaumiersmith

所以使用'https：// www.omdbapi.com /'不起作用？ - 因爲你說IMDB不允許https，但你使用http而不是https訪問ombdapi - 不確定IMDB在哪裏發揮作用 –

對不起，也許我沒有足夠清楚。無論您使用http://www.omdbapi.com/或http://www.omdbapi.com/ JSON中指定的圖像src都來自http。例如：「海報」：「http://ia.media-imdb.com/images/M/[email protected]_V1_SX300.jpg」。 – dedaumiersmith

啊，對不起，我的壞 –

只需從圖像路徑中刪除協議即可。從https://imagepath到//imagepath

thumbnail.src = movieInfo.Poster.replace(/^https?:/, '');

來源

2016-08-24 12:34:32

嗨，圖像路徑是'http'而不是'https'開頭。我嘗試換掉'http'，但Chrome瀏覽器似乎添加了'https'作爲默認值，導致禁止訪問的相同問題。謝謝！ – dedaumiersmith

如果你刪除協議無論http或https，鉻會把你的網頁相同的協議。 –

基本上混合內容是一個很大的禁忌，因爲它破壞了HTTPS的安全 - More info。只要您繼續提供混合內容，就會冒着瀏覽器更改默認設置的風險，並且會隨意更改或阻止某些內容，更不用說跨瀏覽器體驗一致性。

你基本上有兩種選擇（兩者都不是很大）

停止服務您的主網站通過https
代理從您的服務器OMDB，然後自己發球過來請求HTTPS （這將大量增加您的帶寬使用）

來源

2016-08-24 13:00:34

JavaScript混合內容變通辦法

回答

相關問題