MasterCard Hosted Checkout集成安全：如何隐藏前端配置的敏感信息

首先要明确一个前提：完全在前端隐藏session_id这类动态敏感信息是不可能的，所有前端运行的代码用户都可以通过调试工具查看到，我们能做的是避免硬编码敏感信息、控制敏感信息的有效期和权限，从根源降低泄露风险，具体操作如下：

• 把敏感参数的生成逻辑完全移到服务端
  不要在前端硬编码session_id、商户API密钥这类信息，改为前端先请求你的后端接口，由后端调用MasterCard官方接口生成checkout session，再把生成的session_id返回给前端。后端生成session的时候可以严格绑定当前用户的订单信息、访问IP、有效期，就算session_id意外泄露，也无法被其他人冒用。
• 前端动态注入配置代码，不要硬编码在HTML静态文件中
  拿到后端返回的session_id后，再动态执行Checkout.configure方法，参考实现代码如下：

  // 先请求后端接口获取session信息
  fetch('/api/generate-mastercard-session', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({orderId: '当前用户的对应订单ID'})
  })
  .then(res => res.json())
  .then(data => {
    // 动态执行配置，无需把session_id写死在HTML文件里
    Checkout.configure({
      session: { 
        id: data.sessionId
      },
      interaction: {
        merchant: {
          name: '你的商户名称',
          address: {
              line1: '200 Sample St',
              line2: '1234 Example Town'            
          }    
        }
      }
    });
  });
  

• 给session设置最短有效周期
  后端调用MasterCard创建session的接口时，可以自定义session的有效时长，建议设置为15到30分钟即可，用户支付完成后立即调用官方接口作废该session，进一步降低信息泄露后的可用风险。
• 商户信息脱敏处理
  如果不想公开商户的完整地址信息，可以只填写必要的展示字段，或者直接在MasterCard商户后台提前配置好默认的商户展示信息，前端不传interaction下的商户相关参数就会自动调用后台的默认配置，不需要在前端代码里重复写入。

注意：所有和支付相关的鉴权、核心参数生成逻辑必须放在服务端处理，绝对不要把MasterCard的商户密钥、API调用密钥这类核心敏感信息暴露在前端。

内容的提问来源于stack exchange，提问作者Alejandro Hernández