Using `middleware.js` sometimes runs Cloudflare email obfuscation JS about edge-runtime

[javivelasco]

Hi! Can you test now? It should be fine 🙏

[Kikobeats]

Hello @brycewray, sorry for the delay, and thanks for attaching all these details, it's really appreciated.

I don't think it's an Edge Runtime issue, but still a Vercel infrastructure issue, so I'm going to reproduce and try to understand why it's happening, let me keep you in touch 🙂

[Kikobeats]

We disabled the email obfuscation that should never have been enabled and the issue it's gone, so thanks a lot for reporting this

[brycewray]

Apparently not of interest beyond me. Disregard. Site is now off Vercel, so the static-site-omega.vercel.app project is back to being only a holder.

Edit: Ironically enough, the oddity doesn’t appear on the new/previous location, Cloudflare Pages, since I have this feature turned off — as, indeed, I did while the site was on Vercel but DNS was going through Cloudflare. Weird.

[brycewray]

Re-opening this because I would still appreciate an answer. :) If I need to rebuild the static-site-omega.vercel.app project to its previous state (as mentioned above) so anyone at Vercel can take a run at this, let me know.

[brycewray]

@Kikobeats Thanks! I am currently running some tests of my own, switching out some items in middleware.js to see whether I can find the offending item. 😃 If I find it, I'll advise here.

[brycewray]

@Kikobeats It appears to be related to the following part of my middleware.js file, where I use replace to add generated nonces to the HTML for the Content Security Policy; if I comment this out, the bogus script doesn’t appear:

const html = (await response.text())
  .replace(/DhcnhD3khTMePgXw/gi, nonce)
    .replace(
      'rel="stylesheet"',
      `rel="stylesheet" nonce="${nonce}"`
    )
    .replace(/<link rel="preload"/g, `<link nonce="${nonce}" rel="preload"`)
    .replace(
      'guitar-thriving.brycewray.com/script.js"',
      `guitar-thriving.brycewray.com/script.js" nonce="${nonce}"`
    )
    .replace(
      'src="/assets/js/lite-yt-embed_',
      `nonce="${nonce}" src="/assets/js/lite-yt-embed_`
    )
    .replace(/<style/g, `<style nonce="${nonce}"`)

I also tried commenting out each separate replace statement to see if one of them was the cause, and it made no difference; only commenting out all of the code shown above would remove the bogus script.

Also: I was able to recreate the same issue on another repo by using the middleware.js file (with replace statements intact) and adding text that triggered the bogus script on one of the first repo’s pages:

https://hosts-test.vercel.app/posts/2022/05/another-test-4/

. . . so this pretty well confirms that, somehow, the replace statements are causing this.

[brycewray]

Hello @brycewray, sorry for the delay, and thanks for attaching all these details, it's really appreciated.

I don't think it's an Edge Runtime issue, but still a Vercel infrastructure issue, so I'm going to reproduce and try to understand why it's happening, let me keep you in touch 🙂

@Kikobeats Any luck yet? During my tests, I found one page where, if someone has JS deactivated, this oddity actually changes a Mastodon link to some error message about email obfuscation 😆 — so, needless to say, I can’t use Vercel for my site until/unless this is fixed. Thanks again for whatever time you have to spend on this.

[brycewray]

Hi! Can you test now? It should be fine 🙏

@javivelasco Yes, appears to be fixed. Checked several of the “trouble” pages and saw no bogus script. 👍 What turned out to be the problem?