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

[deevroman]

https://chromewebstore.google.com/detail/allow-csp-content-securit/hnojoemndpdjofcdaonbefcfecpjfflh it can disable CSP on the site. ⚠️ Important: This can seriously weaken your security

also: https://chromewebstore.google.com/detail/csp-unblock/lkbelpgpclajeekijigjffllhigbhobd

[deevroman]

Perhaps a solution to problems with Leaflet may be available after: Tampermonkey/tampermonkey#2053

[deevroman]

The solution is specific:

1. Intercept the addition of a new image.
2. Remove the loading error handlers (critical only for map tiles, so that there is no flickering)
3. Upload the image via GM.xmlHttpRequest
4. Insert it as dataURL

Chrome — сосать, CSP — сосать