ord
ord copied to clipboard
Add blob urls to Content Security Policy headers
This PR is to allow HTML/JS inscriptions to use Blob urls by adding it to the Content Security Policy headers.
Why is this needed?
I am creating a javascript inscription where I draw some stuff onto a canvas, then convert that canvas into a HTML img. I have successfully done this with the following JS code:
let canvas = document.createElement('canvas')
// Draw stuff onto canvas...
let img = document.querySelector('img')
img.src = canvas.toDataURL('image/png')
This works because data:
is included in the Content Security Policy, so data urls are allowed. However, many sources state that blob urls should be used over data urls because they are more performant. So, I would like to do something like this:
let canvas = new OffscreenCanvas(1024, 1024)
// Draw stuff onto canvas...
let img = document.querySelector('img')
img.src = URL.createObjectURL(await canvas.convertToBlob())
However, this gets blocked because blob urls are not included in the Content Security Policy.
Two errors get reported from this:
Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-eval' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the image 'blob:<URL>' because it violates the following Content Security Policy directive: "default-src *:*/content/ *:*/blockheight *:*/blockhash *:*/blockhash/ *:*/blocktime 'unsafe-eval' 'unsafe-inline' data:". Note that 'img-src' was not explicitly set, so 'default-src' is used as a fallback.
This is a very simple change to add blob:
to the Content Security Policy, which resolves these errors.
I have run all tests and they pass. I have also run the server locally and verified that the above code inscription runs successfully after the changes.