Designsystem - no-opener no-referral

safeguards anchor links so that they don't leak unwanted information to (potentially malicious) linked sites

no-opener no-referral

With no-opener and no-referral

Without no-opener and no-referral impose example

<h2>With no-opener and no-referral</h2>
<div class="social-media">
  <a 
    class="social-media__account external" 
    href="http://info.cern.ch/hypertext/WWW/TheProject.html"
    target="_blank" 
  >
    <img class="social-media__account__image" src="https://placeimg.com/500/500/animals" alt="">
    <span class="social-media__account__label">Kjeller barnehage på Facebook</span>
  </a>
  <br>&lt;http>
  <ul class="social-media__posts">
    <li class="social-media__post">
      <a 
        class="social-media__post__link"
        href="https://no.wikipedia.org/wiki/Portal:Forside" 
        target="_blank"
      >
        <span class="social-media__post__date">20.08.2019</span>
        <img class="social-media__post__image" src="https://placeimg.com/800/600/nature" alt="">
        <p class="social-media__post__content">
          Ekorngruppa på tur i skogen i dag. Selv om kong vinter prøver å bite seg fast, fant vi blomster og flere
          insekter 😀
        </p>
      </a>
      <br>&lt;https>
    </li>
  </ul>
</div>
<br>
<br>
<h2>Without no-opener and no-referral impose example</h2>
<div class="social-media">
  <a 
    class="social-media__account external" 
    href="http://info.cern.ch/hypertext/WWW/TheProject.html"
    target="_blank"
    rel="opener" 
    referrerpolicy="unsafe-url"
  >
    <img class="social-media__account__image" src="https://placeimg.com/500/500/animals" alt="">
    <span class="social-media__account__label">Kjeller barnehage på Facebook</span>
  </a>
  <br>&lt;http>
  <ul class="social-media__posts">
    <li class="social-media__post">
      <a 
        class="social-media__post__link"
        href="https://no.wikipedia.org/wiki/Portal:Forside" 
        target="_blank"
        rel="opener"
        referrerpolicy="unsafe-url"
      >
        <span class="social-media__post__date">20.08.2019</span>
        <img class="social-media__post__image" src="https://placeimg.com/800/600/nature" alt="">
        <p class="social-media__post__content">
          Ekorngruppa på tur i skogen i dag. Selv om kong vinter prøver å bite seg fast, fant vi blomster og flere
          insekter 😀
        </p>
      </a>
      <br>&lt;https>
    </li>
  </ul>
</div>