I am working on a React application with server side rendering. The app uses Redux for state management and Redux Saga for asynchronous actions. In the pseudo code, what I'm doing on the server side right now:
1) initialize Redux store and run Redux saga on it
2) wait until all necessary data is fetched
3) render React component to string
4) send rendered React component to the client
(along with the populated store for rehydration on the client side)
My problem is in step 4. Now I am passing the processed React component and repository to a view ejsthat looks something like this:
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/styles.css">
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
</head>
<body>
<main><%- app %></main>
<script type="text/javascript" src="/vendor.js"></script>
<script type="text/javascript" src="/bundle.js"></script>
</body>
</html>
(in the above code app, this is the processed React component, and storethis is the Redux repository)
The problem is that the above code, in particular
<script>
var __data = <%-JSON.stringify(store) %>;
</script>
doesn’t avoid html, so if my store contains a tag line <script>, it will be a valid html and will open the application for XSS attacks.
<%- %> <%= %> : var __data = "<%= JSON.stringify(store) %>";, , JSON:
"{"greetingReducer":{"message":"Hello world!"} etc.
, JSON.
, ( ): Redux ( HTML JSON) HTML JavaScript .