Open llmwesee opened 6 months ago
@llmwesee do you see any errors in the console logs?
Sure, It look like this:
Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self' 'nonce-hello'". Either the 'unsafe-inline' keyword, a hash ('sha256-9OlNO0DNEeaVzHL4RZwCLsBHA8WBQ8toBp/4F5XV2nc='), or a nonce ('nonce-...') is required to enable inline execution.
append @ svelte.js:563 append_stylesheet @ svelte.js:617 append_empty_stylesheet @ svelte.js:607 create_style_information @ svelte.js:1663 create_rule @ svelte.js:1689 go @ svelte.js:2503 run @ svelte.js:2561 (anonymous) @ DropdownOptions.svelte:79 flush @ svelte.js:2108 svelte.js:1692 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'insertRule') at create_rule (svelte.js:1692:14) at go (svelte.js:2503:22) at Object.run (svelte.js:2561:5) at DropdownOptions.svelte:79:40 at flush (svelte.js:2108:5)
@abidlabs I have replicated the same error with latest gradio version: 4.22.0
import gradio as gr
print(gr.__file__)
# Define a function to be called when the dropdown selection changes
def greet(name):
return f"Hello, {name}!"
# Create the Gradio interface with a dropdown menu
interface = gr.Interface(
fn=greet,
inputs=[gr.Dropdown(choices=["Alice", "Bob", "Charlie"], label="Select a name")],
outputs="text",
title="Dropdown Greeting App"
)
# Launch the interface
interface.launch()
I have used simple boilerplate dropdown with gradio, I simply just want to use this app with csp headers on, specifically script-src and style-src with self .Plz tell me feasible solution
@abidlabs Is there something more you need for this issue?
Looking into it!
Description
When serving a Gradio app through Nginx with security headers configured, the dropdown feature within the app becomes unresponsive and stuck. This issue persists despite providing a nonce in the headers.
My Nginix config
we have gradio app we have nginx file and dropdown is ont working nginx header:
we cant remnove header , because its for securtyy purpose i.e csp headres and many others issues when we run this porject droipdwon feature not working it get stucked.But without nginx configs it work perfectly fine
we provided nonce but its not working nonce is working in script tag but not in javascript functions
Steps to Reproduce
Set up Nginx server with the provided configuration file. Serve the Gradio app through this Nginx server. Access the Gradio app and attempt to use the dropdown feature. Expected Behavior The dropdown feature should work smoothly without any issues when served through Nginx with the provided security headers.
Actual Behavior
The dropdown feature becomes unresponsive and stuck when served through Nginx with the provided security headers.
Additional Context
The provided Nginx configuration file includes various security headers (such as CSP, HSTS, etc.) for security purposes, which cannot be removed. Nonce has been provided in the headers, and it's functioning correctly in script tags but not in JavaScript functions.
Have you searched existing issues? 🔎
Reproduction
we cant remnove header , because its for securtyy purpose i.e csp headres and many others issues when we run this porject droipdwon feature not working it get stucked.But without nginx configs it work perfectly fine
we provided nonce but its not working nonce is working in script tag but not in javascript functions
Severity
I can work around it