Limenius / ReactRenderer

Client and Server-side React rendering from PHP
MIT License
238 stars 37 forks source link

Allow split Props for a rendering with "both" settings #30

Open grimpows opened 5 years ago

grimpows commented 5 years ago

hey i'm modifying the Actual ReactRenderer to allow different data pass in props, the reason of why i change it may not be generic so i ask here if i should make a PR or no if those reason are estimated valuable to make one.

Then, Actually i have modified my app to stop using LocalStorage for keep JsonWebToken between two access of the website. Now i use cookie while logging (i create a Symfony user cookie and i send a JWT token too in response) then on the first call of the app i send the JWT from Php to the APP (SSR) BUT on client side i dont wanted send the JWT, i wanted the app make an API call with the cookie to get back the token. The main reason is, if i pass the token with props with react on rail (on client-side), i get the same security problem as i wanted dodge by switch from local storage to cookie : any javascript app can check the html data to see the "token" (due to react-on-rail pass data from php to react with a plain html for client side)

in fact, what i have changed for ReactRenderer (only for me, not PR yet that's the reason i ask here for may do one) ? only those part of code :

// ... code before ....
public function reactRenderComponentArray($componentName, array $options = array())
    {
  $clientProps = isset($options['clientProps']) ? $options['clientProps'] : null;
  $serverProps = isset($options['serverProps']) ? $options['serverProps'] : null;
  $clientPropsArray = is_array($clientProps) ? $clientProps : json_decode($clientProps);
  $serverPropsArray = is_array($serverProps) ? $serverProps : json_decode($serverProps);
 //... code again ....
 if ($this->shouldRenderClientSide($options)) {
 //.... kepp all exept change the following line of code
 $clientPropsArray != null ?  json_encode($clientPropsArray)  :  json_encode($data['props'])
}

if ($this->shouldRenderServerSide($options)) {
 //.... kepp all exept change the following line of code
$serverPropsArray != null ? json_encode($serverPropsArray) : json_encode($data['props']),
}

}

this will keep old way (passing only value 'props' for both) working and just let any 'serverProps' or 'clientProps' param override the default 'props' if one or both are set :) mean i can pass a serverProps['token'] and a clientProps without the 'token', as serverProps only used in serverSide, all sensitives data i could pass to it are hided in the DOM created with react-on-rail.

this allow this in twig for exemple

// note that serverProps and clientProps are both set by the controller
{% set app_data = react_component_array(appName, {'serverProps': serverProps, 'clientProps' : clientProps, 'rendering': 'both'}) %}
// ... code for SEO etc ...

// rendering the result without the token in the client HTML (cannot be parsed then)

{{ app_data.componentHtml | raw }}

Thx for reading this and tell me if any PR could be required or if this functionality is too specific to be added to this repo as default

PS : one of the reasons i switched from LocalStorage to Cookie is that post https://dev.to/rdegges/please-stop-using-local-storage-1i04 AND in fact, now i can do a proper SSR with cookie (LocalStorage is only readable from client) without pass the JWT to DOM (that would be on opposite of the solution provided by cookie against localstorage)