mirror of
https://github.com/n8n-io/n8n.git
synced 2024-12-25 04:34:06 -08:00
fix(editor): Fix xss issues in toast usages (#10733)
This commit is contained in:
parent
4e89912588
commit
6df6f5f8df
16
packages/editor-ui/src/components/AiUpdatedCodeMessage.vue
Normal file
16
packages/editor-ui/src/components/AiUpdatedCodeMessage.vue
Normal file
|
@ -0,0 +1,16 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
const i18n = useI18n();
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
nodeName: string;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{ i18n.baseText('aiAssistant.codeUpdated.message.body1') }}
|
||||||
|
<a data-action="openNodeDetail" :data-action-parameter-node="nodeName">{{ nodeName }}</a>
|
||||||
|
{{ i18n.baseText('aiAssistant.codeUpdated.message.body2') }}
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,18 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
const i18n = useI18n();
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
nodeName: string;
|
||||||
|
errorMessage?: string;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{ errorMessage }}<br />
|
||||||
|
<a data-action="openNodeDetail" :data-action-parameter-node="nodeName">{{
|
||||||
|
i18n.baseText('node.executionError.openNode')
|
||||||
|
}}</a>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useI18n } from '@/composables/useI18n';
|
||||||
|
const i18n = useI18n();
|
||||||
|
|
||||||
|
defineProps<{
|
||||||
|
message: string;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
{{
|
||||||
|
i18n.baseText(
|
||||||
|
'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
<br /><i>{{ message }}</i>
|
||||||
|
</div>
|
||||||
|
</template>
|
|
@ -3,10 +3,12 @@ import { useToast } from '@/composables/useToast';
|
||||||
import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
|
import { useWorkflowActivate } from '@/composables/useWorkflowActivate';
|
||||||
import { useWorkflowsStore } from '@/stores/workflows.store';
|
import { useWorkflowsStore } from '@/stores/workflows.store';
|
||||||
import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
|
import { getActivatableTriggerNodes } from '@/utils/nodeTypesUtils';
|
||||||
import { computed } from 'vue';
|
import type { VNode } from 'vue';
|
||||||
|
import { computed, h } from 'vue';
|
||||||
import { useI18n } from '@/composables/useI18n';
|
import { useI18n } from '@/composables/useI18n';
|
||||||
import type { PermissionsRecord } from '@/permissions';
|
import type { PermissionsRecord } from '@/permissions';
|
||||||
import { PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
|
import { PLACEHOLDER_EMPTY_WORKFLOW_ID } from '@/constants';
|
||||||
|
import WorkflowActivationErrorMessage from './WorkflowActivationErrorMessage.vue';
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = defineProps<{
|
||||||
workflowActive: boolean;
|
workflowActive: boolean;
|
||||||
|
@ -61,7 +63,7 @@ async function activeChanged(newActiveState: boolean) {
|
||||||
}
|
}
|
||||||
|
|
||||||
async function displayActivationError() {
|
async function displayActivationError() {
|
||||||
let errorMessage: string;
|
let errorMessage: string | VNode;
|
||||||
try {
|
try {
|
||||||
const errorData = await workflowsStore.getActivationError(props.workflowId);
|
const errorData = await workflowsStore.getActivationError(props.workflowId);
|
||||||
|
|
||||||
|
@ -70,10 +72,9 @@ async function displayActivationError() {
|
||||||
'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
|
'workflowActivator.showMessage.displayActivationError.message.errorDataUndefined',
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
errorMessage = i18n.baseText(
|
errorMessage = h(WorkflowActivationErrorMessage, {
|
||||||
'workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined',
|
message: errorData,
|
||||||
{ interpolate: { message: errorData } },
|
});
|
||||||
);
|
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
errorMessage = i18n.baseText(
|
errorMessage = i18n.baseText(
|
||||||
|
@ -86,7 +87,6 @@ async function displayActivationError() {
|
||||||
message: errorMessage,
|
message: errorMessage,
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
duration: 0,
|
duration: 0,
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
@ -32,7 +32,7 @@ import { useNodeTypesStore } from '@/stores/nodeTypes.store';
|
||||||
import { useCredentialsStore } from '@/stores/credentials.store';
|
import { useCredentialsStore } from '@/stores/credentials.store';
|
||||||
import { useSettingsStore } from '@/stores/settings.store';
|
import { useSettingsStore } from '@/stores/settings.store';
|
||||||
import { parse } from 'flatted';
|
import { parse } from 'flatted';
|
||||||
import { ref } from 'vue';
|
import { h, ref } from 'vue';
|
||||||
import { useOrchestrationStore } from '@/stores/orchestration.store';
|
import { useOrchestrationStore } from '@/stores/orchestration.store';
|
||||||
import { usePushConnectionStore } from '@/stores/pushConnection.store';
|
import { usePushConnectionStore } from '@/stores/pushConnection.store';
|
||||||
import { useExternalHooks } from '@/composables/useExternalHooks';
|
import { useExternalHooks } from '@/composables/useExternalHooks';
|
||||||
|
@ -42,6 +42,7 @@ import { useI18n } from '@/composables/useI18n';
|
||||||
import { useTelemetry } from '@/composables/useTelemetry';
|
import { useTelemetry } from '@/composables/useTelemetry';
|
||||||
import type { PushMessageQueueItem } from '@/types';
|
import type { PushMessageQueueItem } from '@/types';
|
||||||
import { useAssistantStore } from '@/stores/assistant.store';
|
import { useAssistantStore } from '@/stores/assistant.store';
|
||||||
|
import NodeExecutionErrorMessage from '@/components/NodeExecutionErrorMessage.vue';
|
||||||
|
|
||||||
export function usePushConnection({ router }: { router: ReturnType<typeof useRouter> }) {
|
export function usePushConnection({ router }: { router: ReturnType<typeof useRouter> }) {
|
||||||
const workflowHelpers = useWorkflowHelpers({ router });
|
const workflowHelpers = useWorkflowHelpers({ router });
|
||||||
|
@ -407,16 +408,12 @@ export function usePushConnection({ router }: { router: ReturnType<typeof useRou
|
||||||
|
|
||||||
toast.showMessage({
|
toast.showMessage({
|
||||||
title,
|
title,
|
||||||
message:
|
message: h(NodeExecutionErrorMessage, {
|
||||||
(nodeError?.description ?? runDataExecutedErrorMessage) +
|
errorMessage: nodeError?.description ?? runDataExecutedErrorMessage,
|
||||||
i18n.baseText('pushConnection.executionError.openNode', {
|
nodeName: nodeError.node.name,
|
||||||
interpolate: {
|
}),
|
||||||
node: nodeError.node.name,
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
type: 'error',
|
type: 'error',
|
||||||
duration: 0,
|
duration: 0,
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
let title: string;
|
let title: string;
|
||||||
|
|
|
@ -146,7 +146,8 @@
|
||||||
"aiAssistant.newSessionModal.confirm": "Start new session",
|
"aiAssistant.newSessionModal.confirm": "Start new session",
|
||||||
"aiAssistant.serviceError.message": "Unable to connect to n8n's AI service",
|
"aiAssistant.serviceError.message": "Unable to connect to n8n's AI service",
|
||||||
"aiAssistant.codeUpdated.message.title": "Assistant modified workflow",
|
"aiAssistant.codeUpdated.message.title": "Assistant modified workflow",
|
||||||
"aiAssistant.codeUpdated.message.body": "Open the <a data-action='openNodeDetail' data-action-parameter-node='{nodeName}'>{nodeName}</a> node to see the changes",
|
"aiAssistant.codeUpdated.message.body1": "Open the",
|
||||||
|
"aiAssistant.codeUpdated.message.body2": "node to see the changes",
|
||||||
"aiAssistant.thinkingSteps.analyzingError": "Analyzing the error...",
|
"aiAssistant.thinkingSteps.analyzingError": "Analyzing the error...",
|
||||||
"aiAssistant.thinkingSteps.thinking": "Thinking...",
|
"aiAssistant.thinkingSteps.thinking": "Thinking...",
|
||||||
"banners.confirmEmail.message.1": "To secure your account and prevent future access issues, please confirm your",
|
"banners.confirmEmail.message.1": "To secure your account and prevent future access issues, please confirm your",
|
||||||
|
@ -1002,6 +1003,7 @@
|
||||||
"node.waitingForYouToCreateAnEventIn": "Waiting for you to create an event in {nodeType}",
|
"node.waitingForYouToCreateAnEventIn": "Waiting for you to create an event in {nodeType}",
|
||||||
"node.discovery.pinData.canvas": "You can pin this output instead of waiting for a test event. Open node to do so.",
|
"node.discovery.pinData.canvas": "You can pin this output instead of waiting for a test event. Open node to do so.",
|
||||||
"node.discovery.pinData.ndv": "You can pin this output instead of waiting for a test event.",
|
"node.discovery.pinData.ndv": "You can pin this output instead of waiting for a test event.",
|
||||||
|
"node.executionError.openNode": "Open node",
|
||||||
"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node \n or drag to connect",
|
"nodeBase.clickToAddNodeOrDragToConnect": "Click to add node \n or drag to connect",
|
||||||
"nodeCreator.actionsPlaceholderNode.scheduleTrigger": "On a Schedule",
|
"nodeCreator.actionsPlaceholderNode.scheduleTrigger": "On a Schedule",
|
||||||
"nodeCreator.actionsPlaceholderNode.webhook": "On a Webhook call",
|
"nodeCreator.actionsPlaceholderNode.webhook": "On a Webhook call",
|
||||||
|
@ -2016,7 +2018,6 @@
|
||||||
"nodeIssues.credentials.notIdentified": "Credentials with name {name} exist for {type}.",
|
"nodeIssues.credentials.notIdentified": "Credentials with name {name} exist for {type}.",
|
||||||
"nodeIssues.credentials.notIdentified.hint": "Credentials are not clearly identified. Please select the correct credentials.",
|
"nodeIssues.credentials.notIdentified.hint": "Credentials are not clearly identified. Please select the correct credentials.",
|
||||||
"nodeIssues.input.missing": "No node connected to required input \"{inputName}\"",
|
"nodeIssues.input.missing": "No node connected to required input \"{inputName}\"",
|
||||||
"nodeIssues.input.missingSubNode": "On the canvas, <a data-action='openSelectiveNodeCreator' data-action-parameter-connectiontype='{inputType}' data-action-parameter-node='{node}'>add a ‘{inputName}’</a> connected to the ‘{node}’ node ",
|
|
||||||
"ndv.trigger.moreInfo": "More info",
|
"ndv.trigger.moreInfo": "More info",
|
||||||
"ndv.trigger.copiedTestUrl": "Test URL copied to clipboard",
|
"ndv.trigger.copiedTestUrl": "Test URL copied to clipboard",
|
||||||
"ndv.trigger.webhookBasedNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then every time there's a matching event in {service}, the workflow will execute. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",
|
"ndv.trigger.webhookBasedNode.executionsHelp.inactive": "<b>While building your workflow</b>, click the 'listen' button, then go to {service} and make an event happen. This will trigger an execution, which will show up in this editor.<br /> <br /> <b>Once you're happy with your workflow</b>, <a data-key=\"activate\">activate</a> it. Then every time there's a matching event in {service}, the workflow will execute. These executions will show up in the <a data-key=\"executions\">executions list</a>, but not in the editor.",
|
||||||
|
@ -2070,7 +2071,7 @@
|
||||||
"workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message": "Please save it before activating",
|
"workflowActivator.showMessage.activeChangedWorkflowIdUndefined.message": "Please save it before activating",
|
||||||
"workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title": "Problem activating workflow",
|
"workflowActivator.showMessage.activeChangedWorkflowIdUndefined.title": "Problem activating workflow",
|
||||||
"workflowActivator.showMessage.displayActivationError.message.catchBlock": "Sorry there was a problem requesting the error",
|
"workflowActivator.showMessage.displayActivationError.message.catchBlock": "Sorry there was a problem requesting the error",
|
||||||
"workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined": "The following error occurred on workflow activation:<br /><i>{message}</i>",
|
"workflowActivator.showMessage.displayActivationError.message.errorDataNotUndefined": "The following error occurred on workflow activation:",
|
||||||
"workflowActivator.showMessage.displayActivationError.message.errorDataUndefined": "Unknown error",
|
"workflowActivator.showMessage.displayActivationError.message.errorDataUndefined": "Unknown error",
|
||||||
"workflowActivator.showMessage.displayActivationError.title": "Problem activating workflow",
|
"workflowActivator.showMessage.displayActivationError.title": "Problem activating workflow",
|
||||||
"workflowActivator.theWorkflowIsSetToBeActiveBut": "The workflow is activated but could not be started.<br />Click to display error message.",
|
"workflowActivator.theWorkflowIsSetToBeActiveBut": "The workflow is activated but could not be started.<br />Click to display error message.",
|
||||||
|
|
|
@ -9,7 +9,7 @@ import {
|
||||||
import type { ChatRequest } from '@/types/assistant.types';
|
import type { ChatRequest } from '@/types/assistant.types';
|
||||||
import type { ChatUI } from 'n8n-design-system/types/assistant';
|
import type { ChatUI } from 'n8n-design-system/types/assistant';
|
||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import { computed, ref, watch } from 'vue';
|
import { computed, h, ref, watch } from 'vue';
|
||||||
import { useRootStore } from './root.store';
|
import { useRootStore } from './root.store';
|
||||||
import { useUsersStore } from './users.store';
|
import { useUsersStore } from './users.store';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
@ -34,6 +34,7 @@ import { useI18n } from '@/composables/useI18n';
|
||||||
import { useTelemetry } from '@/composables/useTelemetry';
|
import { useTelemetry } from '@/composables/useTelemetry';
|
||||||
import { useToast } from '@/composables/useToast';
|
import { useToast } from '@/composables/useToast';
|
||||||
import { useUIStore } from './ui.store';
|
import { useUIStore } from './ui.store';
|
||||||
|
import AiUpdatedCodeMessage from '@/components/AiUpdatedCodeMessage.vue';
|
||||||
|
|
||||||
export const MAX_CHAT_WIDTH = 425;
|
export const MAX_CHAT_WIDTH = 425;
|
||||||
export const MIN_CHAT_WIDTH = 250;
|
export const MIN_CHAT_WIDTH = 250;
|
||||||
|
@ -576,7 +577,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
|
||||||
|
|
||||||
codeDiffMessage.replaced = true;
|
codeDiffMessage.replaced = true;
|
||||||
codeNodeEditorEventBus.emit('codeDiffApplied');
|
codeNodeEditorEventBus.emit('codeDiffApplied');
|
||||||
checkIfNodeNDVIsOpen(activeNode.name);
|
showCodeUpdateToastIfNeeded(activeNode.name);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
codeDiffMessage.error = true;
|
codeDiffMessage.error = true;
|
||||||
|
@ -609,7 +610,7 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
|
||||||
|
|
||||||
codeDiffMessage.replaced = false;
|
codeDiffMessage.replaced = false;
|
||||||
codeNodeEditorEventBus.emit('codeDiffApplied');
|
codeNodeEditorEventBus.emit('codeDiffApplied');
|
||||||
checkIfNodeNDVIsOpen(activeNode.name);
|
showCodeUpdateToastIfNeeded(activeNode.name);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error(e);
|
console.error(e);
|
||||||
codeDiffMessage.error = true;
|
codeDiffMessage.error = true;
|
||||||
|
@ -617,15 +618,14 @@ export const useAssistantStore = defineStore(STORES.ASSISTANT, () => {
|
||||||
codeDiffMessage.replacing = false;
|
codeDiffMessage.replacing = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkIfNodeNDVIsOpen(errorNodeName: string) {
|
function showCodeUpdateToastIfNeeded(errorNodeName: string) {
|
||||||
if (errorNodeName !== ndvStore.activeNodeName) {
|
if (errorNodeName !== ndvStore.activeNodeName) {
|
||||||
useToast().showMessage({
|
useToast().showMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
title: locale.baseText('aiAssistant.codeUpdated.message.title'),
|
title: locale.baseText('aiAssistant.codeUpdated.message.title'),
|
||||||
message: locale.baseText('aiAssistant.codeUpdated.message.body', {
|
message: h(AiUpdatedCodeMessage, {
|
||||||
interpolate: { nodeName: errorNodeName },
|
nodeName: errorNodeName,
|
||||||
}),
|
}),
|
||||||
dangerouslyUseHTMLString: true,
|
|
||||||
duration: 4000,
|
duration: 4000,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue