Is it necessary to use inline JavaScript with React? Would React therefore get blocked by default by Content Security Policies (CSPs)?
https://softwareengineering.stackexchange.com/questions/330871
-
27-12-2020 - |
Question
According to https://www.quora.com/What-are-the-key-difference-between-ReactNative-and-NativeScript/answer/Valentin-Stoychev , "ReactNative as using the notation found in React for inlining the UI declaration in a single file." Is this supposed to mean that when writing React (or ReactNative) code you have to use inline JavaScript?
Would React therefore get blocked by default by a Content Security Policy (CSP)?
According to http://www.asd.gov.au/publications/protect/protecting_web_apps.htm :
A Content Security Policy (CSP) provides security controls which can mitigate attacks such as cross-site scripting (XSS) and other attacks based on introducing malicious or otherwise undesirable content into a web application. A CSP achieves this by specifying a whitelist of content sources for a web application that a compatible browser then enforces. A large variety of content can be controlled using a CSP including scripts, images and audio or video.
By default, a CSP also implements other mitigations beyond whitelisting content sources. The main additional mitigations are:
- Inline JavaScript will not execute: this mitigates the most common types of XSS attacks.
- JavaScript code will not be created from strings: this prevents attackers abusing JavaScript functionality to execute arbitrary JavaScript code.
P.S. I'm totally new to React.
Solution
No, that's a totally different thing :-) He simply meant that when you write react, you put the UI directly into the component (although you can of yourse also put it in a separate "template" file and then reuse it).
Something like this:
class Thing extends React.Component {
render() {
return <div>{this.props.text}</div>
}
}