Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add blob urls to Content Security Policy headers #2203

Merged
merged 1 commit into from
Jun 23, 2023

Conversation

Vanniix
Copy link
Contributor

@Vanniix Vanniix commented Jun 21, 2023

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.

@bodily11
Copy link

I need this as well. I am working on an efficient generative Ordinals standard, and the best way to do it is inscribe assets separately and then layer them using SVG blobs, meaning blob URLs. This is a simple PR and shouldn't be too crazy to add "blob:" to the CSPs. Happy to help somewhere if needed to push this along.

@utxo-detective
Copy link

+1 to this - having same problem
#2207

@raphjaph
Copy link
Collaborator

I think this makes a lot of sense. Will read up a bit on the exact difference before merging.

Copy link
Collaborator

@raphjaph raphjaph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The security implications are exactly the same as for data: but the encoding seems much more efficient. LGTM!

@raphjaph
Copy link
Collaborator

Closes #2207

@raphjaph raphjaph merged commit a3687ae into ordinals:master Jun 23, 2023
@Vanniix Vanniix deleted the blob-url-support branch March 2, 2024 23:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants