GithubHelp home page GithubHelp logo

Comments (6)

roj1512 avatar roj1512 commented on June 11, 2024 1
<head dangerouslySetInnerHTML={{ __html: "<script>console.log(1);</script>" }} />

from fresh.

marvinhagemeister avatar marvinhagemeister commented on June 11, 2024

I'm afraid I don't have enough context on how dangerouslySetInnerHTML was used in combination with <head>. Can you share more context?

from fresh.

marvinhagemeister avatar marvinhagemeister commented on June 11, 2024

Thanks for sharing more context. I see, that's the expected behavior. Setting dangerouslySetInnerHTML basically says: "Replace all of this elements content with the HTML string". It's the same thing as if you'd set .innerHTML on an HTML element directly. The way the .innerHTML property works is that it discards any child nodes present before and overwrites it with the passed HTML string.

from fresh.

roj1512 avatar roj1512 commented on June 11, 2024

What is your recommendation to add arbitrary code to the head based on string-based config? Parse the HTML and convert it to JSX elements on the fly?

from fresh.

CAYdenberg avatar CAYdenberg commented on June 11, 2024

I provided some quick code here: #2360 (reply in thread)

You might have to expand to other tags (eg link) depending on your use-case, but I really think it's going to be a better strategy overall to have tight control over the HTML you are writing rather than "dangerous" injection of code.

If you're trying to inject a script, there's probably a better way to achieve your ultimate goal, however. Can you provide more info on the problem you're trying to solve?

from fresh.

roj1512 avatar roj1512 commented on June 11, 2024

I have multiple things: some comments, a <noscript>, and a <script>. I think I better inject it in the middleware by interfering with the response stream through a custom ReadableStream impl.

from fresh.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.