JavaScript 混合內容解決方法

Question

我正在嘗試從OMDB API訪問數據，但在處理混合內容圖像時遇到問題。 OMDB 從 IMDB 中提取數據，IMDB 禁止使用其 https 圖像，因此所有圖像源都必須以 http 為前綴。

例如，Do the Right Thing 的 JSON 提供的 src 如下：

"Poster":"http://ia.media-imdb.com/images/M/MV5BODA2MjU1NTI1MV5BMl5BanBnXkFtZTgwOTU4ODIwMjE@._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/MV5BMTI1OTk5MTI3N15BMl5BanBnXkFtZTcwNDI3NTEyMQ@@._V1_SX300.jpg'. This content should also be served over HTTPS. 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/MV5BMTI1OTk5MTI3N15BMl5BanBnXkFtZTcwNDI3NTEyMQ@@._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. 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
}

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

Answer 1

基本上混合內容是一個很大的禁忌，因為它破壞了 https 的安全性 - 更多信息。 只要您繼續提供混合內容，就會冒着瀏覽器更改默認設置和隨意阻止內容的風險，更不用說體驗跨瀏覽器的一致性了。

你基本上有兩個選擇（都不是很好）

• 停止通過 https 為您的主站點提供服務

• 將請求從您的服務器代理到 OMDB，然后自己通過 https 提供服務（這將大大增加您的帶寬使用量）

Answer 2

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

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