Shopify嵌入应用出现frame-ancestors 'none'错误，页面无法加载

• 技术栈：前端React，后端Django
• 异常表现：Chrome无痕模式下页面完全无法加载
• 控制台错误：

Refused to frame '' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'none'".

• 当前使用的Django CSP中间件代码：

class CSPMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)

        # Check if the request URL matches the desired prefix
        if request.path.startswith('/endpoint'):
            # Apply the CSP header for the desired URL prefix
            response['Content-Security-Policy'] = "frame-ancestors https://shopify-dev.myshopify.com https://admin.shopify.com;"

        return response

解决方案 #

• 修正CSP头部的生效范围：当前中间件仅对/endpoint开头的路径添加CSP规则，但Shopify嵌入的页面路径大概率不是这个前缀，导致响应未携带正确的frame-ancestors限制，浏览器默认使用'none'拦截帧嵌入。需要调整路径判断为应用的嵌入页面路径，或者全局添加该CSP头部（如果所有页面都需要被Shopify嵌入）。
• 验证无痕模式下的响应头：无痕模式会禁用缓存并启用更严格的默认安全策略，需对比非无痕模式下的响应头，确认中间件在无痕模式下是否正确触发并添加了Content-Security-Policy。
• 补充必要的CSP规则（按需）：若React应用存在资源加载问题，可扩展CSP头部覆盖脚本、样式等资源源，示例：

response['Content-Security-Policy'] = "frame-ancestors https://shopify-dev.myshopify.com https://admin.shopify.com; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;"

注意：生产环境应尽量避免unsafe-inline和unsafe-eval，可使用nonce或哈希值替代。

• 扩展允许的嵌入域名：若应用需支持多个Shopify店铺，可将frame-ancestors改为通配符格式（https://*.myshopify.com），或添加所有需要支持的店铺域名。

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