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
Vue should not cause execution of content within <noscript> tags #9669
Comments
It's not that Vue processes the content, the browser seems to fire the requests with const noscript = document.createElement('noscript')
const img = document.createElement('img')
img.setAttribute('src', "https://images.unsplash.com/photo-1552084007-76f5feb8d22a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60")
noscript.appendChild(img)
window.app.appendChild(noscript) I think we could avoid rendering |
Sorry processing was probably the wrong word :) I could just see Vue was causing them to run. I’ll try out the v-pre you’ve mentioned as well to see what that affects, thanks for the tip :) I’m a little confused with your code snippet, what is that trying to demonstrate? - the noscript itself is just in a PHP template for something else, however because the page wrapper is what the “new Vue ( el = #app )” Vue starts to work it’s magic which causes this side effect |
The code is showing the problem without Vue |
Ah okay - do you think this is something Vue could handle? As if it works with v-if and v-pre then would suggest it can handle it without side effects? |
It seems anti-intuitive (or an invalid use case) for |
@tony19 - that’s “sort” of my point. The noscript itself isn’t added through JS it just happens to be in the server side page source |
What he's saying is that you are adding it through Vue by feeding it to Vue, which adds dynamically content. I get the usecase though, it's added in case there is no JS (Vue doesn't run) but if Vue runs you want it to be ignored the same way it is ignored upon first rendering |
Just add the <noscript inline-template>
<img src="//something.jpg">
</noscript> |
@Antoine-Demailly We've already established that there's several "hacks" to work around this issue, but that's not the point. The solution should either be
@posva - The |
yeah, i said combine it to v-if to prevent vue from running inside, it's a performance improvement. Rendering wasn't the right word, interpreting maybe? Anyway, you can check it out in vue docs |
Version
2.6.8
Reproduction link
https://jsfiddle.net/ncwuvekm/1/
Steps to reproduce
Check the "network" tab.
You can see that Vue causes a request to the content within the
<noscript>
What is expected?
Vue should not cause execution of
<noscript>
contentWhat is actually happening?
Vue causes requests to elements within
<noscript>
It's typical when websites are using Vue to supplement UI and a common pattern is to wrap the site with an
id="app"
However, this introduces a problem when people are using
<noscript>
in various areas of the site that are not within Vue components as Vue will execute it regardless.A use case example would be using a lazy loading library with a
<noscript>
fallback.Vue will cause the
hi-resolution.jpg
image to download even though it's within the<noscript>
The text was updated successfully, but these errors were encountered: