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 3.4.10.1.
Background
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, http://google.com/some.js.

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 http://google.com.
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' www.phpmyadmin.net
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.
Solution
Find your PhpMyAdmin's library folder. Then find header_http.inc.php. In my case it's located at c:/wamp2.2/apps/phpmyadmin3.4.10.1/libraries/header_http.inc.php

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\' www.phpmyadmin.net');

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:

X-Content-Security-Policy
X-WebKit-CSP

Questions? Let me know!