Bypass CSP for img.src in Chromium

[deevroman]

Currently, switching satellite images only works in Firefox. It is implemented by simply replacing the src tag

better-osm-org/better-osm-org.user.js

Line 749 in 00555e8

i.src = SatellitePrefix + xyz.z + "/" + xyz.y + "/" + xyz.x;

But this does not work in Chromium, which for some reason takes into account image-src CSP

1. Possible workaround

Create an with the desired tile using GM_AddElement, and call replaceWith()

better-osm-org/better-osm-org.user.js

Lines 751 to 756 in 00555e8

	const newImg = GM_addElement(document.body, "img", {
	src: SatellitePrefix + xyz.z + "/" + xyz.y + "/" + xyz.x
	})
	newImg.classList = i.classList
	newImg.style.cssText = i.style.cssText;
	i.replaceWith(newImg)

But this breaks Leaflet: when zooming in, new tiles are not loaded (you can get around it by switching tiles twice)

replaceWith probably breaks tile object references that are important for Leaflet. (event handlers?)

---

I have no idea how to overcome this or even understanding how GM_addElement bypasses CSP

Interesting points in the ViolentMonkey source code

https://github.com/violentmonkey/violentmonkey/blob/692ffb97743fbbcd549d1ed81969e915125ebfd7/src/injected/content/gm-api-content.js#L31

https://github.com/violentmonkey/violentmonkey/blob/692ffb97743fbbcd549d1ed81969e915125ebfd7/src/background/utils/preinject.js#L625

[deevroman]

Not exactly about CSP, but probably solving this problem will also help to bypass bypass CORS for some imagery