fix: trusted html

.eslintrc.js

@@ -45,9 +45,6 @@ module.exports = {
       },
 
       'rules': {
-        '@typescript-eslint/no-unused-vars-experimental': ['error', {
-          'ignoredNamesRegex': '^h$',
-        }],
         '@typescript-eslint/no-unused-vars': ['off', {
           'varsIgnorePattern': '^h$',
         }],

build/config/webpack/webpack.base.conf.js

@@ -121,6 +121,31 @@ config.module.rule('json-stringify-replace')
     replace: 'require(\'~/util/stringify\').stringify(',
   })
 
+config.module.rule('vue-runtime-dom-trsuted-html-hack')
+  // node_modules\@vue\runtime-dom\dist\runtime-dom.esm-bundler.js
+  .test(/@vue[\\/]runtime-dom[\\/]dist[\\/]runtime-dom.esm-bundler\.js$/)
+  .use('string-replace-loader')
+  .loader('string-replace-loader')
+  .options({
+    multiple: [
+      {
+        search: 'container.innerHTML = \'\';',
+        replace: 'container.childNodes.forEach(v => container.removeChild(v))',
+      },
+      {
+        // eslint-disable-next-line no-template-curly-in-string
+        search: 't.innerHTML = isSVG ? `<svg>${content}</svg>` : content',
+        // eslint-disable-next-line no-template-curly-in-string
+        replace: 't.innerHTML = icibaUserscriptTrustedHTML(isSVG ? `<svg>${content}</svg>` : content);',
+      },
+      {
+        // eslint-disable-next-line no-template-curly-in-string
+        search: 'el[key] = value == null ? \'\' : value',
+        // eslint-disable-next-line no-template-curly-in-string
+        replace: 'el[key] = icibaUserscriptTrustedHTML(value == null ? \'\' : value)',
+      },
+    ],
+  })
 
 config.plugin('progress')
   .use(ProgressBarPlugin, [{

package.json

@@ -44,7 +44,7 @@
     "@babel/core": "^7.16.0",
     "@babel/plugin-transform-runtime": "^7.16.4",
     "@babel/preset-env": "^7.16.4",
-    "@noe132/eslint-config-vue": "^0.0.7",
+    "@noe132/eslint-config-vue": "^0.1.1",
     "@types/greasemonkey": "^4.0.2",
     "@types/jest": "^27.0.3",
     "@types/md5": "^2.3.1",

src/App.ts

@@ -1,3 +1,5 @@
+// eslint-disable-next-line import/no-unassigned-import
+import '~/util/trustedHTMLHack'
 import { defineComponent, onMounted, onUnmounted, ref } from 'vue'
 import { lazyLoadHoc } from '~/util/lazyLoadHoc'
 

src/index.ts

@@ -23,10 +23,6 @@ import App from '~/App.vue'
 const main = async () => {
   await initStore(providers)
 
-  const style = document.createElement('style')
-  style.innerHTML = '.iciba-root{all:initial}'
-  document.head.appendChild(style)
-
   const app = createApp({
     render() {
       return h(App)

src/provider/Vocabulary/translate.ts

@@ -3,6 +3,7 @@ import { got } from '~/util/gmapi'
 import copy from '~/util/copy'
 
 import containerData from './container/data'
+import { trustedHTMLHack } from '~/util/trustedHTMLHack'
 
 
 const nonNull = <T>(p: T | undefined | null) => {
@@ -28,7 +29,7 @@ const getAutocomplete = async (word: string) => {
 
   const html = result.right.responseText
   const div = document.createElement('div')
-  div.innerHTML = html
+  div.innerHTML = trustedHTMLHack(html)
   const data = Array.from(div.querySelectorAll('.suggestions > li')).map((li) => ({
     lang: li.getAttribute('lang') ?? '',
     synsetid: li.getAttribute('synsetid') ?? '',
@@ -69,7 +70,7 @@ const getDefinition = async (word: string) => {
 
   const html = result.right.responseText
   const div = document.createElement('div')
-  div.innerHTML = html
+  div.innerHTML = trustedHTMLHack(html)
 
   const data = {
     short: div.querySelector('.word-area .short')?.textContent?.trim() ?? undefined,

src/service/shadowRoot/index.ts

@@ -1,5 +1,6 @@
 export const icibaRoot = document.createElement('div')
 icibaRoot.className = 'iciba-root'
+icibaRoot.style.all = 'initial'
 document.body.appendChild(icibaRoot)
 
 export const shadowRoot = (() => {

src/util/trustedHTMLHack.ts

@@ -0,0 +1,18 @@
+/* eslint-disable import/first, @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return */
+declare const trustedTypes: any
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-call
+const escapeHTMLPolicy = trustedTypes
+  ? trustedTypes.createPolicy('myEscapePolicy', {
+    createHTML: (string: string) => string,
+  })
+  : null
+
+export const trustedHTMLHack = (...args: Array<any>) => {
+  if (escapeHTMLPolicy) {
+    return escapeHTMLPolicy.createHTML(...args)
+  }
+  return args[0]
+}
+
+(unsafeWindow as any).icibaUserscriptTrustedHTML = trustedHTMLHack