How to detect Content Security Policy (CSP)

Question

I noticed that GitHub and Facebook are both implementing this policy now, which restricts third party scripts from being run within their experience/site.

Is there a way to detect whether a document is running against CSP using JavaScript? I'm writing a bookmarklet, and want to give the user a message if they're on a site that doesn't support embedding a script tag.

Answer 1

You can try to catch a CSP violation error using an event "securitypolicyviolation"

From: https://developer.mozilla.org/en-US/docs/Web/API/SecurityPolicyViolationEvent

example:

document.addEventListener("securitypolicyviolation", (e) => {
  console.log(e.blockedURI);    
  console.log(e.violatedDirective);    
  console.log(e.originalPolicy);
});

Answer 2

From https://github.com/angular/angular.js/blob/cf16b241e1c61c22a820ed8211bc2332ede88e62/src/Angular.js#L1150-L1158, function noUnsafeEval

function noUnsafeEval() {
  try {
    /* jshint -W031, -W054 */
    new Function('');
    /* jshint +W031, +W054 */
    return false;
  } catch (e) {
    return true;
  }
}

Answer 3

What about this. For slow connections, the timeout should probably be raised. Onload is what I used to detect it and it seems to work. If it loads then CSP obviously isn't enabled or it is configured improperly.

var CSP = 0;
frame = document.createElement('script');
frame.setAttribute('id', 'theiframe');
frame.setAttribute('src', location.protocol+'//example.com/');
frame.setAttribute('onload', 'CSP=1;');
document.body.appendChild(frame);
setTimeout(function(){if (0 == CSP){alert("CSP IS ENABLED");}}, 250);

Answer 4

From https://hackernoon.com/im-harvesting-credit-card-numbers-and-passwords-from-your-site-here-s-how-9a8cb347c5b5:

fetch(document.location.href)
.then(resp => {
  const csp = resp.headers.get('Content-Security-Policy');
  // does this exist? Is is any good?
});

This will fail however with connect-src='none' and be reported.

Answer 5

An easy way to detect support for CSP is just by checking if JavaScript's eval()-method can be run without throwing an error, like so:

try {
    eval("return false;");
} catch (e) {
    return true;
}

However, this only works if CSP is actually turned on (obviously), with Content-Security-Policy being set in the response headers the page loaded with, and without 'unsafe-eval' in script-src.

I came here looking for a way to detect CSP support in browsers without CSP actually being turned on. It would seem this is not possible though.

On a side note, IE does not support CSP, only the sandbox directive in IE 10+, which, by looking at the CSP standard, does not make it a conformant web browser.

Answer 6

Currently, there is no way to do so in shipping browsers.

However, something such as the following should work, per spec, and does in Chrome with experimental web platform features enabled in chrome://flags/:

function detectCSPInUse() {
  return "securityPolicy" in document ? document.securityPolicy.isActive : false;
}

The SecurityPolicy interface (what you get from document.securityPolicy if it is implemented) has a few attributes that give more detail as to what is currently allowed.

Answer 7

I am checking onError event in my bookmarklet code and prompt a user to install my extension if script is not loaded.

javascript:(function(){
var s=document.createElement('script');
s.setAttribute('type','text/javascript');
s.setAttribute('src','https://example.ru/bookmarklet?hostname=%27+encodeURIComponent(location.hostname));
s.setAttribute('onerror', 'if(confirm(`Downloading from the site is possible only through the "MyExtensionName" extension. Install extension?`)){window.open("https://chrome.google.com/webstore/detail/myextensionlink");}');
document.body.appendChild(s);})();