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 上，我收到以下警告消息:混合内容:页面位于“https://run.plnkr.co/” zv3BGVk31NLTM0Nh/”通过 HTTPS 加载，但请求了不安全的图像“http://ia.media-imdb.com/images/M/MV5BMTI1OTk5MTI3N15BMl5BanBnXkFtZTcwNDI3NTEyMQ@@._V1_SX300.jpg”。此内容也应通过 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 混合内容:“https://giles-taylor.github.io/js-movie-finder/”页面是通过 HTTPS 加载的，但请求了不安全的 XMLHttpRequest 端点“http://www.omdbapi.com/” ？t=+七+年+痒&y=未定义&plot=short&r=json'。该请求已被阻止；内容必须通过 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 - More info 的安全性。 。只要您继续提供混合内容，您就面临着浏览器更改默认设置并或多或少随意阻止内容的风险，更不用说体验跨浏览器的一致性了。

你基本上有两个选择(都不是很好)

• 停止通过 https 为您的主网站提供服务

• 将请求从您的服务器代理到 OMDB，然后通过 https 自行提供服务(这将大大增加您的带宽使用量)