Blazor WASM中Iframe读取LocalStorage跨域异常问题求解

问题本质 #

Blazor WebAssembly运行在浏览器沙箱环境中，默认情况下IJSRuntime调用的JS代码会绑定到父页面上下文，而非iframe的独立上下文。这直接导致iframe内通过Blazor触发的LocalStorage操作，实际访问的是父域存储，而非iframe源域的，最终返回null。

可行解决办法 #

1. 为iframe创建独立JS处理上下文 #

在iframe的HTML页面中嵌入专属LocalStorage处理脚本，直接在iframe上下文内完成存储读写，再通过postMessage与父Blazor应用通信，彻底规避Blazor的IJSRuntime跨上下文干扰。

步骤实现：

• 编写iframe代理页面（部署在目标域，示例命名storage-proxy.html）：

<script>
// 监听父页面消息，验证来源防恶意请求
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://父域地址') return;

  const { action, key, value } = event.data;
  let result;

  switch(action) {
    case 'get':
      result = localStorage.getItem(key);
      break;
    case 'set':
      localStorage.setItem(key, value);
      result = 'success';
      break;
    case 'remove':
      localStorage.removeItem(key);
      result = 'success';
      break;
  }

  // 将操作结果回传父页面
  event.source.postMessage({ action, key, result }, event.origin);
});
</script>

• 父Blazor页面中通过iframe发送消息并监听结果：

@inject IJSRuntime JSRuntime
@implements IDisposable

<iframe id="storageIframe" src="https://目标域地址/storage-proxy.html" style="display:none"></iframe>

@code {
  private IJSObjectReference? _iframeWindow;
  private DotNetObjectReference<YourComponent>? _dotNetRef;

  protected override async Task OnAfterRenderAsync(bool firstRender)
  {
    if (firstRender)
    {
      _dotNetRef = DotNetObjectReference.Create(this);
      // 获取iframe的window对象
      var iframe = await JSRuntime.InvokeAsync<IJSObjectReference>("document.getElementById", "storageIframe");
      _iframeWindow = await iframe.InvokeAsync<IJSObjectReference>("contentWindow");
      
      // 注册消息监听回调
      await JSRuntime.InvokeVoidAsync(@"
        window.addEventListener('message', (event) => {
          if (event.origin !== 'https://目标域地址') return;
          window.DotNet.invokeMethodAsync('你的程序集名称', 'HandleStorageResult', event.data);
        });
      ");
    }
  }

  // 向iframe发送读取请求
  public async Task TriggerGetStorage(string key)
  {
    await _iframeWindow!.InvokeVoidAsync("postMessage", 
      new { action = "get", key }, "https://目标域地址");
  }

  // Blazor接收结果的回调方法
  [JSInvokable]
  public void HandleStorageResult(dynamic data)
  {
    if (data.action == "get")
    {
      // 处理返回的存储值
      Console.WriteLine($"读取到目标域存储值：{data.result}");
    }
  }

  public void Dispose()
  {
    _dotNetRef?.Dispose();
    if (_iframeWindow != null)
    {
      _ = _iframeWindow.DisposeAsync();
    }
  }
}

2. 将Blazor JS模块绑定到iframe上下文 #

若需在Blazor逻辑内直接处理iframe的LocalStorage操作，可将JS隔离模块加载到iframe的上下文，而非父页面。

步骤实现：

• 创建JS隔离模块（storage-helper.js）：

export function getLocalStorage(key) {
  return localStorage.getItem(key);
}

export function setLocalStorage(key, value) {
  localStorage.setItem(key, value);
}

• Blazor中通过iframe上下文加载模块并调用：

private async Task<string?> GetIframeStorageValue(string key)
{
  var iframe = await JSRuntime.InvokeAsync<IJSObjectReference>("document.getElementById", "storageIframe");
  var iframeWindow = await iframe.InvokeAsync<IJSObjectReference>("contentWindow");
  // 在iframe上下文加载JS模块
  var module = await iframeWindow.InvokeAsync<IJSObjectReference>("import", "./storage-helper.js");
  var value = await module.InvokeAsync<string?>("getLocalStorage", key);
  await module.DisposeAsync();
  return value;
}

注意：此方法要求目标域允许跨域加载JS模块（配置CORS），或iframe与Blazor静态资源同源。

3. 关键验证细节 #

• 所有postMessage操作必须验证event.origin，防止跨站脚本攻击。
• 等待iframe的load事件触发后，再执行存储操作，避免上下文未就绪问题。
• Blazor WebAssembly的IJSRuntime默认绑定父页面，跨上下文操作必须明确指定iframe的window对象。

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