Does `Content-Security-Policy` ignore `X-Frame-Options`, returned by a server, or is `X-Frame-Options` still primary?

Assuming that I have:

- a website http://a.com with `X-Frame-Options: DENY`
- and a website http://b.com with `Content-Security-Policy: frame-src a.com`

will browser load this frame?

It is unclear.  
On the one hand, http://a.com explicitly denies framing.   
On the other hand, http://b.com explicitly allows framing for http://a.com.

How does Content-Security-Policy work with X-Frame-Options?

I have an app, in which the user would be able to copy an image URL, paste it unto an input and the image will be loaded on a box.

But my app, keeps triggering this message:

&gt;Refused to load the image &#39;LOREM_IPSUM_URL&#39; because it violates the following Content Security Policy directive: &quot;img-src &#39;self&#39; data:&quot;.

That&#39;s my meta tag:

    &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src *; 
    img-src &#39;self&#39; data:; script-src &#39;self&#39; &#39;unsafe-inline&#39; &#39;unsafe-eval&#39; *; 
    style-src  &#39;self&#39; &#39;unsafe-inline&#39; *&quot;&gt;

I&#39;m using html2Canvas within the app, and when I remove this: &quot;img-src &#39;self&#39; data:&quot;

It fires this error:

    html2canvas.js:3025 Refused to load the image &#39;data:image/svg+xml,
    &lt;svg xmlns=&#39;http://www.w3.org/2000/svg&#39;&gt;&lt;/svg&gt;&#39; because it violates
    the following Content Security Policy directive: &quot;default-src *&quot;. 
    Note that &#39;img-src&#39; was not explicitly set, so &#39;default-src&#39; is used as a fallback.

Along with a bunch of other errors.

Content Security Policy: &quot;img-src &#39;self&#39; data:&quot;

W3C says there is a new attribute in HTML5.1 called `nonce` for `style` and `script` that can be used by the Content Security Policy of a website.

I googled about it but finally didn&#39;t get it what actually this attribute does and what changes when using it?

What’s the purpose of the HTML &quot;nonce&quot; attribute for script and style elements?

When I tried to deploy my app onto devices with Android system above 5.0.0 ([Lollipop][1]), I kept getting these kind of error messages:

&gt; 07-03 18:39:21.621: D/SystemWebChromeClient(9132):
&gt; file:///android_asset/www/index.html: Line 0 : Refused to load the
&gt; script &#39;http://xxxxx&#39; because it violates the following Content
&gt; Security Policy directive: &quot;script-src &#39;self&#39; &#39;unsafe-eval&#39;
&gt; &#39;unsafe-inline&#39;&quot;. 07-03 18:39:21.621: I/chromium(9132):
&gt; [INFO:CONSOLE(0)] &quot;Refused to load the script &#39;http://xxx&#39; because it
&gt; violates the following Content Security Policy directive: &quot;script-src
&gt; &#39;self&#39; &#39;unsafe-eval&#39; &#39;unsafe-inline&#39;&quot;.

However, if I deployed it to mobile device with Android system of 4.4.x ([KitKat][2]), the security policy works with the default ones:

    &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src &#39;self&#39; data: gap: https://ssl.gstatic.com &#39;unsafe-inline&#39; &#39;unsafe-eval&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *&quot;&gt;

Then I thought, maybe, I should change to something like this:

    &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;script-src &#39;self&#39; &#39;unsafe-eval&#39; &#39;unsafe-inline&#39;; object-src &#39;self&#39;; style-src &#39;self&#39; &#39;unsafe-inline&#39;; media-src *&quot;&gt;

Basically, both options don&#39;t work for for me. How can I solve this issue?

  [1]: https://en.wikipedia.org/wiki/Android_Lollipop
  [2]: https://en.wikipedia.org/wiki/Android_version_history#Android_4.4_KitKat_.28API_level_19.29




Refused to load the script because it violates the following Content Security Policy directive

I am using [CAPTCHA][1] on page load, but it is blocking because of some security reason.

I am facing this problem:

&lt;pre&gt;
    Content Security Policy: The page&#39;s settings blocked the loading
    of a resource at
    http://www.google.com/recaptcha/api.js?onload=myCallBack&amp;render=explicit
    (&quot;script-src http://test.com:8080 &#39;unsafe-inline&#39; &#39;unsafe-eval&#39;&quot;).
&lt;/pre&gt;

I have used the following JavaScript and meta tag:

    &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;default-src *; style-src &#39;self&#39; &#39;unsafe-inline&#39;; script-src &#39;self&#39; &#39;unsafe-inline&#39; &#39;unsafe-eval&#39;&quot;&gt;
    &lt;script src=&quot;http://www.google.com/recaptcha/api.js?onload=myCallBack&amp;render=explicit&quot; async defer&gt;&lt;/script&gt;

  [1]: https://en.wikipedia.org/wiki/CAPTCHA




Content Security Policy: The page&#39;s settings blocked the loading of a resource

So, in about 1 hour my extensions failed hard.

I was doing my extension and it was doing what I pretended. I made some changes, and as I didnt liked I deleted them, and now my extension is throwing error:

&gt; Refused to apply inline style because it violates the following
&gt; Content Security Policy directive: &quot;default-src &#39;self&#39;&quot;. Note that
&gt; &#39;style-src&#39; was not explicitly set, so &#39;default-src&#39; is used as a
&gt; fallback.

What causes this error?

I made my changes in:

popup.html

    &lt;!DOCTYPE html&gt;
    &lt;html ng-app=&quot;PinIt&quot; ng-csp&gt;
        &lt;head&gt;
            &lt;link rel=&quot;stylesheet&quot; href=&quot;css/popup.css&quot;&gt;
    	    &lt;script src=&quot;js/lib/jquery-1.8.2.min.js&quot;&gt;&lt;/script&gt;
            &lt;script src=&quot;js/lib/angular.min.js&quot;&gt;&lt;/script&gt;
            &lt;script src=&quot;js/app/app.js&quot;&gt;&lt;/script&gt;
            &lt;script src=&quot;js/app/popup.js&quot;&gt;&lt;/script&gt;	
        &lt;/head&gt;
        &lt;body id=&quot;popup&quot;&gt;
            &lt;header&gt;
                &lt;h1&gt;PinIt&lt;/h1&gt;
            &lt;/header&gt;
        &lt;div ng-controller=&quot;PageController&quot;&gt;
                &lt;div&gt;{{message}}&lt;/div&gt;
                &lt;h2&gt;Page:&lt;/h2&gt;
                &lt;div id=&quot;elem&quot;&gt;{{title}}&lt;/div&gt;
                &lt;div&gt;{{url}}&lt;/div&gt;
                &lt;h2&gt;Imagens:&lt;/h2&gt;
                &lt;ul&gt;
                    &lt;li ng-repeat=&quot;pageInfo in pageInfos&quot; style=&quot;list-style: none&quot;&gt;
                        &lt;div class=&quot;imgplusshare&quot;&gt;
                        &lt;img src={{pageInfo}} class=&quot;imagemPopup&quot;/&gt;
                        &lt;ul class=&quot;imas&quot;&gt;
                          &lt;li id=&quot;liFacebook&quot; ng-click=&quot;fbshare(pageInfo)&quot;&gt;
                          &lt;span&gt;
                          &lt;img src=&quot;facebook_16.png&quot;/&gt;Facebook
                          &lt;/span&gt;
                        &lt;/li&gt;
                        &lt;li id=&quot;liTwitter&quot; ng-click=&quot;twshare(pageInfo)&quot;&gt;
                        &lt;span&gt;
                        &lt;img src=&quot;twitter-bird-16x16.png&quot;/&gt;Twitter
                        &lt;/span&gt;
                        &lt;/li&gt;
                        &lt;li id=&quot;liGooglePlus&quot; ng-click=&quot;gpshare(pageInfo)&quot;&gt;
                        &lt;span&gt;&lt;img src=&quot;gplus-16.png&quot;/&gt;Google+&lt;/span&gt;
                        &lt;/li&gt;
                        &lt;li id=&quot;liEmail&quot; ng-click=&quot;mailshare(pageInfo)&quot;&gt;
                        &lt;span&gt;&lt;img src=&quot;mail_icon_16.png&quot;/&gt;Email&lt;/span&gt;
                        &lt;/li&gt;
                        &lt;hr&gt;
                        &lt;/ul&gt;
                        
                        &lt;/div&gt;
                        &lt;/li&gt;
                                              
                        &lt;/ul&gt;
    &lt;/div&gt;
        &lt;/body&gt;
    &lt;/html&gt;

popup.js

  

      myApp.service(&#39;pageInfoService&#39;, function() {
            this.getInfo = function(callback) {
                var model = {};
        
                chrome.tabs.query({&#39;active&#39;: true},
                function (tabs) {
                    if (tabs.length &gt; 0)
                    {
                        model.title = tabs[0].title;
                        model.url = tabs[0].url;
        				
                        chrome.tabs.sendMessage(tabs[0].id, { &#39;action&#39;: &#39;PageInfo&#39; }, function (response) {
        
                            model.pageInfos = response;
        					
                            callback(model);
                        });
        				
                    }
        
                });
            };
        });
        myApp.controller(&quot;PageController&quot;, function ($scope, pageInfoService) {
        
            pageInfoService.getInfo(function (info) {			
                $scope.title = info.title;
                $scope.url = info.url;
                $scope.pageInfos = info.pageInfos;
        		$scope.fbshare =  function($src) {
        		 chrome.windows.create({url:&quot;http://www.facebook.com/sharer/sharer.php?u=&quot;+$src});
          };	
          		$scope.twshare =  function($src) {
        		 chrome.windows.create({url:&quot;https://twitter.com/intent/tweet?url=&quot;+$src});
          };
          		$scope.gpshare =  function($src) {
        		 chrome.windows.create({url:&quot;https://plus.google.com/share?url=&quot;+$src});
          };
          		$scope.mailshare =  function($src) {
        		 chrome.windows.create({url:&quot;mailto:?subject=Imagem Partilhada por PinIt&amp;body=&lt;img src=\&quot;&quot;+$src+&quot;\&quot;\\\&gt;&quot;});
          };
          
          	
                
                $scope.$apply();
        		
        		
        	});
        });

Here is my manifest file:

    {
    	&quot;name&quot;: &quot;PinIt&quot;,
    	&quot;version&quot;: &quot;1.0&quot;,
    	&quot;manifest_version&quot;: 2,
    
    	&quot;description&quot;: &quot;Pin It&quot;,
    	&quot;icons&quot;: {
    		&quot;128&quot;: &quot;icon128.png&quot;
    	},
    	&quot;browser_action&quot;: {
    		&quot;default_icon&quot;: &quot;img/defaultIcon19x19.png&quot;,
    		&quot;default_popup&quot;: &quot;popup.html&quot;,
    		&quot;default_title&quot;: &quot;PinIt&quot;
    	},
    	&quot;content_scripts&quot;: [ {
    	&quot;js&quot;: [ &quot;js/lib/jquery-1.8.2.min.js&quot;, &quot;js/app/content.js&quot;, &quot;js/jquery-ui-1.10.3.custom.js&quot; ],
    	&quot;matches&quot;: [ &quot;*://*/*&quot; ],
    	&quot;run_at&quot;: &quot;document_start&quot;
    	} ],
    	&quot;minimum_chrome_version&quot;: &quot;18&quot;,
    	&quot;permissions&quot;: [ &quot;http://*/*&quot;, &quot;https://*/*&quot;, &quot;unlimitedStorage&quot;, &quot;contextMenus&quot;, &quot;cookies&quot;, &quot;tabs&quot;, &quot;notifications&quot; ],
    	&quot;content_security_policy&quot;: &quot;default-src &#39;self&#39;&quot;
    }

any sugestion?

Refused to apply inline style because it violates the following Content Security Policy directive

I have a web app which uses localStorage. Now we want to embed this web app on other (third-party) sites via iframe. We want to provide an iframe embed similar to youtube so that other websites can embed our web app in an iframe. Functionally it is the same as if it wouldn&#39;t be embedded. But it does not work. Chrome prints the error message: 

    Uncaught SecurityError: Failed to read the &#39;localStorage&#39; property from &#39;Window&#39;: Access is denied for this document.

I just do the following check (in the iframe): 

&lt;!-- language: lang-js --&gt;

    if (typeof window.localStorage !== &#39;undefined&#39;) {
        // SETUP SESSION, AUHT, LOCALE, SETTINGS ETC
    } else {
        // PROVIDE FEEDBACK TO THE USER
    }

I checked my security settings in Chrome like described in [another Stackoverflow Thread ][1] but it doesn&#39;t work. Is there any change to make embedding possible without the need of adjusting (default) security settings of most modern browsers? 

To give more information, we use Ember-CLI for our web app and turned on [CSP][2] ([more info about the Ember-CLI CSP][3]). Could CSP cause our web app to throw security errors?


  [1]: https://stackoverflow.com/questions/24456891/iframe-in-chrome-error-uncaught-securityerror-failed-to-read-the-sessionstora
  [2]: http://en.wikipedia.org/wiki/Content_Security_Policy
  [3]: http://www.ember-cli.com/#content-security-policy

Iframe in Chrome error: Failed to read &#39;localStorage&#39; from &#39;Window&#39;: Access denied for this document

I was trying to include JQuery on an existing website using console this way:

    var script = document.createElement(&#39;script&#39;);
    script.src = &#39;http://code.jquery.com/jquery-1.11.1.min.js&#39;;
    script.type = &#39;text/javascript&#39;;
    document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);

Then I got this error:

    Content Security Policy: The page&#39;s settings blocked the loading of a resource at http://code.jquery.com/jquery-1.11.1.min.js ..

During development I might want to include external Javascript. I might not want to copy paste the entire JQuery code since it does not look neat. How to override the content security policy for development purposes?

This would be really useful for quick testing. I might want to convert the script I am writing to a browser extension later on.

**Note** (update): I am writing the script over an existing website and do not have control over setting the Content-Security-Policy header.

How to override content security policy while including script in browser JS console?

In this simple example, I&#39;m trying to set a CSP header with the meta http-equiv header. I included a base64 image and I&#39;m trying to make Chrome load the image.

I thought the `data` keyword should do that,
but somehow it&#39;s not working.

I just get the following error in Developer Tools:

&gt; Refused to load the image &#39;data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7…nw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7&#39; because it violates the following Content Security Policy directive: &quot;img-src &#39;self&#39; data&quot;.

The example code (JSFiddle is not working for this example because I cannot set meta header there):

    &lt;html&gt;
    &lt;head&gt;
    &lt;meta http-equiv=&quot;Content-Security-Policy&quot; content=&quot;
    		default-src &#39;none&#39;;
    		style-src &#39;self&#39; &#39;unsafe-inline&#39;;
    		img-src &#39;self&#39; data;
    		&quot; /&gt;
    	&lt;style&gt;
    		#helloCSP {
    			width: 50px;
    			height: 50px;
    			background: url(data:image/png;base64,R0lGODlhDwAPAOZEAMkJCfAwMMYGBtZMTP75+euIiPFBP+hVVf3v7+iHh/JNTfh9dNUYGPjTvskXFfOLi/daVe96es4eHPWIiOqbi9dNRvzWwexdV9U1NeFSS94iIvuxodVGP/ZsZM8jI+ibm/alluQzMdxSSvbGstwsKu2Yid4iIfjQu/JnYO6djvajlMQEBPvLuOJdXeMxL/3jzPBSTdwqKNY2Mf3i4vU5OfbPz/3f3/zUv/zizO0tLc0NDfMzM+UlJekpKeEhId0dHdUVFdkZGdEREf///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAEQALAAAAAAPAA8AAAepgESCRBsLEDQQCxuDgxYdO5CROx0WgywGAQEKM0M2CpkGN0QvMDmmE0OpE6Y5KEQqPbE9D6lDD7I9IBc8vDwRtRG9PBcuPsY+B7UHxz4hP8/PGghDCBrQPyYxQdvbBUMF3NskGUDl5QwtDOblGSVC7+8JNQnw7yk4Mjr6GLUY+joiBI2QAACABwJDCHgoKOHEoAYVBAgY8GGAxAoNGAmiwMHBCgccKDAKBAA7) no-repeat;
    			border: 1px solid red;
    		}
    	&lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;h1&gt;CSP&lt;/h1&gt;
    	&lt;div id=&quot;helloCSP&quot;&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;

You can also open this example here:  
https://dl.dropboxusercontent.com/u/638360/ps/csp.html


Content Security Policy &quot;data&quot; not working for base64 Images in Chrome 28

Following is my code of HTML

Scripts:

    &lt;script src=&quot;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;background.js&quot;&gt;&lt;/script&gt;


HTML:

    	  &lt;button name=&quot;btnlogin&quot; id=&quot;btnlogin&quot;&gt;Login&lt;/button&gt;&lt;br/&gt;&lt;br/&gt;

and following is js

    $(document).ready(function(){
    document.getElementById(&quot;#btnlogin&quot;).click(function(){
       alert(&quot;s&quot;);
     });
    });


manifest file:

   

    {
    &quot;manifest_version&quot;: 2,
    &quot;name&quot;: &quot;One-click Kittens&quot;,
    &quot;description&quot;: &quot;This extension demonstrates a &#39;browser action&#39; with kittens.&quot;,
     &quot;version&quot;: &quot;1.0&quot;,
    &quot;browser_action&quot;: {
    &quot;default_icon&quot;: &quot;icon.png&quot;,
    &quot;default_popup&quot;: &quot;popup.html&quot;
    },
    }

 

I found that when I run this code simply in browser than alert appears properly but when I run it as a chrome extension it gives me following errors.

**Uncaught ReferenceError: $ is not defined**

and

**Refused to load the script &#39;http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js&#39; because it violates the following Content Security Policy directive: &quot;script-src &#39;self&#39; chrome-extension-resource:&quot;.**


I don&#39;t understand what are these errors. Please help me understanding the extension..

Thank you

Extension refuses to load the script due to Content Security Policy directive

I&#39;m trying to use Google Fonts and I&#39;ve never had any problems, but now when I try to add the CSS file on my header I get this error on the console: 

Refused to load the stylesheet `&#39;http://fonts.googleapis.com/css?family=Whatever&#39;` because it violates the following Content Security Policy directive: `&quot;style-src &#39;self&#39; &#39;unsafe-inline&#39;&quot;`.

Google Fonts violates Content Security Policy

I upgraded my ember-cli app to 0.0.47 and am now getting a bunch of errors in my browser console related to the content security policy. How do I fix this issue?

    Refused to load the script &#39;http://use.typekit.net/abcdef.js&#39; because it violates the following Content Security Policy directive: &quot;script-src &#39;self&#39; &#39;unsafe-eval&#39; localhost:35729&quot;.
     login:1
    Refused to execute inline script because it violates the following Content Security Policy directive: &quot;script-src &#39;self&#39; &#39;unsafe-eval&#39; localhost:35729&quot;. Either the &#39;unsafe-inline&#39; keyword, a hash (&#39;sha256-...&#39;), or a nonce (&#39;nonce-...&#39;) is required to enable inline execution.
     login:20
    Refused to load the script &#39;http://connect.facebook.net/en_US/all.js&#39; because it violates the following Content Security Policy directive: &quot;script-src &#39;self&#39; &#39;unsafe-eval&#39; localhost:35729&quot;.
     login:1
    Refused to load the script &#39;http://maps.googleapis.com/maps/api/js?libraries=places&#39; because it violates the following Content Security Policy directive: &quot;script-src &#39;self&#39; &#39;unsafe-eval&#39; localhost:35729&quot;.

Here are the lines in my app/index.html file:

    &lt;script type=&quot;text/javascript&quot; src=&quot;//use.typekit.net/abcdef.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot;&gt;try{Typekit.load();}catch(e){}&lt;/script&gt;
    &lt;script src=&quot;http://connect.facebook.net/en_US/all.js&quot;&gt;&lt;/script&gt;
    &lt;script type=&quot;text/javascript&quot; src=&quot;http://maps.googleapis.com/maps/api/js?libraries=places&quot;&gt;&lt;/script&gt;


Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

I&#39;m getting a bunch of errors in the developer console:

&gt; Refused to evaluate a string
&gt;
&gt; Refused to execute inline script because it violates the following Content Security Policy directive
&gt;
&gt; Refused to load the script
&gt;
&gt; Refused to load the stylesheet

What&#39;s this all about? How does Content Security Policy (CSP) work? How do I use the `Content-Security-Policy` HTTP header?

Specifically, how to...

 1. ...allow multiple sources?
 2. ...use different directives?
 3. ...use multiple directives?
 4. ...handle ports?
 5. ...handle different protocols?
 6. ...allow `file://` protocol?
 7. ...use inline styles, scripts, and tags `&lt;style&gt;` and `&lt;script&gt;`?
 8. ...allow `eval()`?

And finally:

 9. What exactly does `&#39;self&#39;` mean?




All Content Security-Policy Solutions on Gang of Coders

Total of 13 Content Security-Policy Solutions

How does Content-Security-Policy work with X-Frame-Options?

Content Security Policy: "img-src 'self' data:"

What’s the purpose of the HTML "nonce" attribute for script and style elements?

Refused to load the script because it violates the following Content Security Policy directive

Content Security Policy: The page's settings blocked the loading of a resource

Refused to apply inline style because it violates the following Content Security Policy directive

Iframe in Chrome error: Failed to read 'localStorage' from 'Window': Access denied for this document

How to override content security policy while including script in browser JS console?

Content Security Policy "data" not working for base64 Images in Chrome 28

Extension refuses to load the script due to Content Security Policy directive

Google Fonts violates Content Security Policy

Violating Content Security Policy directive after ember-cli 0.0.47 upgrade

How does Content Security Policy (CSP) work?