TYPO3 12.4.13中f:security.nonce视图助手部分场景无法生成nonce

在TYPO3 12.4.13中配置CSP指令时，通过扩展方式为script-src定义nonce值以允许内联脚本，使用f:security.nonce()视图助手生成nonce值，但当内联脚本中存在**尾逗号（trailing comma）**时，视图助手无法正常输出nonce哈希值，反而直接显示{f:security.nonce()}原标签。

问题复现示例 #

正常生效场景： #

{f:security.nonce()}  <!-- 输出哈希值如0NnkfpY8... -->
<script nonce="{f:security.nonce()}">
    let map;

    async function initMap() {
        // Map
        map = new Map(document.getElementById("map"), {});
    }

    initMap();
</script>

添加尾逗号后失效场景： #

{f:security.nonce()} <!-- 直接输出{f:security.nonce()} -->
<script nonce="{f:security.nonce()}">
    let map;

    async function initMap() {
        // Map
        map = new Map(document.getElementById("map"), {
            zoom: 14,
        });
    }

    initMap();
</script>

另一个常量声明添加尾逗号的失效场景：

{f:security.nonce()} <!-- 直接输出{f:security.nonce()} -->
<script nonce="{f:security.nonce()}">
    let map;

    async function initMap() {
        // Set map constants
        const centerPosition = { lat: xxx, lng: xxx },
              mapStyle = "xxxxxx",
              markerPosition = centerPosition;
    }

    initMap();
</script>

解决办法 #

1. 移除尾逗号 #

直接删除对象或变量声明末尾的尾逗号，避免触发Fluid解析器的异常逻辑：

<script nonce="{f:security.nonce()}">
    let map;

    async function initMap() {
        // Map
        map = new Map(document.getElementById("map"), {
            zoom: 14
        });
    }

    initMap();
</script>

2. 提前赋值nonce变量 #

在模板开头将nonce值赋值给一个变量，后续脚本中直接引用该变量，避免脚本内容干扰视图助手的渲染：

{nonce = f:security.nonce()}
{nonce} <!-- 正常输出哈希值 -->
<script nonce="{nonce}">
    let map;

    async function initMap() {
        // Map
        map = new Map(document.getElementById("map"), {
            zoom: 14,
        });
    }

    initMap();
</script>

3. 使用CDATA包裹脚本内容 #

在<script>标签内添加CDATA标记，让Fluid解析器将脚本内容视为纯文本，不进行模板语法解析：

{f:security.nonce()}
<script nonce="{f:security.nonce()}">
//<![CDATA[
    let map;

    async function initMap() {
        // Map
        map = new Map(document.getElementById("map"), {
            zoom: 14,
        });
    }

    initMap();
//]]>
</script>

4. 迁移至外部脚本文件（推荐） #

遵循CSP最佳实践，将内联脚本移至单独的外部JS文件，通过nonce加载外部脚本，彻底避免Fluid解析问题：

<script nonce="{f:security.nonce()}" src="/path/to/your/map-script.js"></script>

内容的提问来源于stack exchange，提问作者Paradonix