vue js - HTML injection from plain text into a vue component

Question

I'm working on migrating some code from ASPX to VUE.JS

In the previous system exists the functionality that gets the plain text and injected into the HTML (Like messages with text, images, links, and inputs). In VUE the injected HTML doesn't work fine...

I created a demo with the root problem.

CodeSandbox Exercise

Where basically we want to inject HTML into a VUE component like HTML... and works. But inside the plain HTML also it's included JS code.

This is a flow of the problem:

Some suggestions on how to work around this problem? The plain text could have different JS functions (could be more than 50 different scenarios)

Walter Woshid · Accepted Answer · 2021-06-19 00:32:11Z

1

Javascript is not being executed with injected code like that. You can test that by writing console.log('test') into the <script> tag.

To solve this problem you can include this little regex function after your replace function, which evaluates every script tag.

codeBlock.match(/(?<=<script>).*?(?=<\/script>)/gms).forEach(function (match) {
  window.eval(match);
});

Here is also a forked version of your demo with the fix: https://codesandbox.io/s/vue-injection-problem-forked-wigzr?file=/src/components/HelloWorld.vue

answered Jun 19, 2021 at 0:32

Walter Woshid

3491 gold badge3 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MiBol Over a year ago

Looks like the regular expression has some problems the solution not work properly

Walter Woshid · Accepted Answer · 2021-06-19 00:37:39Z

1

A better solution would be to use document.write(codeBlock); after your replace function.

https://codesandbox.io/s/vue-injection-problem-forked-rsmh8?file=/src/components/HelloWorld.vue:1186-1212

answered Jun 19, 2021 at 0:37

Walter Woshid

3491 gold badge3 silver badges11 bronze badges

Collectives™ on Stack Overflow

vue js - HTML injection from plain text into a vue component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related