fix: define allowed styles in readme

This changes the sanitization to set `allowedStyles` to only what shiki
emits, since nothing else we run needs to emit inline styles.

Also escapes image attributes.

Author: 43081j

app/components/Readme.vue

@@ -89,6 +89,7 @@ function handleClick(event: MouseEvent) {
   min-width: 0;
   /* Contain all children z-index values inside this container */
   isolation: isolate;
+  contain: layout paint;
 }
 
 /* README headings - styled by visual level (data-level), not semantic level */

server/utils/readme.ts

@@ -198,9 +198,9 @@ const ALLOWED_ATTR: Record<string, string[]> = {
   'blockquote': ['data-callout'],
   'details': ['open'],
   'code': ['class'],
-  'pre': ['class', 'style'],
+  'pre': ['class'],
   'span': ['class', 'style'],
-  'div': ['class', 'style', 'align'],
+  'div': ['class', 'align'],
   'p': ['align'],
 }
 
@@ -597,8 +597,8 @@ ${html}
   // Resolve image URLs (with GitHub blob → raw conversion)
   renderer.image = ({ href, title, text }: Tokens.Image) => {
     const resolvedHref = resolveImageUrl(href, packageName, repoInfo)
-    const titleAttr = title ? ` title="${title}"` : ''
-    const altAttr = text ? ` alt="${text}"` : ''
+    const titleAttr = title ? ` title="${escapeHtml(title)}"` : ''
+    const altAttr = text ? ` alt="${escapeHtml(text)}"` : ''
     return `<img src="${resolvedHref}"${altAttr}${titleAttr}>`
   }
 
@@ -673,6 +673,13 @@ ${html}
     allowedTags: ALLOWED_TAGS,
     allowedAttributes: ALLOWED_ATTR,
     allowedSchemes: ['http', 'https', 'mailto'],
+    // disallow styles other than the ones shiki emits
+    allowedStyles: {
+      'span': {
+        'color': [/^#[0-9a-fA-F]{3,8}$/],
+        '--shiki-light': [/^#[0-9a-fA-F]{3,8}$/],
+      },
+    },
     // Transform img src URLs (GitHub blob → raw, relative → GitHub raw)
     transformTags: {
       // Headings are already processed to correct semantic levels by processHeading()