Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

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?

can i see your code plz ?

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

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

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.