动态地将现时值添加到HTML wp-block中的内联脚本标签集WordPress编辑器

编程问答 2022-06-12

问题描述

由于内容安全政策（CSP），如果它们的内联<script>标记不包含nonce=" ... "变量，则会被阻止。我使用模板顶部的内置wordpress方法在PHP中创建$ nonce变量：

<?PHP $nonce = wp_create_nonce( 'secret-for-inline-js' ); ?>

然后，我在html中评估脚本标签的现时值，以使其可以被PHP回显到输出中。此功能适用于页面编辑器中位于普通HTML类型的两个wp块中的除两个脚本之外的所有脚本。

<?PHP
    if ( ! wp_verify_nonce( $nonce,'secret-for-inline-js' ) ) {
        die( __( 'You cannot do that','textdomain' ) ); 
    } else { ?>
    <script nonce="<?PHP echo $nonce ?>"> // JS goes here 
    </script>
<?PHP } ?>

编辑器中的代码块使用Chart.js的config加载JS脚本（图表库从我在CSP中明确授权的外部源正确加载）。客户想要编辑图表，因此必须像这样。我也需要在此处将nonce变量添加到脚本标签中，因为我不能在CSP中使用'unsafe-inline'值作为script-src的值（因为它与使用CSP的整个观点相矛盾）。

我知道以不同的方法读取html或javascript中的PHP变量，以及将其传递到脚本标签中的方法，如下所示：

Adding nonce to <script> tag

How do I pass variables and data from PHP to JavaScript?

但是，我无法执行此操作，因为script标记不是通过wordpress functions.PHP设置加载的典型外部javascript。我不能使用PHP，因为编辑器不支持它（出于安全考虑，我不能使用PHP插件允许编辑器PHP）。

因此，我想知道是否有一种工作方法可以在从WP编辑器中读取变量时将变量放入<script nonce="variable_here">中。

到目前为止，我唯一的想法是在这两个脚本标签中添加一个类/ id，并在它们被html读取后以JS作为目标，然后更改脚本标签的内容（但我不确定是否这实际上将使其运行并加载chart.js）。我看不到将所有内容包装在强制执行内部内容的JS函数中的方法，因为此脚本还需要运行nonce参数才能运行...！

感谢您的建议。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljavascriptwordpresswordpresswordpress-gutenberg