0


read as string in react js instead of its function

this the full code

render:

   var deskripsi = <p>{products.deskripsi}</p>;

return:
{deskripsi}

deskripsi data:

  BODY<br/>
    Dimensions : 156.9 x 75.8 x 7.8 mm (6.18 x 2.98 x 0.31 in)<br>
    Weight : 168 g (5.93 oz) <br/>
    Build : Front glass, plastic body <br/>
    SIM : Single SIM (Nano-SIM) or Dual SIM (Nano-SIM, dual stand-by) <br/>

thanks in advance!

emzki
  • 88
  • 7
Naufal Syauqi
  • 7
  • 5

1 Answers1

0

If you want to render a variable containing HTML tags, you could use the dangerouslySetInnerHtml property: documentation on reactjs.org - DOM Elements # dangerouslySetInnerHtml.

Note this is, as said, dangerous. It's explained in the documentation rendering HTML from a variable could be a XSS vulnerability:

In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

For more information, you should read articles on this topic. Here is an article to explain XSS attacks:

Cross-Site Scripting (XSS) is a vulnerability in web applications and also the name of a client side attack in which the attacker injects and runs a malicious script into a legitimate web page. Browsers are capable of displaying HTML and executing JavaScript.

— Satyam Singh, Oct 4, 2018 - 5 Practical Scenarios for XSS Attacks - pentest-tools.com

Using the dangerouslySetInnerHtml property, your code should look like this:

var deskripsi = <p dangerouslySetInnerHTML={ __html: products.deskripsi }></p>;

Hope it'll help!

Paul Rey
  • 1,270
  • 1
  • 15
  • 26
  • If you are aware of the vulnerability, some workarounds maybe exist. The topic is discussed in this StackOverflow question: https://stackoverflow.com/questions/29044518/safe-alternative-to-dangerouslysetinnerhtml – Paul Rey Nov 12 '19 at 13:42