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:
- 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
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.