How to ensure that all external social media links called by the `contact` tag open in a new window when clicked?

As an experienced website operation expert, I fully understand the importance of website details to user experience and brand image.In content operation, we often need to guide users to visit external social media platforms to expand influence or provide more interactive channels.Auto CMS (AutoCMS) offers flexible template tag systems, making this operation intuitive and efficient.However, a common detail that is often overlooked is how to ensure that these external links open in a new window or tab when clicked, thus avoiding the user leaving your main site?

Today, let's delve deeply into this issue to ensure that your security CMS website can provide a smoother and more user-friendly experience.

UnderstandingcontactThe role of tags in security CMS

In the Anqi CMS,contactLabels are a powerful tool that allow you to call information from the "Contact Information Settings" backend in your website template.The contact information setting of the background, in addition to the traditional contacts, phone numbers, addresses, and email addresses, also provides rich social media link fields such as Facebook, Twitter, Tiktok, Linkedin, Instagram, Youtube, etc.

tag-contact.mdThe document clearly shows how these fields are called. It is important to understand,contactThe main responsibility of the tag isObtain and outputThe corresponding fields configured in the backgroundValue。For example, when you enter the Facebook field in the backgroundhttps://www.facebook.com/AnQiCMSso that{% contact with name="Facebook" %}this tag, or through a variable{% contact contactFacebook with name="Facebook" %}{{contactFacebook}}the result of the call, will always be a pure URL stringhttps://www.facebook.com/AnQiCMS。It itself does not generate a complete HTML<a>link tags, nor does it automatically addtarget="_blank"properties.

This means that the responsibility for generating the link and controlling its opening method ultimately falls on the code of your website template.

The core strategy to ensure that external social media links open in a new window

To make it passcontactThe core is to manually add these links to the template file, for all external social media links called by labels to open in a new windowtarget="_blank"Properties. Moreover, for safety reasons, we strongly recommend adding it together.rel="noopener noreferrer"properties.

Let's go step by step to see how to operate:

Step 1: Locate your template file.

Generally, social media links are placed at the footer of the website (footer.html) of the header navigation (header.html), the sidebar (aside.html) or a standalone "Contact Us" page template. These files are usually located in your AnQiCMS installation directory./templateIn the current theme directory within the folder, for exampledefault/partial/footer.htmlIf you are unsure about the specific file location, you can refer to thedesign-director.mddescription of the template file directory structure in the AnQiCMS document.

第二步：Identify and modify the social media link code

Open the template file you have located. You will see a code snippet similar to the following, which is being usedcontactLabel to get social media links:

{# 示例：调用Facebook链接 #}
<a href="{% contact with name="Facebook" %}">
    <img src="/static/images/facebook-icon.png" alt="Facebook">
</a>

{# 示例：调用Twitter链接，先赋值给变量再使用 #}
{% contact contactTwitter with name="Twitter" %}
{% if contactTwitter %}
    <a href="{{ contactTwitter }}">
        <img src="/static/images/twitter-icon.png" alt="Twitter">
    </a>
{% endif %}

Now, we need to create for these<a>Label addtarget="_blank"andrel="noopener noreferrer"properties.

  • target="_blank"This is an HTML standard attribute, indicating that the browser should open links in a new window or tab.
  • rel="noopener noreferrer"：This is an important security and performance attribute.
    • noopener：Prevent newly opened pages from accessing the original page.window.openerobject, thus preventing malicious pages from exploiting.window.opener.location = newURL等方式将原始页面导航到恶意URL（即“Tabnabbing”攻击）。
    • noreferrer：阻止浏览器在新打开的页面上发送RefererHeader information, which is very useful in some privacy or security scenarios.

The modified code will be as follows:

{# 修改后示例：调用Facebook链接，强制在新窗口打开并增强安全性 #}
{% contact contactFacebook with name="Facebook" %} {# 建议总是先赋值给变量，便于后续判断和使用 #}
{% if contactFacebook %} {# 检查链接是否存在，避免渲染空链接 #}
    <a href="{{ contactFacebook }}" target="_blank" rel="noopener noreferrer">
        <img src="/static/images/facebook-icon.png" alt="Facebook">
    </a>
{% endif %}

{# 修改后示例：调用Twitter链接 #}
{% contact contactTwitter with name="Twitter" %}
{% if contactTwitter %}
    <a href="{{ contactTwitter }}" target="_blank" rel="noopener noreferrer">
        <img src="/static/images/twitter-icon.png" alt="Twitter">
    </a>
{% endif %}

{# 对于YouTube、Linkedin、Instagram等其他社交媒体链接，依此类推进行修改 #}
{% contact contactYoutube with name="Youtube" %}
{% if contactYoutube %}
    <a href="{{ contactYoutube }}" target="_blank" rel="noopener noreferrer">
        <img src="/static/images/youtube-icon.png" alt="YouTube">
    </a>
{% endif %}

Please make sure to apply this change to allcontactexternal social media links obtained through tags.

Third step: Save and test your changes

Save the modified template file and clear the AnQiCMS cache (via the "Update Cache" feature on the backend).Then, visit your website's front end, click on all social media links, and verify that they all open normally in a new window.

Whyrel="noopener noreferrer"Is it that important?

Maybe you are curious, just by addingtarget="_blank"Isn't it enough? Why go to the trouble of addingrel="noopener noreferrer"?

This is mainly for security considerations. When a link is usedtarget="_blank"When a new page is opened, the new page can access the original page throughwindow.openerpropertieswindowThis object means that, if the newly opened page is malicious, it can take advantage ofwindow.opener.location.replace()This JavaScript method redirects your original page to a phishing website, and the user may not notice it.This attack method is called "Tabnabbing".

rel="noopener noreferrer"the addition of the property, which can effectively cut off this connection between the new page and the original page:

  • noopener：Removed the reference to the new page forwindow.opener, preventing the Tabnabbing attack mentioned above.
  • noreferrer: In addition tonoopenerIn addition to the feature mentioned above, it also prevents the browser from sending in HTTP requestsRefererThe header has been added to enhance user privacy protection.

Although AnQi CMS has already paid attention to security at the system level, adhering to these practices in the front-end template can also provide an additional security layer for your website, protecting your users from potential malicious attacks.

By following these steps, you not only ensure that external social media links open in a new window, enhancing user experience, but more importantly, you add a solid layer of security to your website, demonstrating your professional qualities as a website operator.

Common Questions and Answers (FAQ)

Q1：I forgot to addrel="noopener noreferrer"what impact will it have?A1：If only the following were addedtarget="_blank"but notrel="noopener noreferrer"Your website is at risk of being attacked by 'Tabnabbing'.Malicious new pages may use JavaScript to redirect your original page to a phishing website, thereby stealing sensitive user information or engaging in other fraudulent activities.rel="noopener noreferrer".

Q2：In addition to social media links, throughcontactemail (using tags) (Email) Or phone (Cellphone) Link also needs to be addedtarget="_blank"?A2: For email (mailto:) And phone (tel:) Link, usually not recommended to addtarget="_blank"These links usually trigger local email clients or dial-up applications, rather than browser behavior. For example, clickingmailto:[email protected]the default email application of the user will open, at this timetarget="_blank"the effect will be unclear, and even may produce unnecessary behaviors. Therefore, for such non-HTTP/HTTPS links, it is recommended to keep the default behavior.

Q3: If a social media field is not filled with a URL on the backend, will the template display an empty link?A3: If you use the link generation method as recommended in the article{% if 变量名 %}for judgment, then when the background field is empty, the corresponding<a>The label will not be rendered. This is a good programming habit, which can avoid the appearance of empty or invalid links on the page, and maintain the cleanliness and validity of the page.