Conversation
…ility Fixes #266 **Problem:** Project pages failed to load images with OpaqueResponseBlocking error. Cross-origin images from cdn.sanity.io were blocked by browser security policies due to missing crossOrigin attribute. **Solution:** Added crossOrigin="anonymous" to all image loading components: - OptimizedImage.tsx (Next.js Image component - fill and fixed modes) - LockdownImage.tsx (native img element for iOS Lockdown Mode) - FirstImage.tsx (server-rendered LCP image: AVIF, WebP, JPEG sources) **Testing:** Followed TDD workflow: 1. RED: Wrote 8 failing tests for crossOrigin attribute presence 2. GREEN: Implemented crossOrigin attribute on all components 3. REFACTOR: N/A (minimal change, no refactoring needed) All tests pass: - 79 new tests pass (OptimizedImage, LockdownImage, FirstImage) - 950 total tests pass (full suite) - Zero regressions **Technical Details:** - Uses crossOrigin="anonymous" per MDN best practices - Enables proper CORS handling for CDN-served images - Prevents opaque response blocking under strict CSP - Aligns with existing font preload pattern (layout.tsx:62-75) - No credentials sent (anonymous mode) - maintains security
🎯 Performance Budget SummaryBundle Size Analysis
Lighthouse Performance ValidationDesktop Results
Mobile Results
Performance Budget Status
Next Steps
Generated at $(date) |
🔍 Lighthouse Performance Report❌ No Lighthouse results found. Check the workflow logs for details. This report was generated by Lighthouse CI in GitHub Actions |
|
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
Owner
Author
✅ Local Testing CompleteTest Environment:
Test Results: Manual Browser Testing
Production Build
Test Coverage
Technical VerificationConfirmed
Status: ✅ Ready for production deployment The fix works as expected locally. No OpaqueResponseBlocking errors occurred when accessing project pages with images from cdn.sanity.io. |
- Removed unused 'imageHelpers' import variable - Removed unused 'src' parameter in mock function - Fixes ESLint errors that blocked production build
🔍 Lighthouse Performance Report❌ No Lighthouse results found. Check the workflow logs for details. This report was generated by Lighthouse CI in GitHub Actions |
maxrantil
added a commit
that referenced
this pull request
Jan 13, 2026
Complete session handoff documentation for Issue #266/PR #267. Summary: - Fixed OpaqueResponseBlocking by adding crossOrigin attribute - TDD workflow: 8 new tests, all passing (950/950) - Local production testing confirmed working - PR merged to master, ready for VPS deployment Next session: Deploy to production VPS at idaromme.dk
maxrantil
added a commit
that referenced
this pull request
Jan 13, 2026
…locking fix) Root cause identified: Image preload links were missing crossorigin="anonymous" attribute, causing OpaqueResponseBlocking errors in production. Changes: - Add crossOrigin="anonymous" to homepage LCP image preload (page.tsx:142) - Add crossOrigin="anonymous" to projects page LCP image preload (projects/page.tsx:135) - Matches existing pattern from font preloads (layout.tsx:67,74) This completes the Issue #266 fix: 1. crossOrigin on img elements (PR #267) ✅ 2. Remove invalid crossOrigin from source elements (commit 73bd93d) ✅ 3. Add crossOrigin to preload links (this commit) ✅ Expected result: No more OpaqueResponseBlocking errors on idaromme.dk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Fixes #266 - Resolves OpaqueResponseBlocking errors preventing project page images from loading.
Changes
crossOrigin="anonymous"to OptimizedImage component (Next.js Image)crossOrigin="anonymous"to LockdownImage component (native img)crossOrigin="anonymous"to FirstImage component (AVIF, WebP, JPEG sources)Technical Details
Problem:
Images from
cdn.sanity.iowere blocked with OpaqueResponseBlocking error due to missingcrossOriginattribute. Browsers enforce CORS policies strictly, treating cross-origin responses without proper CORS attributes as "opaque" and potentially blocking them under CSP configurations.Solution:
Added
crossOrigin="anonymous"to all image elements/sources loading from Sanity CDN. This:layout.tsx:62-75)Testing
TDD Workflow (RED-GREEN-REFACTOR):
Test Results:
New Test Files:
src/components/ui/__tests__/LockdownImage.test.tsxsrc/components/server/__tests__/FirstImage.test.tsxModified Test Files:
src/components/ui/__tests__/OptimizedImage.test.tsx(added CORS tests)References
src/app/layout.tsx:62-75middleware.ts:227-243Manual Testing Required
Please test project page image loading in:
Verification:
/project/[slug])Checklist