JavaScript AJAX Basics (retiring) AJAX and APIs Displaying the Photos

Jimmy Wu
Jimmy Wu
Front End Web Development Techdegree Student 10,816 Points

HTTP-Based Public Key Pinning is deprecated. Chrome 69 and later will ignore HPKP response headers

I got this warning in my console, thus preventing me from getting photos from Flickr. "HTTP-Based Public Key Pinning is deprecated. Chrome 69 and later will ignore HPKP response headers. (Host: api.flickr.com)".

Anyone knows how to solve this?

Sarika Rani
Sarika Rani
11,214 Points

can i see your code plz ?

Gari Merrifield
Gari Merrifield
9,550 Points

I would check out the Flickr API documentation, there has probably been a recent ( this year ) change that may work around that issue. https://www.flickr.com/services/api/

2 Answers

James Churchill
STAFF
James Churchill
Treehouse Teacher

Jimmy,

I believe the photos should still display regardless of the warning that displays in the console. Can you please post your JavaScript code for review?

Thanks ~James

I am getting the same error

$(document).ready(function(){

$('button').click(function(){
    $('button').removeClass("selected");
    $(this).addClass("selected");

    var flickerAPI = 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
    var animal = $(this).text();
    var flickerOptions = {

        tags:animal,
        format: "json"

    };

    function displayPhotos(data){

        var photoHTML = '<ul>';
        $.each(data.items, function(i, photo){
            photoHTML += '<li class="grid-25 table-grid-50">';
            photoHTML += '<a href="' + photo.link + '" class="image">';
            photoHTML += '<img src="' + photo.media + '"></a></li>';
        });

      photoHTML+= '</ul>';
      $("#photos").html(photoHTML);
    }

    $.getJSON(flickerAPI, flickerOptions, displayPhotos)
});

});

it is working now. i forgot the .m in photo.media.m

Cory Wallace
Cory Wallace
13,418 Points

I'm getting the same error message. Here is my code:

$(document).ready(function(){
  $('button').click(function (){
    $("button").removeClass("selected");
    $(this).addClass("selected");
    var flickrAPI = "https://www.flickr.com/services/feeds/photos_public.gne?jsoncallback=?";
    var animal = $(this).text();
    var flickrOptions = { 
      tags: animal,
      format: "json"
    };
    function displayPhotos (data) {
      var photoHTML = '<ul>'; // creates an unordered list to store the photos in
      $.each(data.items, function(i, photo){
        photoHTML += '<li class= "photos">';
        photoHTML += '<a href="' + photo.link + '" class = "image">';
        photoHTML += '<img src="' + photo.media.m + '" ></a></li>';
      });
      photoHTML += '</ul>';
      $('photos').html(photoHTML);
    }
    $.getJSONP(flickrAPI, flickrOptions, displayPhotos);
  }); //end buttonc lick
}); // end ready
Diana Ci
Diana Ci
18,656 Points

I had the same problem....the photos would't display. In the console " error $(document).ready(function(){});" The code was perfectly correct. The solution for me was: I've noticed in the Workspaces a directory named "finished", there where all the code, the finished project. So this means all files where double. I deleted this directory "finished" and the page worked fine, the photos displayed.