Question

我试图从OMDB API创建访问数据，但我遇到了混合内容图片的问题。 OMDB从IMDB中提取数据，禁止使用其https图像，因此所有图像源都必须以http为前缀。

例如，Do Do 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.

这就是代码：

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 {{ 1}}

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.

有人可以建议一种解决方法，使这些图像安全显示（并且没有控制台警告）吗？谢谢！

Answer 1

基本上混合的内容是一个很大的禁忌，因为它破坏了https - More info的安全性。只要您继续提供混合内容，您就会冒着浏览器更改默认设置和随意阻止内容的风险，更不用说在浏览器之间体验一致性了。

你基本上有两个选择（两者都不是很好）

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

Answer 2

只需从图像路径中删除协议即可。从https://imagepath到//imagepath

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

JavaScript混合内容解决方案

2 个答案: