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

Question

我正在运行一个 CloudFront 发行版，该发行版上运行着 Lambda@Edge 函数。

我想操作 CloudFront 前面页面的 DOM。具体示例：将自定义脚本添加到head.

在Cloudflare上，这可以使用HTMLRewriter 类在工作程序（大致等效的产品）中轻松完成。

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

我的工作理论是：

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

我还没有设法让这个工作。对其他方法感兴趣或者我是否遗漏了一些明显的东西。

Answer 1

replace在请求正文中执行where uri === '/'，以修改 HTML 字符串。

我试过了，效果很好。

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

因此，在我的具体情况下，我只是对该请求（这是字符串化的 HTML）执行了replace操作body：

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

这奏效了。

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