I'm attempting to retrieve information from OMDB API, but I'm encountering an issue with mixed content images. OMDB pulls its data from IMDB, which does not allow the use of https images. Therefore, all image sources must be prefixed with http.
For instance, the JSON for "Do the Right Thing" provides the following Poster src:
"Poster":"http://ia.media-imdb.com/images/M/MV5BODA2MjU1NTI1MV5BMl5BanBnXkFtZTgwOTU4ODIwMjE@._V1_SX300.jpg"
When executing the code below, the images display on Chrome and iOS Safari. However, Chrome displays a warning message:
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.This is the code in question:
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) {
// Executes 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);
I have also attempted using CORS, which works smoothly on Plnkr in Chrome (no error messages), but does not function properly on iOS or when uploaded to 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) {
// Executes DOM manipulation functions
}
} else {
// Handles error case
}
}
};
req.send();
}
}
function makeMovieList(myMoviesTile, movieInfo) {
// as above
}
Does anyone have suggestions for a workaround to securely display these images without console warnings? Thank you!