如何使用运行 Lambda@Edge 函数的 AWS Cloudfront 修改页面的 HTML？答案

【问题标题】：How can I modify a page's HTML with AWS Cloudfront running a Lambda@Edge function?如何使用运行 Lambda@Edge 函数的 AWS Cloudfront 修改页面的 HTML？
【发布时间】：2020-07-14 11:11:12
【问题描述】：

我正在运行一个 CloudFront 分配，它上面运行着一个 Lambda@Edge 函数。

我想操作 CloudFront 所在页面的 DOM。具体例子：在head里面的页面添加自定义脚本。

在 Cloudflare 上，这可以使用他们的 HTMLRewriter class 在工作人员（大致相当的产品）中轻松完成。

如何在 AWS CloudFront 上执行此操作？

我的工作理论是：

观察对 HTML 页面的请求
对响应主体进行某种操作 - 将其解析为 DOM 对象并根据需要进行操作

我还没有设法让它工作。对其他方法感兴趣，或者如果我遗漏了一些明显的东西。

【问题讨论】：

标签： aws-lambda amazon-cloudfront

【解决方案1】：

在uri === '/'的请求体上做一个replace，来修改HTML的字符串。

我试过了，效果很好。

uri === '/' 的请求应该是对 HTML 页面的请求。

所以在我的具体情况下，我只是在该请求的body 上做了一个replace（这是字符串化的HTML）：

body.replace(
      `</head>`,
      `<script>
      console.log('my script')
      </script></head>`
    )

这奏效了。

您还可以引入某种 DOM 解析库，以更优雅的方式进行这种操作。

【讨论】：

您能够让它为响应触发器工作吗？这表示这是不可能的：docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/… 当您使用 HTTP 响应时，Lambda@Edge 不会将源服务器返回的正文暴露给源响应触发器。这是你设置的？
@lou1989 你能提供一个 Lambda@Edge 函数的代码 sn-p 吗？

【解决方案2】：

我创建了一种方法，可以使用@lou1989 响应在<header> 和<body> 中添加GTM 脚本。 Here 是代码和一些解释。

【讨论】：