Copy of code blocks does not work for LAN access

[Kilig947]

Describe the bug

When I access my application on the LAN and click the copy button in the code block, an error is reported
If I access localhost, the problem will no longer exist
Please fix it as soon as possible

Is there an existing issue for this?

• I have searched the existing issues

Reproduction

.launch(server_name="0.0.0.0"

Screenshot

No response

Logs

properties of undefined (reading 'writeText')
    at HTMLButtonElement.<anonymous> (ChatBot.svelte:57:25)
(匿名) @ ChatBot.svelte:57
ChatBot.svelte:5

System Info

no

Severity

annoying

[Kilig947]

This error is due to the browser security policy that does not allow the navigator.clipboard.writeText() method when accessing on a LAN. This is to prevent malicious websites from abusing the clipboard function.

The reason it works properly when accessed locally is that the local environment is considered a trusted environment and therefore the clipboard API can be used.

To solve this problem, you can use a library or technology such as clipboard.js, which provides cross-browser clipboard functionality and is not restricted by browser security policies. The following is sample code for using clipboard.js:

1. First, you need to introduce the clipboard.js library. You can download the library from the official website, or use the CDN link: ``clipboard.js`:

<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>

2. Then, in your code, replace the following code:

navigator.clipboard.writeText(code_node.innerText.trimEnd()).

for:

const clipboard = new ClipboardJS(button, {
  text: function() {
    return code_node.innerText.trimEnd().
  }
}).

Make sure you have properly introduced the clipboard.js library and added it to the handler for the button click event.

By using clipboard.js, you can use the clipboard functionality properly in a LAN environment while avoiding the restrictions of browser security policies.

Translated with www.DeepL.com/Translator (free version)

[abidlabs]

Hi @Kilig947 it looks like you are using an older version of Gradio. Can you confirm if this is still an issue in the latest version of gradio (3.32)?

[Kilig947]

Hi @Kilig947 it looks like you are using an older version of Gradio. Can you confirm if this is still an issue in the latest version of gradio (3.32)?
Is drawing HTML code no longer supported in 3.32.0 chatbot? If I throw the HTML code to chatbot, it will display it directly in source code 🥲 🥲 🥲 🥲 🥲

[Kilig947]

demo.queue(concurrency_count=CONCURRENT_COUNT).launch(server_name=f"{func_box.ipaddr()}", share=True, server_port=PORT, auth=AUTHENTICATION)
The start-up parameters are as above, and when the copy button is clicked, no error is reported, but the copy is not successful either🥲

[Kilig947]

(Light theme): http://localhost:7891
(dark theme): http://10.13.78.56:7891/? __theme=dark

Both in 3.28.3 and 3.32.0, when I visit http://localhost:7891, the copy button works fine, but when I visit http://10.13.78.56:7891/? __theme=dark, the copy button does not work properly

demo.queue(concurrency_count=CONCURRENT_COUNT).launch(server_name=f"{func_box.ipaddr()}", share=True, server_port=PORT, auth=AUTHENTICATION) The start-up parameters are as above, and when the copy button is clicked, no error is reported, but the copy is not successful either🥲

[binary-husky]

I have fixed this issue in #4350

@Kilig947 @abidlabs

[Kilig947]

大佬牛皮