Next.js集成VWO时如何避免脚本单引号被HTML编码？

我按照VWO官方步骤在网站中集成VWO，已将脚本添加至Next.js的Head标签内，代码如下：

<Head>
  <script type='text/javascript' id='vwoCode'>
    {`window._vwo_code=window._vwo_code || (function() {
      var account_id= SOME_ID,
      version=11,
      settings_tolerance=1,
      library_tolerance=1,
      use_existing_jquery=false,
      is_spa=1,
      hide_element='body',
      /* DO NOT EDIT BELOW THIS LINE */
      f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.code.init();return code;}());`}
  </script>
</Head>

问题：脚本中的单引号（'）被HTML编码为'，例如hide_element='body',被转换为hide_element='body',，导致代码报错。

解决方法 #

• 使用dangerouslySetInnerHTML注入脚本
  Next.js中可以通过该属性直接注入原始HTML/JS代码，避免自动编码。将脚本内容放在__html字段中即可：

  <Head>
    <script
      type='text/javascript'
      id='vwoCode'
      dangerouslySetInnerHTML={{
        __html: `window._vwo_code=window._vwo_code || (function() {
          var account_id= SOME_ID,
          version=11,
          settings_tolerance=1,
          library_tolerance=1,
          use_existing_jquery=false,
          is_spa=1,
          hide_element='body',
          /* DO NOT EDIT BELOW THIS LINE */
          f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.removeChild(e);}return code;}};code.init();return code;}());`
      }}
    />
  </Head>
  

  注：只要是信任的官方脚本，使用该属性是安全的。

• 替换单引号为双引号
  将脚本内的单引号全部替换成双引号，同时保持外层模板字符串用反引号，这样HTML不会对双引号进行编码（因为script标签属性用的是单引号）：

  <Head>
    <script type='text/javascript' id='vwoCode'>
      {`window._vwo_code=window._vwo_code || (function() {
        var account_id= SOME_ID,
        version=11,
        settings_tolerance=1,
        library_tolerance=1,
        use_existing_jquery=false,
        is_spa=1,
        hide_element="body",
        /* DO NOT EDIT BELOW THIS LINE */
        f=false,d=document,code={use_existing_jquery:function(){return use_existing_jquery},library_tolerance:function(){return library_tolerance},finish:function(){if(!f){f = true;var e=d.getElementById('_vis_opt_path_hides');if(e)e.parentNode.removeChild(e);}return code;}};code.init();return code;}());`}
    </script>
  </Head>
  

• 抽离为单独JS文件引入
  将VWO脚本保存到public目录下（比如public/vwo-script.js），通过src属性引入脚本文件，彻底避免模板字符串编码问题：

  <Head>
    <script type='text/javascript' id='vwoCode' src='/vwo-script.js' />
  </Head>
  

  这种方式更利于脚本的单独维护，适合较长的第三方代码。

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