rstacruz/0 cloudflare-worker-modifying-response-html-example.md

## 0 cloudflare-worker-modifying-response-html-example.md

      
    Raw
  

              0 cloudflare-worker-modifying-response-html-example.md
            
          
    Cloudflare worker example

This worker modifies the response HTML.

  
## cloudflare-worker-modifying-response-html.js
addEventListener('fetch', event => {
  let response = handleRequest(event.request)
  event.respondWith(response)
})

async function handleRequest(request) {
  const url = new URL(request.url)

  // Proxy devhints.io => my-other-website.netlify.app
  // and inject some markup
  if (url.host === 'devhints.io') {
    url.host = 'my-other-website.netlify.app'
    let res = await fetch(url.toString(), request)
    res = await injectMarkup(request, res)
    return res
  }
}

async function injectMarkup(req, res) {
  if (!res.ok) return res

  // Only process text/html responses
  const type = res.headers.get('content-type')
  if (!type.match(/^text\/html/)) return res

  // Update the body text
  const body = await res.text()
  const ip = request.headers.get('cf-connecting-ip')
  const html = body.replace(
    '<html ',
    `<html data-connecting-ip="${ip}" `
  )

  return new Response(html, res)
}
	addEventListener('fetch', event => {
	let response = handleRequest(event.request)
	event.respondWith(response)
	})

	async function handleRequest(request) {
	const url = new URL(request.url)

	// Proxy devhints.io => my-other-website.netlify.app
	// and inject some markup
	if (url.host === 'devhints.io') {
	url.host = 'my-other-website.netlify.app'
	let res = await fetch(url.toString(), request)
	res = await injectMarkup(request, res)
	return res
	}
	}

	async function injectMarkup(req, res) {
	if (!res.ok) return res

	// Only process text/html responses
	const type = res.headers.get('content-type')
	if (!type.match(/^text\/html/)) return res

	// Update the body text
	const body = await res.text()
	const ip = request.headers.get('cf-connecting-ip')
	const html = body.replace(
	'<html ',
	`<html data-connecting-ip="${ip}" `
	)

	return new Response(html, res)
	}