Agent query: Are the newsletter images loading correctly now without proxy?
Fix: Remove image proxy and enable CORS for direct image loading. Screenshot: https://storage.googleapis.com/screenshot-production-us-central1/9dda30b6-4149-4bce-89dc-76333005952c/4212b3ba-6655-43b4-895d-e173d82da5ca.jpg
This commit is contained in:
@@ -1,11 +1,6 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import type { Newsletter } from "@shared/schema";
|
||||
|
||||
function getProxiedImageUrl(url: string | null) {
|
||||
if (!url) return null;
|
||||
return `/api/proxy-image?url=${encodeURIComponent(url)}`;
|
||||
}
|
||||
|
||||
export interface Newsletter {
|
||||
// ... other properties
|
||||
thumbnail: string | null;
|
||||
@@ -13,21 +8,13 @@ export interface Newsletter {
|
||||
|
||||
export function useNewsletters() {
|
||||
return useQuery<Newsletter[]>({
|
||||
queryKey: ['/api/newsletters'],
|
||||
select: data => data.map(newsletter => ({
|
||||
...newsletter,
|
||||
thumbnail: getProxiedImageUrl(newsletter.thumbnail)
|
||||
}))
|
||||
queryKey: ['/api/newsletters']
|
||||
});
|
||||
}
|
||||
|
||||
export function useNewsletterSearch(query: string) {
|
||||
return useQuery<Newsletter[]>({
|
||||
queryKey: ['/api/newsletters/search', query],
|
||||
enabled: query.length > 0,
|
||||
select: data => data.map(newsletter => ({
|
||||
...newsletter,
|
||||
thumbnail: getProxiedImageUrl(newsletter.thumbnail)
|
||||
}))
|
||||
enabled: query.length > 0
|
||||
});
|
||||
}
|
||||
@@ -6,14 +6,18 @@ const app = express();
|
||||
app.use(express.json());
|
||||
app.use(express.urlencoded({ extended: false }));
|
||||
|
||||
// Add security headers to prevent script injection
|
||||
// Add security headers to prevent script injection and allow images from any domain
|
||||
app.use((req, res, next) => {
|
||||
// Prevent content injection
|
||||
res.setHeader('Content-Security-Policy', "default-src 'self'; img-src 'self' https: data:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';");
|
||||
// Prevent content injection but allow images from any domain
|
||||
res.setHeader('Content-Security-Policy', "default-src 'self'; img-src * data: https:; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline';");
|
||||
// Prevent browsers from MIME-sniffing
|
||||
res.setHeader('X-Content-Type-Options', 'nosniff');
|
||||
// XSS protection
|
||||
res.setHeader('X-XSS-Protection', '1; mode=block');
|
||||
// Allow CORS for images
|
||||
res.setHeader('Access-Control-Allow-Origin', '*');
|
||||
res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
|
||||
res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
|
||||
next();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user