Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove IE11 support for v-html SVGs when IE support is not needed #11787

Open
blimmer opened this issue Nov 23, 2020 · 8 comments · May be fixed by #11790
Open

Remove IE11 support for v-html SVGs when IE support is not needed #11787

blimmer opened this issue Nov 23, 2020 · 8 comments · May be fixed by #11790

Comments

@blimmer
Copy link

blimmer commented Nov 23, 2020

What problem does this feature solve?

I'm a developer working on a browser extension that uses Vue.js. I'm currently working on porting my extension over to Firefox. Mozilla has an automated validation process that determines whether or not your extension requires manual review before the extension is released to users.

One issue I'm running into is that the Vue runtime bundle includes assignment to innerHTML (src), which generates this warning:

Screen Shot 2020-11-23 at 10 32 47 AM

From what I can tell from the code comment and the PR where this logic was added, it's only there for IE11 support.

It would be nice if there were a way for us to opt-out of this behavior since our browser extension doesn't support IE11. What I mean by "opt-out" is that the innerHTML assignment would not be included in the vue-cli-service build output.

What does the proposed API look like?

Ideally, this switch could be based on the browsers we have configured in our .browserslistrc. We currently only support the last 5 versions of Firefox and Chrome, so we don't need any IE11 fallbacks. Though, I'm not sure if any introspection/updating of the Vue distfiles are done at build-time, so that might be a challenge.

@posva
Copy link
Member

posva commented Nov 23, 2020

Would changing that line with svgContainer[key] bypass the warning? Can you try editing the final bundle?

@blimmer
Copy link
Author

blimmer commented Nov 23, 2020

Clever! Indeed, it does not appear as a warning if I change the line in my bundle from

(ri = ri || document.createElement('div')), (ri.innerHTML = '<svg>' + r + '</svg>');

to

(ri = ri || document.createElement('div')), (ri['innerHTML'] = '<svg>' + r + '</svg>');

@sirlancelot
Copy link

I think changing the access to svgContainer["innerHTML"] in Vue's source won't work in the long run though because minifiers will rewrite that expression to a.innerHTML anyway.

@posva posva linked a pull request Nov 24, 2020 that will close this issue
13 tasks
@posva
Copy link
Member

posva commented Nov 24, 2020

Is this warning blocking for extensions or not? @blimmer

@Justineo
Copy link
Member

According to my own experience of maintaining a Firefox add-on, the warning will not block the submission process. There are many add-ons relying on jQuery or other 3rd party libs, you can clarify the situation in your comments to reviewers and this should be fine. I don't think it's necessary to handle this in Vue's source code.

@blimmer
Copy link
Author

blimmer commented Nov 30, 2020

I haven't submitted the extension yet, so I'm not 100% sure. Similar to what @Justineo was saying, I think it won't block me for submitting, though it does flag the extension to send it through the review process which slows things down.

Vue is certainly not alone in this, I've also filed an issue with lodash for another warning: lodash/lodash#4985

@Justineo
Copy link
Member

The use of innerHTML is required in Vue, not only in this case but also core features like VDOM patching. I don't think it makes sense to bypass the code check when the code itself needs further review. We shouldn't pretend it doesn't exist.

@blimmer
Copy link
Author

blimmer commented Nov 30, 2020

The VDOM patching link above is reading from innerHTML, not assigning it. The warning is only generated when assigning innerHTML. With Vue's runtime version, the linked code is the only place Vue is assigning innerHTML (from what I can tell from the lint output).

I don't think this is a huge deal necessarily, but it would be nice not to trigger Mozilla review since we don't support IE11.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants