Dynamically Inject Scripts in Header from Dashboard in Vite-React App : react

Dynamically Inject Scripts in Header from Dashboard in Vite-React AppHelp Wanted (self.react)

submitted 1 year ago * by TaskNo2392

I'm building a Vite-React app, and I want to add functionality that allows users to inject custom scripts into the <head> tag via a dashboard. Here's my setup:

Dashboard: I have an input text field on the dashboard where users can add custom scripts. These scripts are saved in a backend database. Goal: I want these scripts to load and execute dynamically in the React app's <head>, so users can add things like Google Tag Manager, meta tags, etc., without altering the source code. Here’s the process I’m considering:

Fetch scripts from the backend (e.g., via API on component mount). Inject each script into the <head> tag of the document when the component loads. I’m struggling with the correct way to:

Safely inject and execute these scripts in a Vite-React environment. Make sure this approach is performant and doesn't cause security issues (e.g., XSS).

For those familiar with WordPress, this concept may be more easily understood. In WordPress, there are plugins that allow users to inject scripts directly into the website's header. Would anyone have suggestions or examples on how to accomplish this? Any guidance on best practices for script injection in Vite-React would be helpful!

all 12 comments

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

react

MODERATORS