能否通过Lambda@Edge返回HTML？关联AWS WAF后触发器失效求助

可行性确认 #

可以通过Lambda@Edge返回自定义HTML页面，只要配置正确的触发阶段与逻辑，就能拦截CloudFront返回的403响应并替换为自定义内容。

触发器失效问题排查及解决方案 #

1. 确认Lambda@Edge的触发阶段 #

WAF拦截请求后，CloudFront会直接生成默认403响应，不会进入Origin相关的处理阶段。因此必须将Lambda@Edge绑定到Viewer Response阶段，而非Origin Response阶段。只有绑定到Viewer Response，才能捕获到WAF返回的403响应并进行修改。

2. 验证Lambda版本与权限配置 #

• Lambda@Edge要求母函数必须部署在us-east-1区域，且必须发布为具体版本（不能使用$LATEST版本），CDK部署时需确保自动生成并关联Lambda版本。
• 检查Lambda的IAM权限，必须包含cloudfront:InvokeFunction权限，确保CloudFront能正常触发Lambda。

3. 核对CloudFront缓存行为配置 #

确保绑定Lambda的缓存行为规则匹配你的请求路径（例如默认缓存行为*），请求必须命中该缓存行为才会触发Lambda。如果仅针对特定路径配置了缓存行为，需确认测试请求的路径符合规则。

4. 修正Lambda代码的响应头处理 #

原代码直接复用了原响应的headers，可能导致Content-Type不匹配，浏览器无法正确渲染HTML。建议在自定义响应中强制设置Content-Type头：

def handler(event, context):
    clientIp = event['Records'][0]['cf']['request']['clientIp']
    status = event['Records'][0]['cf']['response']['status']
    response = event['Records'][0]['cf']['response']

    html = f"""
    <!DOCTYPE html>
    <html>
    <head><title>Access Denied</title></head>
    <body>
        <h1>Access Denied</h1>
        <p>Your IP address is: {clientIp}</p>
    </body>
    </html>
    """

    if status == '403':
        # 构建自定义响应头，确保Content-Type正确
        custom_headers = {
            'content-type': [{'key': 'Content-Type', 'value': 'text/html;charset=UTF-8'}],
            # 可保留原响应的其他必要头，如Cache-Control等
            **{k: v for k, v in response['headers'].items() if k.lower() == 'cache-control'}
        }
        new_response = {
            'status': '403',
            'statusDescription': 'Forbidden',
            'headers': custom_headers,
            'body': html,
            'bodyEncoding': 'text',
        }
        return new_response
    else:
        return response

5. 验证CloudFront部署状态 #

CDK部署完成后，需等待CloudFront分发完成部署（状态变为Deployed），未完成部署时新的Lambda绑定不会生效。

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