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
Seth Cardoza
Front End Web Development Techdegree Student 2,881 PointsCat won't load!!
var name = prompt("What is your name?");
alert(Hi, ${name}. Want to see something cool?);
document.querySelector('html').innerHTML =
<h1>Welcome to ${name}'s site!</h1>
<img src="https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif">
;
This is the error code that pops up
Refused to load the image 'https://media.giphy.com/media/JIX9t2j0ZTN9S/giphy.gif' because it violates the following Content Security Policy directive: "img-src 'self' *.githubusercontent.com *.googleusercontent.com lux.speedcurve.com mdn.mozillademos.org media.prod.mdn.mozit.cloud media.stage.mdn.mozit.cloud interactive-examples.mdn.mozilla.net wikipedia.org www.google-analytics.com www.gstatic.com".
Do you guys think this may be a setting on my specific computer I need to adjust???
3 Answers
Steven Parker
229,657 PointsYour browser is just obeying instructions that were given to it by the web server your page is hosted on. Changing the policy will require a server configuration setting. For more information, see this MDN page on Content Security Policy (CSP).
There's also an entire web site dedicated to this directive, content-security-policy.com. Here's their page that describes this specific issue: The img-src Directive.
Paul Godina
5,387 PointsI went through the CSP docs and am still unsure of how to solve the issue. Any other insight you could offer?
Michael Talbot
4,141 PointsI also dont see the cat gif - and would like help understanding the Content Security Policy (CSP) . I undesratand the need to set a policy so that the browser accepts images from giphy but where and how do we add that policy into our code, or something that has to be set on the server? I am using chrome and firefox.
Steven Parker
229,657 PointsAs I said earlier, Changing the policy will require a server configuration setting. This isn't something you can do in client-side code.
Claudia Almeida
Full Stack JavaScript Techdegree Student 1,814 PointsThe Cat gif wasn't loading on Safari, so I tried again on Google Chrome and it worked!
Joseph Yhu
PHP Development Techdegree Graduate 48,635 PointsJoseph Yhu
PHP Development Techdegree Graduate 48,635 PointsIt works for me, so I'm not sure what the problem is.