5. Content-Security-Policy¶

5.1. CSP “style-src ‘self’ …”¶

CSP “style-src ‘self’ …” does not throw an exception, but it can be caught with the following event handler (source: javascript - How to detect Content Security Policy (CSP): Event Handler)

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

Adding styles to the document triggers the following messages:

Content-Security-Policy: Die Einstellungen der Seite haben die
Anwendung eines Inline-Styles (style-src-elem) blockiert, da er
gegen folgende Direktive verstößt: "style-src 'self' ..."
// from event handler:
blockedURI: inline
violatedDirective: style-src-elem

It is still possible to add constructed style sheets to document.adoptedStyleSheets without triggering a CSP violation.

5.2. CSP “script-src ‘self’ …”¶

CSP “script-src ‘self’ …” can be caught with an exception, e.g.

try { eval( " 1+ 1"); } catch (error) { console.log("e:", error); }
e: EvalError: call to eval() blocked by CSP

It also triggers the following messages:

Content-Security-Policy: Die Einstellungen der Seite haben die
Ausführung eines JavaScript-Evals (script-src) blockiert, da es
gegen folgende Direktive verstößt: "script-src 'self' ..."
// from event handler:
blockedURI: eval
violatedDirective: script-src

Angular does it this way (source javascript - How to detect Content Security Policy (CSP): Angular).

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

A javascript link can still be added to the document, e.g.

var parents = [], parent, node;
var div = document.createElement("div");

parent = div;
node = document.createElement("a");
node.textContent = "a javascript link (hiv)";
node.setAttribute("href", "javascript:%28function%28%29%7Bvar%20search_type%3D%22tv%22%3B%28function%28%29%7Blet%20value%3D%22none%22%3Bif%28window.hiv_active%29%7Bvalue%3D%22%22%3B%7D%0Adocument.querySelectorAll%28%22img%22%29.forEach%28function%28n%29%7Bn.style.display%3Dvalue%3B%7D%29%3Bdocument.querySelectorAll%28%22iframe%22%29.forEach%28function%28n%29%7Bn.style.display%3Dvalue%3B%7D%29%3Bdocument.querySelectorAll%28%22video%22%29.forEach%28function%28n%29%7Bn.style.display%3Dvalue%3B%7D%29%3Bwindow.hiv_active%3D%21window.hiv_active%3B%7D%29%28%29%3B%7D%29%28%29");
parent.appendChild(node);

document.querySelector("body").append(div)

However, clicking it triggers the CSP violation notice.

When injecting the link from a bookmarklet, no CSP violation is triggered.

When adding a link and attaching an event handler, e.g.

div = document.createElement("div");
parent = div;
node = document.createElement("a");
node.textContent = "a click handler";
parent.appendChild(node);

document.querySelector("body").append(div);

div.addEventListener("click", function (e) { console.log("hello world!"); return true; });
div.click();

the JavaScript code is executed without triggering a CSP violation.

The JavaScript code from extensions is also injected into the document without triggering a CSP violation.