Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Dangerously set inner HTML in Head #17894

Closed
botv opened this issue Oct 14, 2020 · 12 comments
Closed

Dangerously set inner HTML in Head #17894

botv opened this issue Oct 14, 2020 · 12 comments

Comments

@botv
Copy link
Contributor

botv commented Oct 14, 2020 •
edited
Loading

Bug report

Describe the bug

Dangerously setting inner HTML does not work directly on the <Head /> tag as described in #8478 (comment). For example:

function Layout({ children }) {
  return (
    <>
      <Head dangerouslySetInnerHTML={{ __html: '<script>console.log(\'Hello, World!\'</script>' }} />
      {children}
    </>
  );
}

Are there any other ways of doing this? Or am I doing something wrong here?

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

  1. Go to https://codesandbox.io/s/nextjs-dangerously-set-inner-html-in-head-7vcxc
  2. Check the console

Expected behavior

The console should show Hello, World!.

System information

  • OS: macOS
  • Version of Next.js: latest
  • Version of Node.js: v14.9.0

Additional context

I cannot use _document.js.
@balazsorban44
Copy link
Member

Try:

function Layout({ children }) {
  return (
    <>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: 'console.log(\'Hello, World!\')' }} />
      </Head>
      {children}
    </>
  );
}

@botv
Copy link
Contributor Author

botv commented Oct 14, 2020 •
edited
Loading

@balazsorban44 this works, however, the idea is to allow my users to submit custom HTML they'd like added to <head> in the app. So I'd need to be able to add HTML, including meta tags, to the head after fetching it from the db. Any ideas for how I can do this? (I retrieve the data in a hook which is why I cannot use _document.js.)

@balazsorban44
Copy link
Member

I'm no expert on the topic, but I am not sure allowing your users to modify their html is a secure 🔐 /good idea, it's not a coincidence it's called dangerously set HTML. It's vulnerable enough if it comes from a secure place, getting it from users without sanitisation of some sort could be dangerous. (again, no expert though, can be wrong, maybe you know what you are doing)

Do you have a proper use case?

Wouldn't Google Tag Manager work to add extra tags dynamically in the head?

@botv
Copy link
Contributor Author

botv commented Oct 14, 2020

My use case is a B2B SaaS help center service where customers can add their own analytics tags and SEO in their sites. I've seen it done a few other times, Google Tag Manager works but it's a hassle as a customer to have to set that up just to add an analytics tool to your help center.

@timneutkens
Copy link
Member

#8478 (comment) refers to _document.js. It's not supported for next/head. So this is not a bug.

@darrylmabini

This comment has been minimized.

Sign in to view
@VitamineC
Copy link

VitamineC commented Jan 27, 2022 •
edited
Loading

https://www.npmjs.com/package/html-react-parser
It helped me
<Head>{parse(head)}</Head>

@styxlab
Copy link
Contributor

styxlab commented Feb 9, 2022 •
edited
Loading

@VitamineC: thanks for your idea - it works, but unnecessarily increases bundle size. I see that this is not a bug but would also vote for adding this as a feature. The dangerouslySetInnerHTML attribute is always dangerous, so I don't see that it is more dangerous directly in the head. It would open up some interesting use case that are hard to implement otherwise.

@VitamineC
Copy link

@styxlab, I completly agree with you. It's just workaround for fix this issue.

@styxlab
Copy link
Contributor

styxlab commented Feb 9, 2022

There is an interesting react rfc so you might be able to do

<Head>
   <Fragment dangerouslySetInnerHTML={{ __html: `` }} />
<Head/>

That's something for the future!

@hilmanski
Copy link

https://www.npmjs.com/package/html-react-parser It helped me <Head>{parse(head)}</Head>

HI Do you add it on _document.js ?
or where/how do you implement this workaround? where is 'head' comes from?

@github-actions
Copy link
Contributor

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Apr 10, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@hilmanski @timneutkens @darrylmabini @balazsorban44 @styxlab @VitamineC @botv