fix: security headers

[rongquan1]

Summary by CodeRabbit

• Chores
  • Strengthened site security by adding a comprehensive set of HTTP security headers, including a detailed Content-Security-Policy, Permissions-Policy, cross-origin protections, X-Content-Type-Options, Strict-Transport-Security, and Referrer-Policy.
  • No changes to routing or public API behavior.

[netlify]

✅ Deploy Preview for tradetrust-gallery ready!

Name	Link
🔨 Latest commit	5a0ff7d
🔍 Latest deploy log	https://app.netlify.com/projects/tradetrust-gallery/deploys/69080d719ca04d0008c1fecc
😎 Deploy Preview	https://deploy-preview-29--tradetrust-gallery.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

Walkthrough

Updated Netlify configuration to add a comprehensive set of security headers (expanded Content-Security-Policy, Permissions-Policy, cross-origin policies, HSTS, X-Content-Type-Options, Referrer-Policy, etc.) for all routes while retaining existing CORS and X-Frame-Options settings. (≤50 words)

Changes

Cohort / File(s)

Change Summary

Security headers (Netlify config) netlify.toml

Replaced minimal CSP with a detailed Content-Security-Policy covering scripts, styles, fonts, images, connections, frames, and upgrade-insecure-requests; added Permissions-Policy, Cross-Origin-Resource-Policy, Cross-Origin-Opener-Policy, X-Content-Type-Options, Strict-Transport-Security, Referrer-Policy, and X-Permitted-Cross-Domain-Policies; preserved Access-Control-Allow-Origin and X-Frame-Options (DENY); included explanatory comments.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Check that CSP source lists match all required external hosts (scripts, styles, fonts, images, connect).
• Validate that Cross-Origin policies and Permissions-Policy do not block intended integrations or embeds.

Possibly related PRs

• fix: security settings #27: Overlaps in netlify.toml security header changes, including framing protections and CSP tightening.
• fix: add cors header to allow access from ref.tradetrust.io #28: Related changes around adding Access-Control-Allow-Origin to netlify.toml which this PR preserves and expands upon.

Suggested reviewers

• RishabhS7

Poem

🐰 I hopped through toml and tightened each gate,

CSP stitched up, cookies kept straight.
Cross-origin fences set firm and neat,
Headers assembled — secure and sweet.
Hop, deploy, and celebrate! 🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description is entirely missing, with no content provided by the author. The repository's template requires specific sections including Summary, Changes, Issues, and Releases, none of which are present. Without a description, reviewers lack context about the background of these security changes, the rationale for specific headers, any related issues or stories, and target release information. This absence of documentation makes it difficult for reviewers to fully understand the intent and impact of the changes.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "fix: security headers" is concise, clear, and directly summarizes the primary change made in this pull request. The title accurately reflects that the changeset adds comprehensive security headers to the Netlify configuration, covering CSP, permissions policies, cross-origin protections, and other security-related HTTP headers. The conventional commit format (fix:) is appropriately used to indicate a bug fix or security improvement.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/security-headers

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8e4d10b and 5a0ff7d.

📒 Files selected for processing (1)

• netlify.toml (1 hunks)

🔇 Additional comments (3)

netlify.toml (3)

18-19: Permissions-Policy configuration is well-scoped.

The policy appropriately restricts potentially sensitive browser features (camera, microphone, geolocation, payment, etc.) while permitting only necessary features. The fullscreen=(self) and picture-in-picture=() allowances are reasonable for a media/gallery application.

---

27-29: Additional security headers are properly configured.

• X-Content-Type-Options: nosniff prevents MIME type sniffing attacks.
• Strict-Transport-Security with max-age=31536000 (1 year) and includeSubDomains provides robust HSTS protection. Consider adding preload if the domain is registered with the HSTS preload list.
• Referrer-Policy: strict-origin-when-cross-origin balances privacy and functionality.

---

22-24: Cross-Origin policies are appropriate.

Cross-Origin-Resource-Policy: same-origin and Cross-Origin-Opener-Policy: same-origin provide Spectre mitigation and cross-origin isolation where feasible. The omission of Cross-Origin-Embedder-Policy as noted in the comment is a reasonable compatibility trade-off for Netlify deployment.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

netlify.toml (1)

16-16: Consider restricting img-src to known domains.

The CSP allows img-src 'self' data: https:, which permits images from any HTTPS domain. While this supports external imagery, it's overly permissive and could allow unintended image loads.

If feasible, restrict this to specific trusted domains or CDNs (e.g., img-src 'self' data: https://cdn.example.com https://images.example.com). If dynamic/user-controlled image sources are required, document this decision.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0106ef3 and 8e4d10b.

📒 Files selected for processing (1)

• netlify.toml (1 hunks)

🔇 Additional comments (2)

netlify.toml (2)

19-19: Verify Permissions-Policy syntax compliance.

The format of the Permissions-Policy header uses fullscreen=(self) and picture-in-picture=() syntax. Confirm this matches the current RFC standard for this header (RFC 9529 or relevant specification), as some older/newer formats may differ.

For reference, the standard format is typically Directive=() or Directive=(self) or Directive=(self "https://example.com"). Ensure consistency across all directives.

---

6-30: Well-structured comprehensive security header suite.

The overall approach is solid:

• CORS locked to a specific origin (https://ref.tradetrust.io)
• Clickjacking protection via X-Frame-Options: DENY
• Origin isolation via CORP + COOP (Spectre mitigation)
• HTTPS enforcement via HSTS with preload flag
• MIME type sniffing prevention and referrer controls
• Granular Permissions-Policy for browser features

The addition of comments for each header improves maintainability. Once the CSP and Permissions-Policy items above are addressed, this will be a strong baseline.