I need to write a client side javascript that prevents other 3rd party scripts requesting certain domain urls on their own. Is there a way to achieve this?
Example setup:
<html>
<body>
<script src="myscript.js" type="text/javascript">
<script src="third-party-script.js" type="text/javascript">
</body>
</html>
now third-party-script.js requests from the domain www.track-me.com, i want to be able to block outgoing track-me.com requests via code inside myscript.js.
You can use a service worker to intercept network requests from your page and handle them as you please.
With CSP you cannot blacklist domains, but you can whitelist them, for example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' https://apis.example.com">
This will only allow requests to your own domain and https://apis.example.com
You can also block all requests:
<meta http-equiv="Content-Security-Policy" content="default-src 'none'">
And with this last idea you can do some sneaky stuff, like loading everything you want, and then in js cutoff every future connection attempts, like this:
Instead of putting that meta tag statically, load all scripts you want to load, then in the last one (or whenever you are ready to go offline) insert the meta tag dynamically:
{ // Go Offline
const meta = document.createElement('meta');
meta.httpEquiv = "Content-Security-Policy";
meta.content = "default-src 'none';";
document.head.appendChild(meta);
}
technicalquestion.<meta>tag) might be the simplest solution (and is a best practice anyway).