How to inject scripts using dangerouslysetinnerhtml on Client-Side Rendering?
Have you ever encountered a situation or problem where you needed to inject scripts with HTML on client-side rendering(referred as CSR from hereafter), like when you need to inject HTML content containing scripts coming from any data source? Since you are injecting scripts and HTML in the DOM, so these can’t be React components as you just need to set these in the DOM and don’t want to React to take care of updates of these.
Approach 1: One way to achieve this is by :
This will work same as the next approach but it differs only in the way that React won’t know about this update that has happened because its an external update and in the next update while diffing the virtual DOM and the actual DOM it will replace with what it thinks is the appropriate DOM element over your set content.
Approach 2: So the other approach is using dangerouslysetinnerhtml. You can read more about it here. Basically it is React’s implementation of innerHTML but it lets React know that the HTML inside of that component is not something it cares about. Now another problem kicks in is if you inject scripts using the first method or second method, in both the cases the script won’t be executed. The reasoning behind this behaviour can be found here. There are many ways to counter this problem with some hacks. Some of them are listed below:
Solution 1: Extracting script from content and executing it
Firstly you can extract the scripts from your content which contains both script and HTML. One can extract the script from content using suitable regex. Then you can inject the script. Both are illustrated below:
Solution 2: Using eval()
We can achieve the above result using eval() function too but both have their pros and cons. I prefer using the new Function(). You can find more about them here.
Solution 3: Using React Helmet
We can also achieve Solution 1 using react-helmet. If your project already includes it, then feel free to use it and better use it over Solution 1. Following is the illustration of how we can use it:
Solution 4: Using <iframe>
We can always execute the script using an <iframe>. If you don’t need to control the script such as the script is external then create an <iframe> and it will be executed. You can use this if other approaches don’t work.
Solution 5: Using a dummy image
Now you know many ways to counter the problem, feel free to comment any query or comment down below if there is any better approach than the ones listed above.
For any further queries, you can reach out to me at my mail: amitsingh5198@gmail.com
