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

Question

6

我正在运行一个CloudFront分发，其中有一个Lambda@Edge函数在其中运行。

我想操作CloudFront所在页面的DOM。具体示例：向中添加自定义脚本。

在Cloudflare上，可以使用他们的HTMLRewriter class轻松完成这项任务（大致相当于产品）。

如何在AWS CloudFront上实现此功能？

我的工作理论是：

我尚未成功实现此操作。如果我漏掉了什么或者有其他方法，请告诉我。

- lou1989

2个回答

-3

我创建了一个方法，可以使用@lou1989的响应在<header>和<body>中添加GTM脚本。这里是代码和一些说明。

- Pedro Arantes

3

你提供的链接很好。 - elliottregan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lou1989 · Accepted Answer

对请求的正文进行替换，其中uri === '/'，以修改HTML字符串。

我尝试过了，它运行良好。

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

因此，在我的特定情况下，我只是在该请求的body上执行了一个replace（这是序列化的HTML字符串）：

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

这个方法是可行的。

你也可以引入一些DOM解析库，以更加优雅的方式进行操作。