The base form of this attack goes back to the original CSS 1.
Honestly you are massively overreacting. This type of attack was much much easier to pull off in the late 2000s then it is now. Its basically impossible in practise now a days.
Turning off JS permanently is like keeping your wallet in a safe you carry around all the time because once in a while you need to visit the dangerous parts of the town.
Most site shouldn't run any js after content is loaded.
I hope there's something like <body onload="js.disable()">
I can only do it manually in DevTool.
As a web developer: You can use Content Security Policy to limit or disable JS, as well as other resources such as CSS and images.
JS is essential for polished UX when you have highly interactive components. Technically mapquest got server-rendered interactive maps working, but no one would choose that over the usability of Google Maps or OpenStreetMaps today
apparently, single-page-apps is an unstoppable trend. I tried to disable JS and 99% site won't work.
But for content sites, after the article is loaded, disabling JS provides a much better reading experience.
> but no one would choose that over the usability of Google Maps or OpenStreetMaps today
That's a valid use for JS. But if you think about it, can we make a js free map tool using technics from OP's article? https://codepen.io/rebane2001/details/OPVQXMv
Basically i dont think anyone should worry about this.
All website operators should read this imo: https://cheatsheetseries.owasp.org/cheatsheets/HTTP_Headers_...
I've been able to make realistic attacks against multiple targets. Many services, such as Google Docs, need to enable cross-origin framing for their functionality.
And beyond that, even if you restrict the framing, it might still be possible to clickjack as a part of a more complex attack chain, see: https://lyra.horse/blog/2024/09/using-youtube-to-steal-your-...
And the attack in OP does not require iframes, so it can also be applied to injection attacks where CSP prevents javascript for example.
(disclaimer: author of story)
Researchers have observed that, in Chrome:
A hostile webpage can create SVG or CSS filters that cover an iframe on the same page and act on the iframe's content.
Specially-crafted filters can be created that vary their performance characteristics (different use of memory bandwidth or compute resources) based on input data.
The induced differences in load can, in turn, be used to leak the input data through a timing sidechannel readable from Javascript.
You can do that by either adding a header to your network requests, o̶r̶ ̶b̶y̶ ̶a̶d̶d̶i̶n̶g̶ ̶t̶h̶e̶ ̶f̶o̶l̶l̶o̶w̶i̶n̶g̶ ̶m̶e̶t̶a̶ ̶t̶a̶g̶ ̶t̶o̶ ̶y̶o̶u̶r̶ ̶p̶a̶g̶e̶:̶
̶<̶m̶e̶t̶a̶ ̶h̶t̶t̶p̶-̶e̶q̶u̶i̶v̶=̶"̶X̶-̶F̶r̶a̶m̶e̶-̶O̶p̶t̶i̶o̶n̶s̶"̶ ̶c̶o̶n̶t̶e̶n̶t̶=̶"̶D̶E̶N̶Y̶"̶>̶
EDIT:
According to MDN, it will only work by adding it to your headers. See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/...