feat: proxy images

app.js

@@ -23,7 +23,7 @@ app.use(
   helmet({
     contentSecurityPolicy: {
       directives: {
-        'img-src': ["'self'", '*.quoracdn.net'],
+        'img-src': ["'self'"],
         'script-src': ["'self'", 'cdn.jsdelivr.net'],
       },
     },

controllers/apiController.js

@@ -1,6 +1,7 @@
 ////////////////////////////////////////////////////////
 //                     IMPORTS
 ////////////////////////////////////////////////////////
+import axiosInstance from '../utils/axiosInstance.js';
 import catchAsyncErrors from '../utils/catchAsyncErrors.js';
 import getAnswers from '../fetchers/getAnswers.js';
 import getTopic from '../fetchers/getTopic.js';
@@ -32,3 +33,16 @@ export const unimplemented = (req, res, next) => {
     message: "This route isn't yet implemented. Check back sometime later!",
   });
 };
+
+export const image = catchAsyncErrors(async (req, res, next) => {
+  if (!req.params.domain.endsWith("quoracdn.net")) {
+    return res.status(403).json({
+      status: 'fail',
+      message: "Invalid domain",
+    });
+  }
+
+  const imageRes = await axiosInstance.get(`https://${req.params.domain}/${req.params.path}`, { responseType: 'arraybuffer' });
+  res.set('Content-Type', imageRes.headers['content-type'])
+  res.status(200).send(imageRes.data);
+});

routes/apiRoutes.js

@@ -4,12 +4,14 @@ import {
   unimplemented,
   answers,
   topic,
+  image
 } from '../controllers/apiController.js';
 
 const apiRouter = express.Router();
 
 apiRouter.get('/', about);
 apiRouter.get('/search', unimplemented);
+apiRouter.get('/image/:domain/:path', image);
 apiRouter.get('/profile/:name', unimplemented);
 apiRouter.get('/topic/:slug', topic);
 apiRouter.get('/unanswered/:slug', answers);

views/pug/_answer.pug

@@ -38,7 +38,7 @@ article.answer
         svg.answer__icon
           title verified
           use(href='/misc/sprite.svg#icon-verified')
-    img.answer__author-image(src=answerObj.author.avatar, alt=`${answerObj.author.name}'s profile photo`, loading='lazy')
+    img.answer__author-image(src=answerObj.author.avatar.replace('https://', "/api/v1/image/"), alt=`${answerObj.author.name}'s profile photo`, loading='lazy')
     p.answer__author-credentials(aria-label=`${answerObj.author.name}'s credentials`)= answerObj.author.credential || ''
 
   h3.answer__question.heading.heading__tertiary
@@ -51,7 +51,7 @@ article.answer
     //- putting paragraphs in semantically correct tags(to the extent possible)
     each para in answerObj.text
       -if(para.type==='image')
-        img.answer__para.answer__image(src=para.spans[0].modifiers.master_url, alt='User embedded image', loading='lazy')
+        img.answer__para.answer__image(src=para.spans[0].modifiers.master_url.replace('https://', "/api/v1/image/"), alt='User embedded image', loading='lazy')
       - else if (para.type==='code')
         pre.answer__para.answer__code: code
           +spansChecker(para.spans)

views/pug/topic.pug

@@ -8,7 +8,7 @@ block content
     //- all info related to the topic
     .topic__stats.topic-stats
       h1.heading.heading__primary.topic__heading.topic-stats__heading= data.name
-      img.topic-stats__image(src=data.image alt=`image depicting ${data.name}`, loading='lazy')
+      img.topic-stats__image(src=data.image.replace('https://', "/api/v1/image/") alt=`image depicting ${data.name}`, loading='lazy')
       if data.aliases.length
         p.topic-stats__aliases
           span.topic-stats__aliases-text Also known as: 
@@ -43,7 +43,7 @@ block content
                 svg.famous-authors__icon
                   title verified
                   use(href='/misc/sprite.svg#icon-verified')
-            img.famous-authors__author-image(src=author.avatar, alt=`${author.name}'s profile photo`, loading='lazy')
+            img.famous-authors__author-image(src=author.avatar.replace('https://', "/api/v1/image/"), alt=`${author.name}'s profile photo`, loading='lazy')
             if author.credential
             p.famous-authors__author-credentials(aria-label=`${author.name}'s credentials`)= author.credential || ''
             .famous-authors__metadata
@@ -66,7 +66,7 @@ block content
         each topic in data.relatedTopics
           .related-topics__topic
             a.topic__link.related-topics__topic-name(href=topic.url)= topic.name
-            img.related-topics__image(src=topic.image alt=`image depicting ${topic.name}`, loading='lazy')
+            img.related-topics__image(src=topic.image.replace('https://', "/api/v1/image/") alt=`image depicting ${topic.name}`, loading='lazy')
             .related-topics__metadata
               p.related-topics__metadata-item
                 svg.icon.related-topics__icon: use(href='/misc/sprite.svg#icon-user')