Mar 17, 2013

f Comment

Fixing CSP Warn Directive Img-Src Violated by Error in MINUTES!

Amazon If you are using the latest version of any modern browser and you are messing with a webpage's DOM through JavaScript you may encounter the following error in your browser's console window:

CSP WARN: Directive img-src http://localhost:80 data://*:* violated by ...
Basically you are trying to inject an image via JavaScript to the page's DOM but you don't see the image rendered due to this error. You Google how to fix this error and to your surprise nobody knows! Read on to see how I fixed this error.

In my situation I am using Greasemonkey to inject images to a PhpMyAdmin database browse page so I can administer my database. My PhpMyAdmin's version is
First of all CSP stands for Content Security Policy. According to Wikipedia Content Security Policy is a computer security concept recommended by the W3C Working group to prevent cross-site scripting (XSS) and related attacks. CSP was originally developed by the Mozilla Foundation and was first implemented in Firefox 4.

How CSP works is when the browser makes an HTTP request the server's response header could contain a header called Content-Security-Policy or X-Content-Security-Policy (or X-WebKit-CSP) which specify the JavaScript origins that the compliant browser should NOT execute.

Let me give you an example. Suppose you have a web server and the page you serve references an external JavaScript,

If this external JavaScript is not managed well it might reference another external JavaScript which is evil and would be able to manipulate your page's DOM in a negative way such as making things invisible and messing up the presentation of the elements.

With the 'Content-Security-Policy' header you'll be able to tell compliant browsers that you ONLY trust JavaScript and images hosted at

Root Cause of this Problem
Therefore the real cause of this issue is the server's response header includes 'Content-Security-Policy' or 'X-Content-Security-Policy' with values that invalidate your injection of an image. To confirm look at the request in Firebug to see 'Response Header' and see if the following is part of the header:

x-content-security-policy ---- allow 'self'; options inline-script eval-script; frame-ancestors 'self'; img-src 'self' data:; script-src 'self'
If so, you'll need to tell web server to remove 'x-content-security-policy' and that's it!

In my situation PhpMyAdmin is doing it. So to fix the issue I simply tell PhpMyAdmin to NOT use 'Content-Security-Policy' or 'X-Content-Security-Policy' header.
Find your PhpMyAdmin's library folder. Then find In my case it's located at c:/wamp2.2/apps/phpmyadmin3.4.10.1/libraries/

In that file comment out the following line:
header('X-Content-Security-Policy: allow \'self\'; options inline-script eval-script; frame-ancestors \'self\'; img-src \'self\' data:; script-src \'self\'');
Save the change and try again!

If you use WAMP 2.4 you may edit C:\wamp2.4\apps\phpmyadmin4.0.4\libraries\Header.class.php by commenting out every line that sets the following headers:


Questions? Let me know!
Please leave a comment here!
One Minute Information - by Michael Wen
ADVERTISING WITH US - Direct your advertising requests to Michael