如何通过JavaScript在跨站点iframe中传递可执行代码？

可以实现修改Site B页面背景色的需求，但不推荐直接传递可执行代码字符串，更安全可靠的方式是传递操作指令让Site B自行执行对应逻辑，以下是具体实现方式：

一、推荐：指令式通信（安全可控） #

这种方式通过传递结构化的指令和参数，由Site B根据指令执行操作，同时严格验证消息来源，避免安全风险。

Site A 端代码 #

const frame = document.getElementById('frame');
// 传递操作类型和对应的参数
frame.contentWindow.postMessage(
  { 
    type: 'updateBackgroundColor', 
    color: '#ff4500' 
  },
  'https://www.test.com' // 填写Site B的实际域名
);

Site B 端代码 #

window.addEventListener('message', event => {
  // 关键步骤：验证消息来源，只处理可信的Site A发送的消息
  if (event.origin !== 'https://www.site-a.com') return;

  const messageData = event.data;
  // 根据指令类型执行对应操作
  if (messageData.type === 'updateBackgroundColor') {
    document.body.style.backgroundColor = messageData.color;
  }
});

二、不推荐：直接传递可执行代码（高安全风险） #

虽然可以通过传递代码字符串，让Site B用eval()执行来实现需求，但这种方式存在极大的安全隐患：如果Site A被劫持、或者消息在传输过程中被篡改，恶意代码会直接在Site B的环境中执行，可能导致XSS攻击、用户数据泄露等问题。

Site A 端代码 #

const frame = document.getElementById('frame');
frame.contentWindow.postMessage(
  "document.body.style.backgroundColor = '#ff4500';",
  'https://www.test.com'
);

Site B 端代码 #

window.addEventListener('message', event => {
  if (event.origin !== 'https://www.site-a.com') return;
  // 执行传递的代码字符串，风险极高
  eval(event.data);
});

总结 #

优先选择指令式通信方案，既能满足修改页面样式的需求，又能保证通信的安全性。无论采用哪种方式，必须验证event.origin，确保消息来自可信的站点，防止恶意攻击。

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