Fix PR review follow-ups

scripts/sync-blog-posts.mjs

@@ -67,6 +67,13 @@ function slugFromPath(path) {
   return path.split('/').pop().replace(/\.md$/, '');
 }
 
+function resolveThumbnail(value, articlePath) {
+  if (!value || /^https?:\/\//.test(value) || value.startsWith('/')) return value || '';
+
+  const articleDirectory = articlePath.split('/').slice(0, -1).join('/');
+  return new URL(value, `https://raw.githubusercontent.com/${BLOG_REPO}/main/${articleDirectory}/`).toString();
+}
+
 async function getCommitMeta(path) {
   const commits = await requestJson(`https://api.github.com/repos/${BLOG_REPO}/commits?path=${encodeURIComponent(path)}&per_page=100`);
   const firstCommit = commits.at(-1);
@@ -108,7 +115,7 @@ for (const path of articleFiles) {
     date: data.date || '',
     tags: data.tags || [],
     status: data.status || 'draft',
-    thumbnail: data.thumbnail || data.image || data.cover || '',
+    thumbnail: resolveThumbnail(data.thumbnail || data.image || data.cover || '', path),
     content,
     sourceUrl: file.html_url,
     releasedAt: commitMeta.releasedAt,

src/components/BaseButton.astro

@@ -1,14 +1,13 @@
 ---
-import { withBase } from '../lib/urls';
+import { normalizeHref } from '../lib/urls';
 
 interface Props {
   href: string;
   variant?: 'primary' | 'secondary' | 'light';
 }
 
 const { href, variant = 'primary' } = Astro.props;
-const isExternal = /^https?:\/\//.test(href);
-const targetHref = isExternal ? href : withBase(href);
+const targetHref = normalizeHref(href);
 
 const variants = {
   primary: 'border-brand bg-brand text-white hover:bg-brand-dark',

src/components/ProjectCard.astro

@@ -26,7 +26,7 @@ interface Props {
   compact?: boolean;
 }
 
-import { withBase } from '../lib/urls';
+import { normalizeHref, withBase } from '../lib/urls';
 import { projectSlug } from '../lib/projects';
 
 const { project, compact = false } = Astro.props;
@@ -38,6 +38,7 @@ const updatedLabel = updatedDate
 const visibleTopics = (project.topics || []).slice(0, 4);
 const detailUrl = withBase(`/projects/${projectSlug(project.fullName)}/`);
 const repoName = project.fullName.split('/').at(-1) || project.fullName;
+const homepageUrl = project.homepage ? normalizeHref(project.homepage) : '';
 ---
 
 <article
@@ -98,6 +99,6 @@ const repoName = project.fullName.split('/').at(-1) || project.fullName;
     <span class="rounded-full border border-line px-2 py-1">{project.stars.toLocaleString('id-ID')} stars</span>
     <span class="rounded-full border border-line px-2 py-1">{project.forks.toLocaleString('id-ID')} forks</span>
     {updatedLabel && <span class="rounded-full border border-line px-2 py-1">Update {updatedLabel}</span>}
-    {project.homepage && <a class="relative z-20 rounded-full border border-line px-2 py-1 hover:text-brand" href={project.homepage}>Homepage</a>}
+    {homepageUrl && <a class="relative z-20 rounded-full border border-line px-2 py-1 hover:text-brand" href={homepageUrl}>Homepage</a>}
   </div>
 </article>

src/lib/urls.ts

@@ -2,3 +2,9 @@ export function withBase(path: string) {
   const baseUrl = import.meta.env.BASE_URL.replace(/\/?$/, '/');
   return `${baseUrl}${path.replace(/^\/+/, '')}`;
 }
+
+export function normalizeHref(href: string) {
+  if (/^(https?:)?\/\//.test(href) || href.startsWith('mailto:')) return href;
+  if (/^[\w.-]+\.[a-z]{2,}(\/.*)?$/i.test(href)) return `https://${href}`;
+  return withBase(href);
+}

src/pages/projects/[slug].astro

@@ -100,6 +100,62 @@ const repoName = project.fullName.split('/').at(-1) || project.fullName;
 
   const root = document.querySelector('[data-readme-root]');
   const apiUrl = root?.getAttribute('data-readme-api');
+  const unsafeSelectors = [
+    'script',
+    'style',
+    'iframe',
+    'object',
+    'embed',
+    'link',
+    'meta',
+    'svg',
+    'math',
+    'form',
+    'input',
+    'button',
+    'textarea',
+    'select'
+  ].join(',');
+
+  function safeUrl(value: string, baseUrl: string) {
+    if (!value || value.startsWith('#')) return value;
+
+    try {
+      const url = new URL(value, baseUrl);
+      if (!['http:', 'https:', 'mailto:'].includes(url.protocol)) return '';
+      return url.toString();
+    } catch {
+      return '';
+    }
+  }
+
+  function sanitizeReadme(html: string, linkBaseUrl: string, assetBaseUrl: string) {
+    const document = new DOMParser().parseFromString(html, 'text/html');
+    document.querySelectorAll(unsafeSelectors).forEach((element) => element.remove());
+
+    document.body.querySelectorAll('*').forEach((element) => {
+      Array.from(element.attributes).forEach((attribute) => {
+        const name = attribute.name.toLowerCase();
+
+        if (name.startsWith('on') || name === 'style' || name === 'srcdoc') {
+          element.removeAttribute(attribute.name);
+          return;
+        }
+
+        if (name === 'href') {
+          const nextUrl = safeUrl(attribute.value, linkBaseUrl);
+          nextUrl ? element.setAttribute(attribute.name, nextUrl) : element.removeAttribute(attribute.name);
+        }
+
+        if (name === 'src') {
+          const nextUrl = safeUrl(attribute.value, assetBaseUrl);
+          nextUrl ? element.setAttribute(attribute.name, nextUrl) : element.removeAttribute(attribute.name);
+        }
+      });
+    });
+
+    return document.body.innerHTML;
+  }
 
   async function loadReadme() {
     if (!root || !apiUrl) return;
@@ -112,7 +168,8 @@ const repoName = project.fullName.split('/').at(-1) || project.fullName;
       const binary = atob(data.content.replace(/\n/g, ''));
       const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0));
       const markdown = new TextDecoder().decode(bytes);
-      root.innerHTML = await marked.parse(markdown);
+      const html = await marked.parse(markdown);
+      root.innerHTML = sanitizeReadme(html, data.html_url, data.download_url);
     } catch (error) {
       root.innerHTML = '<p>README belum bisa dimuat otomatis. Buka README langsung dari GitHub.</p>';
     }