如何在不违反内联脚本CSP的情况下使用jinja2服务器端渲染 [英] How to use jinja2 server side rendering alongside react without violating inline-script CSP

问题描述

我是React新手，尝试了一下。我想在使用Jinja2模板的Flask站点上使用它。

人们似乎建议首先在服务器端渲染数据，而不是在页面加载时始终对数据进行初始调用。我发现这个 nodejs 的例子，但它只是把页面上的数据放在一个全局变量中一个内联脚本标记。我想知道是否有一个干净的方法来做到这一点，而不仅仅是把数据放在内联脚本标签内的页面上。因为我的安全的CSP策略，我不能使用内联脚本或eval。

是否有一个人们使用的标准模式来为服务器上的React渲染数据而不使用内联变量？

解决方案

您当然可以在通过Jinja进行服务器端渲染的网站上使用它。问题就变成了 - 你想在页面上更新什么而不重新加载？通常，React中的组件状态通过用户交互或更改数据源（即db API）进行更新。

我的经验是通过Jinja呈现静态页面数据，然后使用React组件根据和/或侦听API状态的变化进行更新（也许通过 Flask-Restful ）。这些API可以通过React的生命周期方法（通常是getInitialState或者setState）来访问。例如，你可能有一部分站点被渲染为服务器端的，在 layout.html 中，然后将 {％block content％} 由React js组件呈现在客户端。

  {％extendslayout.html％} 
 
 
 ％} 
 
< h2>某些标题< / h2> 
 
< script type =text / jsxsrc =/ scripts / ReactComponent1.js> 
< / script> 
 
< div id =one> 
 <！ - 这个元素的内容将被ReactComponent1替换。 -   - > 
< / div> 
 
< script type =text / jsxsrc =/ scripts / ReactComponent2.js> 
< / script> 
 
< div id =two> 
 <！ - 这个元素的内容将被ReactComponent2替换。 - > 
< / div> 
 
 
 $ b {％endblock％} 
  

我真的建议通过反应教程并尝试将其应用到一个Flask App。

I am new to React and experimenting a bit. I would like to use it on my Flask site that uses Jinja2 templates.

People seem to recommend to render data on the server-side first instead of having to always make an initial call for data on page load. I found this nodejs example but it just puts the data on the page in a global variable in an inline script tag. I was wondering if there was a clean way to do this other than just putting the data on the page inside an inline script tag. Because of my secure CSP policy I can't use inline scripts or eval.

Is there an standard pattern people use to render data for React on the server without using an inline variable?

解决方案

You can certainly use it on sites that have server side rendering via Jinja. The question becomes - what do you want to update on the page without reloading? Usually, the component state in React is updated via user interaction or a changing data source (i.e. db API).

My experience has been to render (via Jinja) the static page data and then use React components to update based on and/or listen for changes to the state of an API (maybe through Flask-Restful). These APIs can be accessed through React's life cycle methods (usually 'getInitialState' or 'setState')

For example - you may have portions of your site that are rendered server-side in layout.html and then the {% block content %} is rendered client side by the React js components.

{% extends "layout.html" %}


{% block content %}

<h2>Some Header</h2>

<script type="text/jsx" src="/scripts/ReactComponent1.js">
</script>

<div id="one">
<!-- This element's contents will be replaced with ReactComponent1. -   ->
</div>

<script type="text/jsx" src="/scripts/ReactComponent2.js">
</script>

<div id="two">
<!-- This element's contents will be replaced with ReactComponent2. -->
</div>



{% endblock %}

I really recommend going through the React Tutorial and trying to apply it to a Flask App.

这篇关于如何在不违反内联脚本CSP的情况下使用jinja2服务器端渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！