微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

由于内容安全政策(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 举报,一经查实,本站将立刻删除。