Early Hints not working for Pages

What is the name of the domain?

bigleads.com

What is the issue you’re encountering

Early Hints for Pages not working

What steps have you taken to resolve the issue?

I have verified that my HTML HEAD LINK are correct (with preload)

I have read numerous community posts.

What are the steps to reproduce the issue?

Website hosted on Pages

  1. To test for 103 status code for Early Hints on my website,
    use either:
  1. My site is hosted at

https://bigleads.com/index2

You can see in my HEAD LINKS I have several “preload” but none of these are being sent as 103 Early Hints

can you help with this?

I see in a post last year you helped on a similar

Thanks in advance. Appreciate any help. matter.

My support ticket # is 01228910

Thanks again in advance.

Here is a summary of my problem and trouble shooting …

Problem:

Early Hints does not appear to be working.

Neither:

a) being pulled automatically from <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin> tags in <head>

b) nor even if I manually enter in the Early Hint into my _headers file like so: Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

The Problem Site:

a. My site is https://bigleads.com/index2

b. This is hosted on a paid version of Cloudflare Pages

c. In my index2.html, I have the following code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/caveat-400-700.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-400.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-700.woff2" type="font/woff2" crossorigin>

I have even put the Early Hint directly in my _headers file like so:

# Security Headers (not already defined in Dashboard)
# For all of bigleads.com (/*)
/*
  Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/caveat-400-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/carlito-400.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/carlito-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Content-Security-Policy: upgrade-insecure-requests; default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'self'
  Cross-Origin-Resource-Policy: same-origin
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
  Permissions-Policy: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
  Referrer-Policy: same-origin
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-Permitted-Cross-Domain-Policies: none
  X-XSS-Protection: 1; mode=block

Troubleshooting:

To verify the presence of an Early Hint, I use 2 different routes:

  1. I run the the following curl command and inspect the headers:

curl -X HEAD -I https://bigleads.com/index2

  1. I use the online Early Hints checker found at https://earlyhints.dev/

Neither of which indicate the the Early Hints is in the header.

What my HTTP headers look like are as follows:

HTTP/1.1 200 OK

Date: Mon, 14 Oct 2024 02:29:58 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=16070400, must-revalidate
content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
permissions-policy: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
referrer-policy: same-origin
x-content-type-options: nosniff
x-frame-options: DENY
x-permitted-cross-domain-policies: none
x-xss-protection: 1; mode=block
Report-To: {“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v4?s=JcYlt3j70PB5ES6kQJRyY%2FZBXUcJw2MPOYB63r8ngRmBW2P0MXdf4eFEPK2fVyQqY0rSEtv0u%2BMLnBEamZ%2BZWkgHzjpeLDEKRqRBROQ9JcfiHv%2FJfjAx5okGgKWZNiw%3D”}],“group”:“cf-nel”,“max_age”:604800}
NEL: {“success_fraction”:0,“report_to”:“cf-nel”,“max_age”:604800}
Vary: Accept-Encoding
Speculation-Rules: “/cdn-cgi/speculation”
CF-Cache-Status: HIT
Age: 1064
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Server: cloudflare
CF-RAY: 8d24250deb41435c-EWR
Content-Encoding: gzip
alt-svc: h3=“:443”; ma=86400

Caching:

I thought this might be a Caching issue, no. I have Purged all Cache and am in Development Mode.

Content Security Policy (CSP)

I thought this might be a CSP issue, no. Even when I completely remove my CSP directive in my _header

content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’

I still do not see the presence of the Early Hint

Settings:

I thought this might be a settings issues, no. I have Early Hints enabled in Dashboard.


I’m really at a loss as to why Early Hints aren’t working - especially when I manually enter them into my header.

@oshariff or anyone else from Cloudflare - would really appreciate some assistance. Thanks in advance.

hi both, I see your from CF and posted about Early Hints in past threads.

Any help you can provide the issues I’m seeing with Early Hints?

Thanks in advance for any & all help.

It’s been 5-days since I opened my Support ticket (#01228910) and still no one has responded :frowning:

Any help here in the forum?

@cloonan

why is my thread being merged with an unrelated thread?

And as a result, now my thread isn’t showing up on the main Community Forum page. Effectively now hiding my thread.

@cloonan

why is my thread being merged with an unrelated thread?

And as a result, now my thread isn’t showing up on the main Community Forum page. Effectively now hiding my thread.

I’m seeing early hints

$ curl https://bigleads.com/index2 -v 2>&1 | grep -E '< HTTP/2 103|< link'
< HTTP/2 103
< link: </assets/fonts/source-serif-400-900.woff2>; as=font; crossorigin; rel=preload; type=font/woff2, </assets/fonts/caveat-400-700.woff2>; as=font; crossorigin; rel=preload; type=font/woff2, </assets/fonts/carlito-400.woff2>; as=font; crossorigin; rel=preload; type=font/woff2, </assets/fonts/carlito-700.woff2>; as=font; crossorigin; rel=preload; type=font/woff2

@WalshyMVP

It’s not working as documented.

It only worked because I hardcoded the Early Hints into my _headers file.

When you test it now (without the Early Hints hardcoded into _headers) you’ll see it does NOT work.

curl -X HEAD -I https://bigleads.com/index2

HTTP/2 200

**date**: Tue, 15 Oct 2024 20:16:30 GMT
**content-type**: text/html; charset=utf-8
**access-control-allow-origin**: *
**cache-control**: public, max-age=0, must-revalidate
**content-security-policy**: upgrade-insecure-requests; default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'self'
**cross-origin-embedder-policy**: require-corp
**cross-origin-opener-policy**: same-origin
**cross-origin-resource-policy**: same-origin
**permissions-policy**: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
**referrer-policy**: same-origin
**x-content-type-options**: nosniff
**x-frame-options**: DENY
**x-permitted-cross-domain-policies**: none
**x-xss-protection**: 1; mode=block
**report-to**: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v4?s=09vbDhH5MC%2FADUtD5lTVpY%2BM0yHSqg6W0F0SDJPRmpDNbfjbJYAgsfbZbS1cStGOJb30oXZGAEv4NKnBQthQuNTKKXegt3G0wflIfGlPPT2jUE0sk%2BzrITVDDM3KMes%3D"}],"group":"cf-nel","max_age":604800}
**nel**: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
**vary**: Accept-Encoding
**speculation-rules**: "/cdn-cgi/speculation"
**cf-cache-status**: DYNAMIC
**strict-transport-security**: max-age=31536000; includeSubDomains; preload
**server**: cloudflare
**cf-ray**: 8d327cbced20c77a-SEA
**alt-svc**: h3=":443"; ma=86400

Early Hints is not picking up <link rel="preload"..." in my HTML file as it should and indicated in documentation.

You can enable Cloudflare’s edge to cache and send 103 Early Hints responses with Link headers from your HTML pages.

Below is my HTML and the Early Hints are not being auto generated from my HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/caveat-400-700.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-400.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-700.woff2" type="font/woff2" crossorigin>

What is the name of the domain?

https://bigleads.com/index2

What is the issue you’re encountering

Early Hints should be auto generated from your HTML HEAD, and inserted into your HTTP headers. It’s not doing that.

What steps have you taken to resolve the issue?

Here is a summary of my problem and trouble shooting …

Problem:

Early Hints does not appear to be working.

Because it’s not being pulled automatically from <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin> tags in <head>

Note: it works if I manually put the Early Hint in my _headers file, like so: Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

The Problem Site:

a. My site is https://bigleads.com/index2

b. This is hosted on a paid version of Cloudflare Pages

c. In my index2.html, I have the following code:


<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/source-serif-400-900.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/caveat-400-700.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-400.woff2" type="font/woff2" crossorigin>
        <link rel="preload" fetchpriority="high" as="font" href="assets/fonts/carlito-700.woff2" type="font/woff2" crossorigin>

Troubleshooting:

To verify the presence of an Early Hint, I use 2 different routes:

I run the the following curl command and inspect the headers:
curl -X HEAD -I https://bigleads.com/index2

I use the online Early Hints checker found at https://earlyhints.dev/
Neither of which indicate the the Early Hints is in the header.

What my HTTP headers look like are as follows:

HTTP/1.1 200 OK

Date: Mon, 14 Oct 2024 02:29:58 GMT
Content-Type: text/html; charset=utf-8
Connection: keep-alive
Access-Control-Allow-Origin: *
Cache-Control: public, max-age=16070400, must-revalidate
content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
permissions-policy: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
referrer-policy: same-origin
x-content-type-options: nosniff
x-frame-options: DENY
x-permitted-cross-domain-policies: none
x-xss-protection: 1; mode=block
Report-To: {“endpoints”:[{“url”:“https://a.nel.cloudflare.com/report/v4?s=JcYlt3j70PB5ES6kQJRyY%2FZBXUcJw2MPOYB63r8ngRmBW2P0MXdf4eFEPK2fVyQqY0rSEtv0u%2BMLnBEamZ%2BZWkgHzjpeLDEKRqRBROQ9JcfiHv%2FJfjAx5okGgKWZNiw%3D”}],“group”:“cf-nel”,“max_age”:604800}
NEL: {“success_fraction”:0,“report_to”:“cf-nel”,“max_age”:604800}
Vary: Accept-Encoding
Speculation-Rules: “/cdn-cgi/speculation”
CF-Cache-Status: HIT
Age: 1064
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
Server: cloudflare
CF-RAY: 8d24250deb41435c-EWR
Content-Encoding: gzip
alt-svc: h3=“:443”; ma=86400

Note: There is a missing 103 LINK http header

There should be in the header the following (but this is missing):

Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/caveat-400-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/carlito-400.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
Link: </assets/fonts/carlito-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

Caching:

I thought this might be a Caching issue, no. I have Purged all Cache and am in Development Mode.

Content Security Policy (CSP)

I thought this might be a CSP issue, no. Even when I completely remove my CSP directive in my _header

content-security-policy: upgrade-insecure-requests; default-src ‘self’; style-src ‘self’ ‘unsafe-inline’; script-src ‘self’; img-src ‘self’ data:; object-src ‘none’; frame-ancestors ‘self’

I still do not see the presence of the Early Hint

Settings:

I thought this might be a settings issues, no. I have Early Hints enabled in Dashboard.

I’m really at a loss as to why Early Hints aren’t working - especially when I manually enter them into my header.

What are the steps to reproduce the issue?

curl -X HEAD -I https://bigleads.com/index2

(You’ll see that the ‘103 LINK’ HTTP header is missing)

This was originally posted below a few days ago, but I don’t understand why it was merge in with an unrelated forum thread.

My Support Ticket # is 01228910

Hi there,

I replied to you on case 01228910.

For anyone else stumbling into this thread having the same issue:

Take care.

@mcorreia

As stated in my thread, I’ve already enabled Early Hints.

Can you please review again the problems I’m experiencing.

Hi there,

I’m not seeing a _headers file in your list of uploaded files.
Are you sure you’re following the documentation I linked?

Take care.

@mcorreia

Hi Miguel - thanks for the help.

Yes, on my account I have a _headers file defined. It’s located in the root of my bigleads.com CF Pages

Regardless, as I understand the documentation, even without needing a _headers file (which I have), Early Hints are suppose to be inspecting my HTML looking for preload directives and if found - Early Hints will insert automatically into my HTTP headers the 103 Early Hint.

Is the issue that I’m wanting to generate Early Hints for preloading a FONT file (not an HTML page)

  • For URIs with .html, .htm, or .php file extensions, or no file extension

I originally interrupted above to mean that HTML files would be auto-inspected for the LINK preload directive but maybe I misunderstand and Early Hints are only for HTML files themselves?

Maybe a related issue with FONT Early Hints

That original thread was mine. The issue was not that Cloudflare didn’t send the headers correctly with the 103 response but that the browser didn’t honour them as expected.

Your issue I believe is that you are using <link> tags in the HTML instead of HTTP headers. You will always need to use headers for fonts, and I’d recommend you use them for all preloading. As described in the documentation linked by another user above:

<link> elements which contain any other additional attributes (for example, fetchpriority , crossorigin or data-do-not-generate-a-link-header ) will not be used to generate Link headers in order to prevent accidentally losing any custom prioritization logic that would otherwise be dropped as an Early Hint.

Fonts always have crossorigin. Headers are the way to go.

Thank you for the help.

@dmnc

Thanks,

So would you recommend me to put the following in my _headers file?

# Security Headers (not already defined in Dashboard)
# For all of bigleads.com (/*)
#
/*
  Link: </assets/fonts/source-serif-400-900.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/caveat-400-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/carlito-400.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Link: </assets/fonts/carlito-700.woff2>;rel=preload;as=font;type=font/woff2;crossorigin
  Content-Security-Policy: upgrade-insecure-requests; default-src 'self'; style-src 'self' 'unsafe-inline'; script-src 'self'; img-src 'self' data:; object-src 'none'; frame-ancestors 'self'
  Cross-Origin-Resource-Policy: same-origin
  Cross-Origin-Opener-Policy: same-origin
  Cross-Origin-Embedder-Policy: require-corp
  Permissions-Policy: accelerometer=(),autoplay=(),camera=(),encrypted-media=(),fullscreen=*,geolocation=*,gyroscope=(),interest-cohort=(),magnetometer=(),microphone=(),midi=(),sync-xhr=*,usb=(),xr-spatial-tracking=()
  Referrer-Policy: same-origin
  X-Content-Type-Options: nosniff
  X-Frame-Options: DENY
  X-Permitted-Cross-Domain-Policies: none
  X-XSS-Protection: 1; mode=block

When I do that however, the Early Hints don’t seem to be working and now I start getting the 304 HTTP Status Code you were getting in your original thread.