如何在嵌入Salesforce CRM iframe的Angular 10应用中获取POST传递的数据

首先明确核心限制：浏览器端运行的前端JavaScript没有权限直接读取当前页面HTTP请求的POST请求体，需根据你的实际使用场景选择对应方案。

场景1：Salesforce通过表单POST提交加载iframe（初始加载传参） #

该场景下Salesforce侧会构造隐藏表单，target指向你的iframe，提交后直接加载你的Angular应用并传递POST参数，处理步骤如下：

• 第一步：修改Angular应用的托管后端，拦截指向Angular入口的POST请求，接收参数后注入到返回的index.html页面中，以下为Node.js Express后端示例：

const fs = require('fs');
const express = require('express');
const app = express();
app.use(express.json());
app.use(express.urlencoded({ extended: true }));

// 拦截Angular应用入口的POST请求
app.post('/angular-app-entry', (req, res) => {
  // 读取Salesforce传递的POST参数
  const sfPostParams = encodeURIComponent(JSON.stringify(req.body));
  // 读取本地打包好的Angular index.html文件
  let indexContent = fs.readFileSync('./dist/your-angular-project/index.html', 'utf-8');
  // 将参数注入到window全局变量
  indexContent = indexContent.replace('<!-- SF_PARAMS_HOLDER -->', 
    `<script>window.salesforceParams = JSON.parse(decodeURIComponent('${sfPostParams}'))</script>`);
  res.send(indexContent);
});
// 其他静态资源正常托管
app.use(express.static('./dist/your-angular-project'));

• 第二步：在Angular项目的src/index.html中添加占位符

<head>
  <meta charset="utf-8">
  <title>Your Angular App</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- 留好参数注入的占位符 -->
  <!-- SF_PARAMS_HOLDER -->
</head>

• 第三步：在Angular中封装服务读取注入的参数

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class SalesforceParamsService {
  getPostParams(): Record<string, any> {
    return window['salesforceParams'] || {};
  }
}

在需要使用参数的组件中注入该服务，调用getPostParams()即可获取数据。

场景2：Angular应用加载完成后，Salesforce动态传递POST数据 #

该场景下无需走HTTP POST请求，使用浏览器原生postMessage API即可实现跨域iframe通信，也是Salesforce官方推荐的通信方案，处理步骤如下：

• 在Angular应用中监听message事件，同时必须校验消息来源避免安全风险：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  // 允许接收消息的Salesforce域名白名单
  private allowedSfOrigins = ['https://你的Salesforce实例域名.lightning.force.com', 'https://你的Salesforce实例域名.my.salesforce.com'];

  @HostListener('window:message', ['$event'])
  receiveSfMessage(event: MessageEvent) {
    // 校验来源域名，非法来源直接拦截
    if (!this.allowedSfOrigins.includes(event.origin)) return;
    // event.data即为Salesforce传递的所有数据
    const receivedData = event.data;
    // 后续业务处理逻辑
    console.log('收到Salesforce数据：', receivedData);
  }
}

提示：Salesforce侧发送数据时，需要获取iframe元素调用contentWindow.postMessage(要传递的数据, '你的Angular应用域名')即可完成数据传递。

注意事项 #

• 所有跨域通信场景必须做域名校验，避免恶意消息注入风险
• 若使用Angular哈希路由模式，不影响上述两种方案的正常执行
• 若你的Angular应用托管在Nginx等静态服务器上，可通过Nginx的lua模块实现POST参数注入，逻辑和Node.js示例一致

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