chore: tweaks

Author: Mister-Hope

docs/plugins/markdown/markdown-chart/README.md

@@ -135,4 +135,4 @@ export default {
 
 - Type: `string[] | '*'`
 - Default: `[]`
-- Details: A list of sources files that script execution is enabled. Use `'*'` to allow all source files.
+- Details: Only effective when `DANGEROUS_ALLOW_SCRIPT_EXECUTION` is enabled. A list of file paths allowed to execute chart scripts. Use `'*'` to allow all files.

docs/zh/plugins/markdown/markdown-chart/README.md

@@ -135,4 +135,4 @@ export default {
 
 - 类型：`string[] | '*'`
 - 默认：`[]`
-- 详情：当启用脚本执行时，允许脚本运行的源文件列表。使用 `'*'` 允许所有源文件。
+- 详情：当启用脚本执行时，允许执行图表脚本的文件路径列表。使用 `'*'` 允许所有文件。

plugins/markdown/plugin-markdown-chart/src/client/components/ECharts.ts

@@ -1,7 +1,7 @@
 import { LoadingIcon, decodeData } from '@vuepress/helper/client'
 import { useDebounceFn, useEventListener } from '@vueuse/core'
 import type { EChartsOption, EChartsType } from 'echarts'
-import type * as Echarts from 'echarts'
+import type * as ECharts from 'echarts'
 import type { PropType, VNode } from 'vue'
 import {
   defineComponent,
@@ -30,7 +30,7 @@ const AsyncFunction = (async (): Promise<void> => {}).constructor
 const parseEChartsConfig = (
   config: string,
   type: 'js' | 'json',
-  echarts: typeof Echarts,
+  echarts: typeof ECharts,
   instance: EChartsType,
 ): Promise<EChartsConfig> => {
   if (type === 'js') {
@@ -102,12 +102,12 @@ export default defineComponent({
       }, 100),
     )
 
-    const destroyEcharts = (): void => {
+    const destroyECharts = (): void => {
       instance?.dispose()
       instance = null
     }
 
-    const renderEcharts = async (): Promise<void> => {
+    const renderECharts = async (): Promise<void> => {
       if (__VUEPRESS_SSR__) return
 
       const echarts = await import(/* webpackChunkName: "echarts" */ 'echarts')
@@ -129,7 +129,7 @@ export default defineComponent({
 
     onContentUpdated(async (reason) => {
       if (reason === 'mounted') {
-        await renderEcharts()
+        await renderECharts()
         loaded.value = true
       }
     })
@@ -141,15 +141,15 @@ export default defineComponent({
       watch(
         () => props.config,
         async () => {
-          destroyEcharts()
+          destroyECharts()
           await nextTick()
-          await renderEcharts()
+          await renderECharts()
         },
         { flush: 'post' },
       )
     })
 
-    onUnmounted(destroyEcharts)
+    onUnmounted(destroyECharts)
 
     return (): (VNode | null)[] => [
       props.title

plugins/markdown/plugin-markdown-chart/src/node/markdown-it-plugins/chartjs.ts

@@ -36,7 +36,7 @@ export const chartjs: PluginWithOptions<ChartJSPluginOptions> = (
   md,
   options,
 ) => {
-  const { allowScripts, allowAll, allowList = new Set() } = options!
+  const { allowScripts, allowAll, allowList = new Set() } = options ?? {}
 
   container(md, {
     name: 'chartjs',
@@ -62,8 +62,8 @@ export const chartjs: PluginWithOptions<ChartJSPluginOptions> = (
             // eslint-disable-next-line no-console
             console.warn(
               `\
-${colors.magenta('chartjs')}: JavaScript in echarts block is found in ${colors.cyan(filePathRelative)}, ${colors.red("it's ignored for security reasons")}.
-To enable the chart, you must manually add it to allowlist, see https://vuepress.vuejs.org/plugin/markdown/markdown-charts/echarts.html for details.
+${colors.magenta('chartjs')}: JavaScript in Chart.js block is found in ${colors.cyan(filePathRelative)}, ${colors.red('it is ignored for security reasons')}.
+To enable the chart, you must manually add it to allowlist, see https://vuepress.vuejs.org/plugin/markdown/markdown-charts/chartjs.html for details.
 `,
             )
             tokens[i].hidden = true
@@ -94,8 +94,8 @@ To enable the chart, you must manually add it to allowlist, see https://vuepress
         return ''
       }
 
-      return `<ChartJS config="${config}" ${
-        title ? `title="${encodeURIComponent(title)}" ` : ''
+      return `<ChartJS config="${config}"${
+        title ? ` title="${encodeURIComponent(title)}"` : ''
       }${isJavaScript ? ' type="js"' : ''}>`
     },
     closeRender: (tokens, index) => (tokens[index].hidden ? '' : '</ChartJS>'),

plugins/markdown/plugin-markdown-chart/src/node/markdown-it-plugins/echarts.ts

@@ -24,16 +24,16 @@ export interface EChartsPluginOptions {
   allowScripts?: boolean
 
   /**
-   * Allow all scripts to be executed inside Echarts blocks.
-   * 允许在 Echarts 块内执行所有脚本。
+   * Allow all scripts to be executed inside ECharts blocks.
+   * 允许在 ECharts 块内执行所有脚本。
    *
    * @default false
    */
   allowAll?: boolean
 
   /**
-   * List of files allowed to execute scripts inside Echarts blocks.
-   * 允许在 Echarts 块内执行脚本的文件列表。
+   * List of files allowed to execute scripts inside ECharts blocks.
+   * 允许在 ECharts 块内执行脚本的文件列表。
    */
   allowList?: Set<string>
 }
@@ -47,7 +47,7 @@ export const echarts: PluginWithOptions<EChartsPluginOptions> = (
   md,
   options,
 ) => {
-  const { allowScripts, allowAll, allowList = new Set() } = options!
+  const { allowScripts, allowAll, allowList = new Set() } = options ?? {}
 
   // Handle ```echarts blocks
   const { fence } = md.renderer.rules
@@ -89,8 +89,8 @@ export const echarts: PluginWithOptions<EChartsPluginOptions> = (
             // eslint-disable-next-line no-console
             console.warn(
               `\
-${colors.magenta('[echarts]')}: JavaScript in echarts block is found in ${colors.cyan(filePathRelative)}, ${colors.red("it's ignored for security reasons")}.
-To enable the chart, you must manually add it to allowlist, see https://vuepress.vuejs.org/plugin/markdown/markdown-charts/echarts.html for details.
+${colors.magenta('[echarts]')}: JavaScript in echarts block is found in ${colors.cyan(filePathRelative)}, ${colors.red('it is ignored for security reasons')}.
+To enable the chart, you must manually add it to allowlist, see https://vuepress.vuejs.org/plugin/markdown/markdown-chart/echarts.html for details.
 `,
             )
             tokens[i].hidden = true

plugins/markdown/plugin-markdown-chart/tests/node/__snapshots__/chartjs.spec.ts.snap

@@ -8,8 +8,8 @@ exports[`chartjs > Should not break markdown fence 1`] = `
 
 exports[`chartjs > Should resolve chart info with javascript block 1`] = `"<ChartJS config="eJyNUsFOwzAMve8rrHABKUJLSwcr4gAcOII4gGDikK5eqYiaKU2FJrR/x0nXbi0tYKmJXb+85xdlqYvSAq2rPIMr+JoA2M0aY2CJNIxTmUorY98AUDJBVcawYI+YMg7sRlXo9hdUSn+67M4gFi55qMxa+ea9kUWG7M2x1XwlWsfia9hxt/ykfQR6BU/aYulHqKMeZCECDmLOIeQQcaAi3BG7SOTyIzO6KtJbrbTZa7hgJkvkcRDRsTkRiJAOT0+DkwONBhSdUX9G/SAk9AjIMwXTGYcL+kZA54QRcz/zuJyIyI2YOj3H+ZueiGj0GY3XAx1egjYpmn9egPjb/iCka34Q0rU+COkZH1dqbXcgP0w/56l9j0E0/7d14nE+12ub05NvHnS5lArbCmCzT4kSs7y4tq9odAzWVNhj9Rst28vJNwOzs7M=" title="A%20bar%20chart" type="js"></ChartJS>"`;
 
-exports[`chartjs > Should resolve chart with empty title and body 1`] = `"<ChartJS config="{}" type=""></ChartJS>"`;
+exports[`chartjs > Should resolve chart with empty title and body 1`] = `"<ChartJS config="{}"></ChartJS>"`;
 
 exports[`chartjs > Should resolve chartjs info with js block 1`] = `"<ChartJS config="eJyNUsFOwzAMve8rrHABKUJLSwcr4gAcOII4gGDikK5eqYiaKU2FJrR/x0nXbi0tYKmJXb+85xdlqYvSAq2rPIMr+JoA2M0aY2CJNIxTmUorY98AUDJBVcawYI+YMg7sRlXo9hdUSn+67M4gFi55qMxa+ea9kUWG7M2x1XwlWsfia9hxt/ykfQR6BU/aYulHqKMeZCECDmLOIeQQcaAi3BG7SOTyIzO6KtJbrbTZa7hgJkvkcRDRsTkRiJAOT0+DkwONBhSdUX9G/SAk9AjIMwXTGYcL+kZA54QRcz/zuJyIyI2YOj3H+ZueiGj0GY3XAx1egjYpmn9egPjb/iCka34Q0rU+COkZH1dqbXcgP0w/56l9j0E0/7d14nE+12ub05NvHnS5lArbCmCzT4kSs7y4tq9odAzWVNhj9Rst28vJNwOzs7M=" title="A%20bar%20chart" type="js"></ChartJS>"`;
 
-exports[`chartjs > Should resolve chartjs info with json block 1`] = `"<ChartJS config="eJyNUj1PwzAQ3fsrLLOAZKE6IYGwAQMjiAEEVQenOUKEFUeOI1Sh/HfuLLckKCkd/HH3nt/ds+57wRh32wb4NeO5slxQolBOYYJAjLTKQbcYr/gTFFwwfqs7oPMVtDZfdLu3ADVdHjvbaA8+WFWXwNekGDRbcF7HZ1jQ/61BPZww886ejYPWtxLg0NBKRoLJTLBYsEQwDOIg71m52nyW1nR1cWe0sYNKHrZlrk6jBB9mKCFjfL48j84GdXak5ALxFPEoRvYMyStFy1SwK1wzpEvkyMx3PV9OJuhHLqkeaR6qJxNsPcX2PGnPGf2CsQXYY39A/u9/kjJ2P0kZe5+k/HE+X2nvGykHXL9UhftA1zIAvT/XuPd+sE3jKlPTDIbZbjdK46jtYsxsBwHpQlnVN+4NrEHA2Q5G0rT3i37xA75CsCY=" title="A%20bar%20chart" type="json"></ChartJS>"`;
+exports[`chartjs > Should resolve chartjs info with json block 1`] = `"<ChartJS config="eJyNUj1PwzAQ3fsrLLOAZKE6IYGwAQMjiAEEVQenOUKEFUeOI1Sh/HfuLLckKCkd/HH3nt/ds+57wRh32wb4NeO5slxQolBOYYJAjLTKQbcYr/gTFFwwfqs7oPMVtDZfdLu3ADVdHjvbaA8+WFWXwNekGDRbcF7HZ1jQ/61BPZww886ejYPWtxLg0NBKRoLJTLBYsEQwDOIg71m52nyW1nR1cWe0sYNKHrZlrk6jBB9mKCFjfL48j84GdXak5ALxFPEoRvYMyStFy1SwK1wzpEvkyMx3PV9OJuhHLqkeaR6qJxNsPcX2PGnPGf2CsQXYY39A/u9/kjJ2P0kZe5+k/HE+X2nvGykHXL9UhftA1zIAvT/XuPd+sE3jKlPTDIbZbjdK46jtYsxsBwHpQlnVN+4NrEHA2Q5G0rT3i37xA75CsCY=" title="A%20bar%20chart"></ChartJS>"`;

plugins/markdown/plugin-markdown-chart/tests/node/chartjs.spec.ts

@@ -4,7 +4,10 @@ import { describe, expect, it } from 'vitest'
 import { chartjs } from '../../src/node/markdown-it-plugins/chartjs.js'
 
 describe('chartjs', () => {
-  const markdownIt = MarkdownIt({ linkify: true }).use(chartjs)
+  const markdownIt = MarkdownIt({ linkify: true }).use(chartjs, {
+    allowScripts: true,
+    allowAll: true,
+  })
 
   it('Should resolve chartjs info with json block', () => {
     const result = markdownIt.render(
@@ -57,7 +60,7 @@ describe('chartjs', () => {
 
     expect(result).toMatch(/<ChartJS.*><\/ChartJS>/)
     expect(result).toContain(`title="${encodeURIComponent('A bar chart')}"`)
-    expect(result).toContain('type="json"')
+    expect(result).not.toContain('type="')
     expect(result).toMatchSnapshot()
   })
 
@@ -183,7 +186,7 @@ const config = {
 
     expect(result).toMatch(/<ChartJS.*><\/ChartJS>/)
     expect(result).not.toContain('title="')
-    expect(result).toContain('type=""')
+    expect(result).not.toContain('type="')
     expect(result).toMatchSnapshot()
   })
 
@@ -200,4 +203,58 @@ const a = 1;
     expect(result).toMatch(/<pre.*>[\s\S]*<\/pre>/)
     expect(result).toMatchSnapshot()
   })
+
+  it('Should remove unsafe script block by default', () => {
+    const md = MarkdownIt({ linkify: true }).use(chartjs)
+
+    const result = md.render(
+      `
+::: chartjs A bar chart
+
+\`\`\`js
+const config = {
+  type: "bar",
+  data: {
+    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+    datasets: [
+      {
+        label: "# of Votes",
+        data: [12, 19, 3, 5, 2, 3],
+        backgroundColor: [
+          "rgba(255, 99, 132, 0.2)",
+          "rgba(54, 162, 235, 0.2)",
+          "rgba(255, 206, 86, 0.2)",
+          "rgba(75, 192, 192, 0.2)",
+          "rgba(153, 102, 255, 0.2)",
+          "rgba(255, 159, 64, 0.2)",
+        ],
+        borderColor: [
+          "rgba(255, 99, 132, 1)",
+          "rgba(54, 162, 235, 1)",
+          "rgba(255, 206, 86, 1)",
+          "rgba(75, 192, 192, 1)",
+          "rgba(153, 102, 255, 1)",
+          "rgba(255, 159, 64, 1)",
+        ],
+        borderWidth: 1,
+      },
+    ],
+  },
+  options: {
+    scales: {
+      y: {
+        beginAtZero: true,
+      },
+    },
+  },
+};
+\`\`\`
+
+:::
+`,
+      {},
+    )
+
+    expect(result).toMatch('')
+  })
 })

plugins/markdown/plugin-markdown-chart/tests/node/echarts.spec.ts

@@ -4,7 +4,10 @@ import { describe, expect, it } from 'vitest'
 import { echarts } from '../../src/node/markdown-it-plugins/echarts.js'
 
 describe('echarts', () => {
-  const markdownIt = MarkdownIt({ linkify: true }).use(echarts)
+  const markdownIt = MarkdownIt({ linkify: true }).use(echarts, {
+    allowScripts: true,
+    allowAll: true,
+  })
 
   it('Should resolve echarts container with json block', () => {
     const result = markdownIt.render(
@@ -182,4 +185,40 @@ const a = 1;
     expect(result).toMatch(/<pre.*>[\s\S]*<\/pre>/)
     expect(result).toMatchSnapshot()
   })
+
+  it('Should remove unsafe script block by default', () => {
+    const md = MarkdownIt({ linkify: true }).use(echarts)
+
+    const result = md.render(
+      `
+::: echarts A bar chart
+
+\`\`\`js
+const option = {
+  xAxis: {
+    type: "category",
+    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+  },
+  yAxis: {
+    type: "value",
+  },
+  series: [
+    {
+      data: [150, 230, 224, 218, 135, 147, 260],
+      type: "line",
+    },
+  ],
+  tooltip: {
+    trigger: "axis",
+  },
+};
+\`\`\`
+
+:::
+`,
+      {},
+    )
+
+    expect(result).toMatch('')
+  })
 })