Cloudflare Workers - 更改在实时中不可见（但处于预览状态）

Question

您好，感谢您的帮助。 遗憾的是，CF 的支持人员认为他们不需要帮助我。

我正在学习使用 worker，并编写了一个简单的 HTML 注入器，只是为了看到它在我的网站上运行。

这是我拥有的完整工作代码：

async function handleRequest(req) {
  const res = await fetch(req)
  const contentType = res.headers.get("Content-Type")

  console.log('contentType: ', contentType)
  
  // If the response is HTML, it can be transformed with
  // HTMLRewriter -- otherwise, it should pass through
  if (contentType.startsWith("text/html")) {
    return rewriter.transform(res)
  } else {
    return res
  }
}




class UserElementHandler {
    async element(element) {
        
        element.before("<div class='contbox'><img src='https://coverme.co.il/wp-content/uploads/2020/01/covermeLOGO-01-1024x183.png' style='width:200px;margin:20px;'><h1>testing inserting</h1></div>", {html: true});
        
      // fill in user info using response
    }
  }

    

const rewriter = new HTMLRewriter()
.on("h1", new UserElementHandler())


addEventListener("fetch", event => {
  event.respondWith(handleRequest(event.request))
})

它只是使用 element.before 来注入一些 HTML。 在工作人员预览窗格中，我可以看到它！ 但在现场 = 什么都没有。

这是活动 URL：[https://coverme.co.il/product/%D7%A0%D7%A8-%D7%91%D7%99%D7%A0%D7%95%D7% A0%D7%99-晚香玉/]

这些是我设置的 4 条路线来尝试捕捉这一点，无论是否对字母进行编码：

coverme.co.il/product/נר-בינוני-tuberosejasmine/
*.coverme.co.il/product/נר-בינוני-tuberosejasmine/*
https://coverme.co.il/product/%D7%A0%D7%A8-%D7%91%D7%99%D7%A0%D7%95%D7%A0%D7%99-tuberosejasmine/
*.coverme.co.il/product/%D7%A0%D7%A8-%D7%91%D7%99%D7%A0%D7%95%D7%A0%D7%99-tuberosejasmine/*

提前致谢！

Answer 1

我认为这里的问题是您已将路由配置为匹配未转义的“נר-בינוני”，但浏览器实际上会在发送到服务器之前对 URL 进行百分比编码，因此路由匹配实际上在百分比上运行转义的 URL。所以实际的 URL 是https://coverme.co.il/product/%D7%A0%D7%A8-%D7%91%D7%99%D7%A0%D7%95%D7%A0%D7%99-tuberosejasmine/，这与你的路由不匹配，因为%D7%A0%D7%A8-%D7%91%D7%99%D7%A0%D7%95%D7%A0%D7%99 不被认为与נר-בינוני 相同。

编辑：不幸的是，由于已知错误，在您的路由模式中使用百分比编码不会解决问题。不幸的是，现在无法在 Workers 路由中匹配非 ASCII 字符。我们打算修复这个问题，但这很难，因为有些网站会意外地依赖于被破坏的行为，所以修复会破坏它们。

您可以做的是匹配coverme.co.il/product/*，然后在您的工作人员内部检查路径是否也有נר-בינוני-tuberosejasmine。如果没有，那么您的 fetch 事件处理程序应该直接返回而不调用event.respondWith()。这将触发请求的“默认处理”，这意味着它将像往常一样通过并发送到您的源服务器。 （请注意，您仍然需要为工人请求付费。）

所以，是这样的：

addEventListener("fetch", event => {
  if (event.request.url.includes(
      "coverme.co.il/product/נר-בינוני-tuberosejasmine/")) {
    event.respondWith(handle(event.request));
  } else {
    return;  // not a match, use default pass-through handling
  }  
})