Shopware自定义App嵌入Iframe报错 无法在我的应用中显示如何解决

报错根本原因 #

Shopware后台加载自定义App的Iframe页面时，会对你配置的main-module source地址追加签名参数校验，你当前的接口未完成以下2个强制要求，因此触发权限错误：

• 未校验Shopware请求携带的签名，请求合法性不被Shopware认可
• 未配置允许Shopware域名嵌入Iframe的响应头，页面被浏览器同源策略拦截

具体解决步骤 #

1. 先确保App注册流程正常 #

你manifest中配置的registrationUrl必须先正确实现Shopware App的注册逻辑，完成店铺信息的保存后才能正常加载后台模块。

2. 实现请求签名校验逻辑 #

Shopware向你的iframe地址发起请求时，会自动追加shop-id、shop-url、shopware-signature三个查询参数，你需要使用manifest中配置的secret（你当前配置为test）校验签名合法性：
校验规则：

• 取出所有请求查询参数，排除shopware-signature参数
• 剩余参数按key升序排序，将key和value直接拼接成字符串
• 用secret作为密钥，对拼接后的字符串做HMAC-SHA256加密，加密结果转为十六进制
• 将计算结果和请求携带的shopware-signature对比，一致则为合法请求

3. 配置允许Iframe嵌入的响应头 #

在你的接口响应中添加以下头部，允许Shopware站点嵌入你的页面：

• X-Frame-Options: ALLOW-FROM 你的Shopware后台域名
• Content-Security-Policy: frame-ancestors 'self' 你的Shopware后台域名;

4. 修改后的控制器示例代码 #

public function showApp(Request $request)
{
    // 1. 校验必传参数
    if (!$request->has(['shop-id', 'shop-url', 'shopware-signature'])) {
        abort(403);
    }

    // 2. 签名校验
    $secret = 'test'; // 和manifest中的secret保持一致
    $params = $request->query->all();
    $signature = $params['shopware-signature'];
    unset($params['shopware-signature']);
    ksort($params);
    
    $checkStr = '';
    foreach ($params as $key => $value) {
        $checkStr .= $key . $value;
    }
    $calculated = hash_hmac('sha256', $checkStr, $secret);
    
    if (!hash_equals($calculated, $signature)) {
        abort(403);
    }

    // 3. 设置响应头
    $shopUrl = $request->query('shop-url');
    return response('Showing TF')
        ->header('X-Frame-Options', 'ALLOW-FROM ' . $shopUrl)
        ->header('Content-Security-Policy', "frame-ancestors 'self' {$shopUrl};");
}

额外注意事项 #

• 正式环境不要把secret硬编码在代码中，建议存在.env配置文件里
• 注册流程中要将每个店铺的shop-id、shop-url、access_token等信息持久化存储，不要用固定secret做生产环境配置
• 确保你的站点是HTTPS协议，Shopware后台只允许加载HTTPS的Iframe资源

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