如何解决MERN应用中Razorpay脚本的SHA-256完整性验证错误？

问题原因 #

你在MERN应用的测试、生产环境中遇到的控制台错误，是浏览器的子资源完整性（SRI）校验机制触发的：页面加载RazorPay的checkout.js时，浏览器计算出的脚本SHA-256哈希值，和脚本标签里integrity属性声明的哈希不匹配，所以直接拦截了资源加载——这个过程不需要和支付按钮交互就会触发。

修复方案 #

• 移除SRI属性（最简单直接）
  检查你的脚本标签，要是里面带有integrity和crossorigin属性（可能是手动添加或框架自动注入的），直接删掉这两个属性，保留基础的脚本引入即可：

  <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
  

• 更新SRI属性（保留校验机制）
  要是想继续用SRI保障资源安全，就重新获取当前checkout.js的正确哈希值替换：

  1. 下载https://checkout.razorpay.com/v1/checkout.js文件
  2. 用终端命令计算SHA-256哈希（以OpenSSL为例）：

     openssl dgst -sha256 -binary checkout.js | base64
     

  3. 把得到的哈希值填入integrity属性，同时保留crossorigin属性：

     <script src="https://checkout.razorpay.com/v1/checkout.js" integrity="sha256-pbO6ubt39rj0eqehtHhHSdfdMvW2ZTN5sLrvPjmbxXI=" crossorigin="anonymous"></script>
     

• 检查框架自动注入逻辑
  如果你是通过React组件、Next.js等MERN生态框架引入的脚本，确认框架是否自动添加了SRI属性。比如Next.js的next/script组件可能默认启用SRI，这时候可以手动关闭该配置，或者指定正确的integrity值。

• 清除缓存
  强制刷新浏览器页面（Ctrl+F5），或者清理CDN缓存，确保应用拉取的是最新版本的checkout.js文件，避免旧缓存导致的哈希不匹配。

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