add noreferrer, make csp less janky, fix error when no default visibi…

…lity is set (looking at you sharkey), max-width on inline images, show tags from wafrn with spaces instead of dashes, don't duplicate hashtag processing work, fix hashtagbar for some posts from sharkey
orbitalmartian8 · May 26, 2024 · 1943c42 · 1943c42
1 parent 83da0be
commit 1943c42
Show file tree

Hide file tree

Showing 11 changed files with 182 additions and 56 deletions.
diff --git a/bin/build-inline-script.js b/bin/build-inline-script.js
@@ -13,7 +13,7 @@ import { sapperInlineScriptChecksums } from '../src/server/sapperInlineScriptChe
 const __dirname = path.dirname(new URL(import.meta.url).pathname)
 const writeFile = promisify(fs.writeFile)
 
-export async function buildInlineScript () {
+async function buildInlineScriptAndCSP () {
   const inlineScriptPath = path.join(__dirname, '../src/inline-script/inline-script.js')
 
   const bundle = await rollup({
@@ -63,5 +63,18 @@ export async function buildInlineScript () {
   ].join(';')
   await writeFile(path.resolve(__dirname, '../static/inline-script.js.map'),
     map.toString(), 'utf8')
-  return `<meta http-equiv="Content-Security-Policy" content="${policy}" /></head><body><script>${fullCode}</script>`
+  return {
+    inlineScript: `<script>${fullCode}</script>`,
+    csp: `<meta http-equiv="Content-Security-Policy" content="${policy}" />`
+  }
+}
+
+export function buildInlineScript (context) {
+  if (context.inlineScript) {
+    return context.inlineScript
+  } else {
+    const promise = buildInlineScriptAndCSP()
+    context.inlineScript = promise.then(e => e.inlineScript)
+    return promise.then(e => e.csp)
+  }
 }
diff --git a/bin/build-template-html.js b/bin/build-template-html.js
@@ -19,17 +19,19 @@ const LOCALE_DIRECTION = getLangDir(LOCALE)
 const DEBOUNCE = 500
 
 const builders = [
+  {
+    watch: 'src/inline-script/inline-script.js',
+    comment: '<meta http-equiv="Content-Security-Policy" content="default-src \'none\'" />',
+    rebuild: buildInlineScript
+  },
   {
     watch: 'src/scss',
     comment: '<!-- inline CSS -->',
     rebuild: buildSass
   },
   {
     watch: 'src/inline-script/inline-script.js',
-    comment: String.raw`<!--( CSP )--
-</head>
-<body>
-  --( inline JS )-->`,
+    comment: '<!-- inline JS -->',
     rebuild: buildInlineScript
   },
   {
@@ -87,12 +89,13 @@ function doWatch () {
 
 async function buildAll () {
   const start = performance.now()
+  const context = {}
   let html = (await Promise.all(partials.map(async partial => {
     if (typeof partial === 'string') {
       return partial
     }
     if (!partial.result) {
-      partial.result = partial.comment + '\n' + (await partial.rebuild())
+      partial.result = (partial.comment[1] === '!' ? (partial.comment + '\n') : '') + (await partial.rebuild(context))
     }
     return partial.result
   }))).join('')

diff --git a/src/build/template.html b/src/build/template.html
@@ -2,6 +2,9 @@
 <html lang="{process.env.LOCALE}" dir="{process.env.LOCALE_DIRECTION}">
 <head>
   <meta charset='utf-8' >
+  <!-- CSP (replacement fails closed) -->
+  <meta http-equiv="Content-Security-Policy" content="default-src 'none'" />
+  <meta name="referrer" content="no-referrer" />
   <meta name="viewport" content="width=device-width">
   <meta id='theThemeColor' name='theme-color' content='#4169e1' >
   <meta name="description" content="intl.appDescription" >
@@ -110,10 +113,9 @@
   <!-- This contains the contents of the <:Head> component, if
        the current page has one -->
   %sapper.head%
-  <!--( CSP )--
+  <!-- inline JS -->
 </head>
 <body>
-  --( inline JS )-->
 
   <!-- The application will be rendered inside this element,
        because `templates/client.js` references it -->

diff --git a/src/routes/_actions/compose.js b/src/routes/_actions/compose.js
@@ -106,7 +106,7 @@ export function setReplyVisibility (realm, replyVisibility) {
     return // user has already set the postPrivacy
   }
   const { currentVerifyCredentials } = store.get()
-  const defaultVisibility = currentVerifyCredentials.source.privacy
+  const defaultVisibility = currentVerifyCredentials.source.privacy || 'public'
   const visibility = PRIVACY_LEVEL[replyVisibility] < PRIVACY_LEVEL[defaultVisibility]
     ? replyVisibility
     : defaultVisibility

diff --git a/src/routes/_components/dialog/components/PostPrivacyDialog.html b/src/routes/_components/dialog/components/PostPrivacyDialog.html
@@ -49,7 +49,7 @@
         return POST_PRIVACY_OPTIONS.find(_ => _.key === postPrivacyKey)
       },
       postPrivacyKey: ({ composeData, $currentVerifyCredentials }) => {
-        return composeData.postPrivacy || $currentVerifyCredentials.source.privacy
+        return composeData.postPrivacy || $currentVerifyCredentials.source.privacy || 'public'
       },
       localOnly: ({ composeData }) => {
         return composeData.localOnly

diff --git a/src/routes/_components/status/StatusContent.html b/src/routes/_components/status/StatusContent.html
@@ -75,6 +75,10 @@
     text-decoration: underline;
   }
 
+  :global(.status-content img:not(.inline-custom-emoji)) {
+    max-width: 100%;
+  }
+
   @media (max-width: 240px) {
     :global(
       .status-content p:last-child,

diff --git a/src/routes/_components/status/StatusTags.html b/src/routes/_components/status/StatusTags.html
@@ -1,6 +1,6 @@
 <div class="status-hashtag-bar {isStatusInNotification ? 'status-in-notification' : '' }">
   {#each hashtagsInBar as hashtagInBar}
-  <a href="/tags/{encodeURIComponent(hashtagInBar)}" class="hashtag" rel="nofollow noopener ugc tag">#{hashtagInBar}</a>
+  <a href="/tags/{encodeURIComponent(hashtagInBar.value)}" class="hashtag" rel="nofollow noopener ugc tag" title="{hashtagInBar.display ? hashtagInBar.value : ''}">#{hashtagInBar.display || hashtagInBar.value}</a>
   {/each}
 </div>
 <style>

diff --git a/src/routes/_utils/renderPostHTML.ts b/src/routes/_utils/renderPostHTML.ts
@@ -8,12 +8,69 @@ import {
   serialize,
 } from 'parse5'
 import { Mention } from './types.ts'
-import * as hashtag from '../_workers/processContent/hashtagBar.ts'
+import {
+  normalizeHashtag,
+  localeAwareInclude,
+} from '../_workers/processContent/hashtagBar.ts'
 
 const {
   NS: { HTML },
 } = html
 
+function isNodeLinkHashtag(element: DefaultTreeAdapterMap['element']): boolean {
+  if (element.tagName === 'a') {
+    const c = element.attrs.find((attr) => /*  */ attr.name === 'class')
+    const r = element.attrs.find((attr) => attr.name === 'rel')
+    const h = element.attrs.find((attr) => attr.name === 'href')
+    return (
+      !!c?.value.split(/\s+/g).includes('hashtag') ||
+      !!r?.value.split(/\s+/g).includes('tag') ||
+      !!h?.value?.match(/\/tags\/[^\/]+$|\/search\?tag=/) // GtS and Friendica, respectively
+    )
+  }
+  return false
+}
+
+function textContent(node: DefaultTreeAdapterMap['parentNode']): string[] {
+  let text = []
+  for (const child of node.childNodes) {
+    if (defaultTreeAdapter.isTextNode(child)) {
+      text.push(child.value)
+    } else if ('childNodes' in child) {
+      text.push(...textContent(child))
+    }
+  }
+  return text
+}
+
+const isValidHashtagNode = (
+  node: DefaultTreeAdapterMap['node'],
+  normalizedTagNames: string[],
+) => {
+  if (!node) {
+    return false
+  }
+  let text: string
+  if (
+    defaultTreeAdapter.isElementNode(node) &&
+    isNodeLinkHashtag(node) &&
+    (text = textContent(node).join(''))
+  ) {
+    const normalized = normalizeHashtag(text)
+    if (!localeAwareInclude(normalizedTagNames, normalized)) {
+      // stop here, this is not a real hashtag, so consider it as text
+      return false
+    }
+    return normalized
+  } else if (!defaultTreeAdapter.isTextNode(node) || node.value.trim()) {
+    // not a space
+    return false
+  } else {
+    // spaces
+    return true
+  }
+}
+
 function consumeBalanced(
   string: string,
   open: string,
@@ -174,10 +231,14 @@ export function renderPostHTMLToDOM({
     let tag: string | boolean
     if (
       href != null &&
-      (tag = hashtag.isValidHashtagNode(anchor, normalizedTagNames)) &&
+      (tag = isValidHashtagNode(anchor, normalizedTagNames)) &&
       typeof tag === 'string'
     ) {
       let isFriendica = href.value.includes('/search?tag=')
+      const wafrnMatch = href.value.match(/\/dashboard\/search\/([^\/]+)$/)
+      const wafrnTag = wafrnMatch
+        ? decodeURIComponent(wafrnMatch[1]!)
+        : undefined
       if (isFriendica) {
         isFriendica = false
         const parent = anchor.parentNode
@@ -196,8 +257,25 @@ export function renderPostHTMLToDOM({
       href.value = `/tags/${encodeURIComponent(tag)}`
       c.value = 'hashtag'
       rel.value = 'nofollow noopener ugc tag'
+      anchor.attrs.push({
+        name: 'data-tag',
+        value: tag,
+      })
+      if (wafrnTag) {
+        anchor.attrs.push({
+          name: 'data-wafrn-tag',
+          value: wafrnTag,
+        })
+        anchor.attrs.push({
+          name: 'title',
+          value: tag,
+        })
+      }
       anchor.childNodes = []
-      defaultTreeAdapter.insertText(anchor, (isFriendica ? '' : '#') + tag)
+      defaultTreeAdapter.insertText(
+        anchor,
+        (isFriendica ? '' : '#') + (wafrnTag ? wafrnTag : tag),
+      )
       return
     } else if (href != null && classList.includes('mention')) {
       const mention = mentionsByURL.get(href.value)