Neos CMS如何向HTML元素添加<script>代码？

Neos CMS原生HTML内容元素过滤script标签是默认的安全策略，避免未授权的脚本注入风险，你可以通过以下两种正规方案实现需求：

• 方案1：全局/指定页面注入JS #

  适合需要全站或单个页面固定加载JS的场景，直接通过Fusion配置插入脚本即可：

  1. 若使用外部JS文件，将脚本存放到站点包的Resources/Public/JS/目录下，在站点根Fusion文件（通常为Resources/Private/Fusion/Root.fusion）中添加如下配置：

  page = Neos.Neos:Page {
    # 插入到页面头部，需要DOM加载完成再执行可以加defer属性
    head.javascripts.myCustomScript = Neos.Fusion:Tag {
      tagName = 'script'
      attributes = {
        src = Neos.Fusion:ResourceUri {
          path = 'resource://你的站点包名/Public/JS/custom.js'
        }
        defer = 'defer'
      }
    }
    # 如果要插入到页面底部，就写在body.javascripts下
    # body.javascripts.myCustomScript = xxx
  }
  

  2. 如果是短的内联JS，不需要引入外部文件，可以直接写content属性：

  head.javascripts.myInlineScript = Neos.Fusion:Tag {
    tagName = 'script'
    content = 'console.log("内联JS执行成功");'
  }
  

  要是只需要在单个页面生效，把上述配置写到对应页面类型的Fusion配置里即可。

• 方案2：自定义可插入JS的内容组件 #

  适合需要在页面任意位置灵活插入不同JS的场景，你可以自己开发一个专门的JS内容组件：

  1. 首先定义节点类型，新建Configuration/NodeTypes.Content.CustomScript.yaml文件：

  '你的站点包名:Content.CustomScript':
    superTypes:
      'Neos.Neos:Content': true
    ui:
      label: '自定义JS代码'
      group: 'general'
      inspector:
        groups:
          scriptConfig:
            label: '脚本配置'
            icon: 'icon-code'
    properties:
      scriptCode:
        type: 'string'
        ui:
          label: 'JS代码内容'
          inspector:
            group: 'scriptConfig'
            editor: 'Neos.Neos/Inspector/Editors/CodeEditor'
            editorOptions:
              highlightingMode: 'text/javascript'
              buttonLabel: '编辑JS代码'
  

  2. 配置组件渲染逻辑，新建Resources/Private/Fusion/Content/CustomScript.fusion文件：

  prototype(你的站点包名:Content.CustomScript) < prototype(Neos.Neos:ContentComponent) {
    renderer = Neos.Fusion:Tag {
      tagName = 'script'
      content = ${props.scriptCode}
      # 可按需添加defer、async等属性
      # attributes.defer = 'defer'
    }
  }
  

  配置完成后刷新后台，就可以在内容组件列表中找到「自定义JS代码」组件，插入到页面任意位置后在右侧面板填写JS代码即可生效。

安全提示：如果该组件会开放给非管理员用户使用，建议添加代码内容校验和权限控制，避免恶意脚本注入风险。

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