如何在不违反内联脚本 CSP 的情况下使用 jinja2 服务器端渲染和反应

Question

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

人们似乎建议先在服务器端呈现数据，而不必总是在页面加载时对数据进行初始调用。我找到了这个 nodejs 示例，但它只是将页面上的数据放在内联脚本标记中的全局变量中。我想知道除了将页面上的数据放在内联脚本标记内之外，是否有一种干净的方法可以做到这一点。由于我的安全 CSP 策略，我不能使用内联脚本或 eval。

人们是否使用标准模式在不使用内联变量的情况下在服务器上为 React 呈现数据？

Answer 1

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

我的经验是渲染（通过 Jinja）静态页面数据，然后使用 React 组件基于 and/or 更新监听 API 状态的变化（可能通过 Flask-Restful).这些 API 可以通过 React 的生命周期方法访问（通常是 'getInitialState' 或 'setState'）

例如 - 您的网站部分可能在 layout.html 中呈现服务器端，然后 {% block content %} 由 React js 组件在客户端呈现。

{% 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 %}

我真的建议通读 React Tutorial 并尝试将其应用于 Flask 应用程序。

Answer 2

将其放在 element 组件（或您可以找到的任何其他元素）的数据属性中：

<div id="one" data-component-initial="{}">
</div>

然后在您的 React 脚本中，使用此数据来渲染组件而不是 ajax 调用。

如何在不违反内联脚本 CSP 的情况下使用 jinja2 服务器端渲染和反应

How to use jinja2 server side rendering alongside react without violating inline-script CSP

javascript

jinja2

flask

content-security-policy

reactjs