Vue-meta: Allow special characters

Created on 5 Dec 2016 · 11Comments · Source: nuxt/vue-meta

Hi, how do you allow special characters?
For example, if you have This is my title's, it will render as This is my title's which doesn't rendere correctly in the title tag

bug

Source

microcipcip

All 11 comments

Hi @microcipcip - use __dangerouslyDisableSanitizers:

{
  metaInfo: {
    ...
    __dangerouslyDisableSanitizers: ['title']
  }
}

I should probably ponder the notion of making the sanitizers a little more lenient of certain characters and only sanitize HTML-relevant symbols like /, < and >. Happy to discuss.

zspecza on 5 Dec 2016

Yes, that would be great, symbols like & and hyphen are quite common in the and the meta tags :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/585402?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="microcipcip picture"> <strong>microcipcip</strong> <span class="text-muted ml-1">on 5 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I've open this again as I guess it should be discussed more, as the alternative ATM seems to be using that long function or use lodash unescape. I guess that that function is set globally and not for each component?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/585402?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="microcipcip picture"> <strong>microcipcip</strong> <span class="text-muted ml-1">on 6 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@microcipcip</strong> you're correct - since any deeply nested component overwrites it's parent <code>metaInfo</code>. I can't think of a use-case for per-component sanitization, and it would complicate things a little - but if there's a use for it, I'll consider it.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1918632?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zspecza picture"> <strong>zspecza</strong> <span class="text-muted ml-1">on 6 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I guess that a global setting is what I need in this case, better than use <code>__dangerouslyDisableSanitizers</code> in 20 components :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/585402?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="microcipcip picture"> <strong>microcipcip</strong> <span class="text-muted ml-1">on 6 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3731713875" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>I've dug more into this:</p> <p>When server rendering, if <code>meta charset='utf-8'</code> is present, the correct title is displayed.<br /> This is not true for a client render, as JavaScript does not understand HTML entity encoding, but rather character codes in the form of hexadecimal identifiers. </p> <p>This means that escaping content on the client side does not currently work as intended. This is therefore a bug.</p> <p>I'm looking into various ways to handle this issue, but so far all the methods I have found are either hacks or open XSS vulnerabilities. I'll keep looking.</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1918632?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zspecza picture"> <strong>zspecza</strong> <span class="text-muted ml-1">on 7 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hi <strong>@microcipcip</strong> - I've added a fix for this, could you update <code>vue-meta</code> & remove your <code>__dangerouslyDisableSanitizers</code> config and confirm if it works for you?</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/1918632?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="zspecza picture"> <strong>zspecza</strong> <span class="text-muted ml-1">on 7 Dec 2016</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Thanks, I'll update it this evening when I get back from work :)</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/585402?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="microcipcip picture"> <strong>microcipcip</strong> <span class="text-muted ml-1">on 7 Dec 2016</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p>Hey, it works great, thanks a lot!</p> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/585402?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="microcipcip picture"> <strong>microcipcip</strong> <span class="text-muted ml-1">on 8 Dec 2016</span> </div> <div class="col text-right"> 👍<span class="ml-2 mr-3">1</span> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <p><strong>@declandewet</strong> I have same issue with meta tags. I have an <code>og:image</code> from CDN with query string that is escaped and so invalidated:</p> <pre><code class="prettyprint">https://images.ctfassets.net/gz0sygvqczyz/2d5wlYciwkwLpvGlSMc8Eg/914a2626b91bbd41fe630238858c74a8/AR.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9 </code></pre> <p>become </p> <pre><code class="prettyprint">https://images.ctfassets.net/gz0sygvqczyz/2d5wlYciwkwLpvGlSMc8Eg/914a2626b91bbd41fe630238858c74a8/AR.png?fit=pad&f=top&w=1200&h=630&bg=rgb:F3F6F9 </code></pre> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/10454741?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="equinusocio picture"> <strong>equinusocio</strong> <span class="text-muted ml-1">on 27 Jul 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown"> <blockquote> <p>Hey, it works great, thanks a lot!<br /> Can you recall what actions you performed to make this work? </p> </blockquote> </div> <div class="card-footer"> <div class="row"> <div class="col"> <img src="https://avatars.githubusercontent.com/u/171670?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="aslamdoctor picture"> <strong>aslamdoctor</strong> <span class="text-muted ml-1">on 16 Dec 2019</span> </div> <div class="col text-right"> </div> </div> </div> </div> </div> <div class="col-12"> <div class="card card-custom mb-4"> <div class="card-body pt-3 pb-3 markdown text-center helpful"> <div class="title">Was this page helpful?</div> <div class="mt-1" onMouseLeave="rating(193384665, 0);"> <i class="fas fa-star inactive" id="star-1" onMouseOver="rating(193384665, 1);" onclick="rate(193384665, 1);"></i> <i class="fas fa-star inactive" id="star-2" onMouseOver="rating(193384665, 2);" onclick="rate(193384665, 2);"></i> <i class="fas fa-star inactive" id="star-3" onMouseOver="rating(193384665, 3);" onclick="rate(193384665, 3);"></i> <i class="fas fa-star inactive" id="star-4" onMouseOver="rating(193384665, 4);" onclick="rate(193384665, 4);"></i> <i class="fas fa-star inactive" id="star-5" onMouseOver="rating(193384665, 5);" onclick="rate(193384665, 5);"></i> </div> <div class="description text-small"><span id="rating-val">0</span> / 5 - <span id="rating-count">0</span> ratings</div> </div> </div> <div class="mb-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3452512275" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> </div> <div class="col-12 col-lg-4"> <div id="ph-above-related"></div> <div class="card card-custom issue-box"> <div class="card-body pt-3 pb-5"> <h2 class="mb-4">Related issues</h2> <div> <strong> <a href="/vue-meta/224232722/how-can-we-use-it-with-vue-class-component">How can we use it with vue-class-component?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/314036?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="vishr picture"> <strong class="pr-1" dir="ltr">vishr</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/vue-meta/269389522/add-locale-to-title-meta">Add locale to title meta</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/5030329?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="iMomen picture"> <strong class="pr-1" dir="ltr">iMomen</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/vue-meta/398531333/does-not-only-support-v8js-engines">Does not only support v8js engines?</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/32331576?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="cr-lgl picture"> <strong class="pr-1" dir="ltr">cr-lgl</strong> · <span class="px-1" dir="ltr">8</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/vue-meta/215207610/internal-js-doesn-t-process-properly-with-multiple-keys">Internal JS doesn't process properly with multiple keys</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/9992724?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="o-alexandrov picture"> <strong class="pr-1" dir="ltr">o-alexandrov</strong> · <span class="px-1" dir="ltr">5</span><span>Comments</span> </div> <hr /> <div> <strong> <a href="/vue-meta/528837235/unit-testing-a-metainfo-statement">Unit testing a metaInfo() statement</a> </strong> </div> <div class="text-muted text-small mt-2"> <img src="https://avatars.githubusercontent.com/u/6538906?v=4&s=40" style="width:20px; height:20px;" class="mr-2 rounded float-left" alt="terazus picture"> <strong class="pr-1" dir="ltr">terazus</strong> · <span class="px-1" dir="ltr">8</span><span>Comments</span> </div> </div> </div> <div class="sticky-top pt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div id="ph-below-related-2" class="mt-4"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="3919948963" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> </div> <div class="col-12 col-lg-4"> </div> </div> <div class="skyscraper-container"> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3835332123789605" data-ad-slot="7879185320" data-ad-format="vertical" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> </div> </div> <div class="mt-5 spacer"></div> <footer class="mt-5 pb-2 py-4 text-center mt-auto"> <div class="container"> <a class="navbar-brand logo mr-5" href="/"> <img src="/assets/img/logo.svg" width="40" height="40" alt="bleepingcoder logo"> bleeping<strong>coder</strong> </a> <div class="mt-4"> bleepingcoder.com uses publicly licensed GitHub information to provide developers around the world with solutions to their problems. We are not affiliated with GitHub, Inc. or with any developers who use GitHub for their projects. We do not host any of the videos or images on our servers. All rights belong to their respective owners. </div> <div> Source for this page: <a href="https://www.github.com/nuxt/vue-meta/issues/34" rel="nofollow noreferrer" target="_blank">Source</a> </div> </div> <hr class="mb-5 mt-5"> <div class="container"> <div class="row"> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular programming languages</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/python" dir="ltr">Python</a> </li> <li class="mb-2"> <a href="/javascript" dir="ltr">JavaScript</a> </li> <li class="mb-2"> <a href="/typescript" dir="ltr">TypeScript</a> </li> <li class="mb-2"> <a href="/cpp" dir="ltr">C++</a> </li> <li class="mb-2"> <a href="/csharp" dir="ltr">C#</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-sm-0 mb-5"> <strong>Popular GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/microsoft/vscode" dir="ltr">vscode</a> </li> <li class="mb-2"> <a href="/numpy/numpy" dir="ltr">numpy</a> </li> <li class="mb-2"> <a href="/ant-design/ant-design" dir="ltr">ant-design</a> </li> <li class="mb-2"> <a href="/mui-org/material-ui" dir="ltr">material-ui</a> </li> <li class="mb-2"> <a href="/vercel/next-js" dir="ltr">next.js</a> </li> </ul> </div> <div class="col-sm-4 col-lg mb-0"> <strong>More GitHub projects</strong> <ul class="list-unstyled mb-0 mt-2"> <li class="mb-2"> <a href="/rust-lang/rust" dir="ltr">rust</a> </li> <li class="mb-2"> <a href="/moment/moment" dir="ltr">moment</a> </li> <li class="mb-2"> <a href="/yarnpkg/yarn" dir="ltr">yarn</a> </li> <li class="mb-2"> <a href="/mozilla/pdf-js" dir="ltr">pdf.js</a> </li> <li class="mb-2"> <a href="/JuliaLang/julia" dir="ltr">julia</a> </li> </ul> </div> </div> </div> <hr class="mb-5 mt-5"> <div class="container text-muted"> © 2026 bleepingcoder.com - <a href="/bleeps" rel="nofollow">Contact</a><br /> By using our site, you acknowledge that you have read and understand our <a href="/cookies" rel="nofollow">Cookie Policy</a> and <a href="/privacy" rel="nofollow">Privacy Policy</a>. </div> </footer> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha256-4+XzXVhsDmqanXGHaHvgh1gMQKX40OUvDEBTu8JcmNs=" crossorigin="anonymous"></script> <script async src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>  <script type="text/javascript" src="/assets/js/main.js"></script> <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script></body> </html>