NextJS中CookieBot的data-blockingmode=auto拦截动态脚本加载的问题咨询

1. 为NextJS动态生成的脚本传入data-cookieconsent='ignore'属性的方法 #

根据动态脚本的生成场景不同，对应处理方式如下：

• 使用NextJS官方next/script组件加载的自定义/第三方动态脚本：直接将data-cookieconsent="ignore"作为自定义属性传入组件标签即可，NextJS会自动将所有非内置属性透传到最终渲染的<script>标签上，示例代码：

  import Script from 'next/script'
  
  <Script
    src="/your-dynamic-function-script.js"
    data-cookieconsent="ignore"
    strategy="afterInteractive"
  />
  

• 运行时通过JS手动创建并插入DOM的动态脚本：在脚本元素插入DOM之前，直接通过dataset接口设置属性即可，示例代码：

  const customScript = document.createElement('script')
  customScript.src = '/dynamic-script-path.js'
  // 等价于给标签添加data-cookieconsent="ignore"属性
  customScript.dataset.cookieconsent = 'ignore'
  document.body.appendChild(customScript)
  

• NextJS框架本身自动注入的公共运行时脚本（即NextScript组件输出的路由、页面水合等核心功能脚本）：这类脚本是NextJS渲染的必需资源，无法通过单个标签传递属性，需要通过CookieBot的白名单规则配置跳过拦截。

2. CookieBot侧可落地的配置方案 #

在不修改data-blockingmode默认值的前提下，可以通过控制台配置解决当前的拦截误判问题：

• 配置脚本白名单：在CookieBot的拦截规则设置中，将需要永久跳过拦截的脚本路径、域名加入“不拦截资源列表”，auto模式下命中列表的资源会直接放行，不会执行拦截逻辑。针对你当前遇到的NextJS框架脚本被拦截的问题，只要在白名单中加入/_next/static/路径的匹配规则，即可在保持auto模式不变的前提下放行所有NextJS核心运行时脚本，解决当前的功能异常问题。
• 调整拦截匹配规则：将默认的“自动扫描所有外部/同域脚本”规则，修改为仅匹配带跟踪类别的第三方资源，减少对功能必需脚本、框架核心脚本的误拦。
• 针对动态注入的DOM资源：CookieBot内置DOM变更监听逻辑，只要将对应脚本的特征加入白名单，哪怕是用户进入页面后动态插入的脚本，也会被自动识别并跳过拦截，不需要额外修改业务代码。

3. 将data-blockingmode从auto改为manual的具体影响 #

两种模式的核心逻辑差异为：auto模式下CookieBot自动扫描所有页面资源，按照预设的cookie类别规则，在用户同意对应类别前拦截匹配的跟踪资源；manual模式下CookieBot完全不执行自动拦截动作，所有拦截逻辑完全交由开发者手动配置。切换到manual模式后的具体影响包括：

• 合规风险提升：如果没有给所有跟踪类的脚本、嵌入资源（比如第三方统计、广告、视频嵌入）手动标记对应的cookie类别，会出现用户未同意就加载跟踪代码的问题，不符合GDPR等合规要求。
• 开发成本增加：auto模式无需大量手动配置即可实现合规拦截，manual模式需要全量梳理站点内所有第三方资源、跟踪代码，逐个标记匹配的cookie分类，还要自行实现用户同意后的脚本加载触发逻辑，整体开发量会明显上升。
• 拦截覆盖范围缺失：auto模式会自动识别并拦截各类带跟踪属性的嵌入资源（比如第三方YouTube嵌入、地图插件），manual模式下这类资源如果没有手动标记规则，会在用户同意前直接加载，形成合规漏洞。
• 误拦问题彻底消除：因为没有自动扫描的判定逻辑，不会出现当前这种误拦NextJS核心功能脚本、自有业务必需脚本的问题，所有拦截动作都是开发者显式配置的。

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