Drag Change Img - Blocked Download


Not too sure if it’s something I’m doing wrong or an issue with HuggingFace but I’ve created a HuggingFace Space using this code:

import gradio as gr

img_html = '''
<img ondragstart="imgChange(event)" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS4n_urpJ9XpwOTdzBVbGvactwHrPagYQrTJPYjxfxLGkSyu7nJZVqRVGAeohnPgKMrnKE&usqp=CAU">

img_js = '''
function imgFunc(x){
    let script = document.createElement('script');    
    script.innerHTML = "function imgChange(event){ event.dataTransfer.setData('DownloadURL', 'image/png:test.png:https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png')}"

with gr.Blocks() as app:
    with gr.Row():
    app.load(_js = img_js)

You can find the space here: Drag Error - a Hugging Face Space by bradley6597

When I try and drag the image into a folder on my computer it looks like it is blocked by Chrome?

A further note: it strangely works when running this locally just not on a HuggingFace space?

Edit: It looks like it is something to do with it being embedded in an iFrame. If the url is a huggingface url I don’t seem to have the same issue.