Remove elements with cloudflare workers

Developers Workers
#1

How to remove an element from html page using cloudflare workers?
Elements in the head or body
For example :
<meta name="robots" content="index, follow"> at head
or
<div class="footer"> some ... </div> at body

#2

Hi
Can you help me with this

#3

You need to use HTMLRewriter.

Docs:

Tutorial:

2 Likes
#4

I’m using the following code to replace the site’s href, but I’m not using it to change the parameters

async function handleRequest(req) {
  const res = await fetch(req)
  return rewriter.transform(res)
}

 class AttributeRewriter {
  constructor(attributeName) {
    this.attributeName = attributeName
  }

  element(element) {
    const attribute = element.getAttribute(this.attributeName)
    if (attribute) {
      element.setAttribute(
  this.attributeName,
  attribute
    .replace('/product/', '/p-')
    .replace('//a.com/', '//b.com/')
    .replace('//static.a.com/', '//cdn.b.com/')
)
    }
  }
}

inside html like the entries in the p tag
If you can help me how to remove <meta name="robots" content="index, follow"> or replace it with an empty phrase
Or, for example, how can I replace the a.com expression in the p tag with b.com?

1 Like
#5

I’m not familiar with the HTMLRewriter class, but the selector to catch your meta tag would be meta[name="robots"] similar to CSS selectors so you’d do something like:

new HTMLRewriter.on('meta[name="robots"]', new ElementHandler());

Check the links I provided for more info.

#6

If you don’t feel like coding you can use the Cloudworker-Proxy that I put together to do the transform using config.

For removing the robots tag, add the following rule:

  const rules = [{
    "handlerName": "transform",
    "host": "optional.host.com",
    "path": "/optional-path.html",
    "options": {
      "transforms": [
        {
          "regex": "<meta name=\"robots\" content=\"index, follow\">",
          "replace": ""
        }
      ]
    }
  }]
2 Likes
#7

I am not familiar with these codes, if you may guide me based on the https://community.cloudflare.com/t/remove-elements-with-cloudflare-workers codes.
thank you

#8

If you want to completely remove an element, just create a RemoveElement class and do it like this:

class RemoveElement {
    element(element) {
        element.remove();
    }
}

const rewriter = new HTMLRewriter()
    .on('meta[name="robots"]', new RemoveElement());