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 JavaScript Basics Hello, JavaScript! JavaScript Everywhere

Seth Cardoza
seal-mask
.a{fill-rule:evenodd;}techdegree
Seth Cardoza
Front End Web Development Techdegree Student 2,881 Points

Cat 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???

It works for me, so I'm not sure what the problem is.

3 Answers

Steven Parker
Steven Parker
231,269 Points

Your 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
Paul Godina
5,558 Points

I went through the CSP docs and am still unsure of how to solve the issue. Any other insight you could offer?

I 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
Steven Parker
231,269 Points

As I said earlier, Changing the policy will require a server configuration setting. This isn't something you can do in client-side code.