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 operations expert, I am well aware of the importance of website details for user experience and brand image.In content operations, we often need to guide users to visit external social media platforms to expand influence or provide more interactive channels.AnQiCMS (AnQiCMS) with its flexible template tag system makes this operation intuitive and efficient.However, a common detail is often overlooked: 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 Anqi CMS website can provide a smoother, more user-friendly experience.

UnderstandingcontactThe role of tags in Anqi CMS

In AnQi CMS,contactThe tag is a powerful tool that calls information from the "Contact Information Settings" on the website template.The contact information settings on the back-end, in addition to the traditional contact, phone, address, and email, also provide rich social media link fields such as Facebook, Twitter, Tiktok, Linkedin, Instagram, and Youtube.

tag-contact.mdThe document clearly shows how these fields are called. It is important to understand,contactThe main responsibility of the tag isGet and outputThe corresponding fields configured in the background.ValueFor example, when you fill in the Facebook field in the backgroundhttps://www.facebook.com/AnQiCMSthen{% contact with name="Facebook" %}with 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 does not generate a complete HTML.<a>Link tags, it does not add automatically.target="_blank"Property.

This means that the responsibility for generating links and controlling their opening method ultimately falls on your website template code.

Ensure that external social media links open in a new window is the core strategy.

Allow to passcontactAll external social media links called by the tag should open in a new window, the core lies in manually adding these links to your template filetarget="_blank"Property. At the same time, for safety reasons, we strongly recommend adding it togetherrel="noopener noreferrer"Property.

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

Step 1: Locate Your Template File

通常，社交媒体链接会放置在网站的页脚 (footer.html), Header navigation (header.html) or in the sidebar (aside.html), Or a standalone “Contact Us” page template. These files are usually located in the AnQiCMS installation directory./templateIn the current theme directory of the folder, for exampledefault/partial/footer.htmlIf you are unsure of the specific file location, you can refer to the AnQiCMSdesign-director.mddocument about the directory structure of the template files.

Step two: Identify and modify the social media link code

Open the template file you have located. You will see code snippets similar to the following, which are being usedcontactTag 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 set these up for<a>tagstarget="_blank"andrel="noopener noreferrer"Property.

• target="_blank": This is a standard HTML attribute that indicates the browser should open links in a new window or new tab.
• rel="noopener noreferrer"This is an important security and performance attribute.
  • noopenerPrevent the new page from accessing the original page.window.openerObject to prevent malicious pages from exploiting.window.opener.location = newURLIn order to navigate the original page to a malicious URL (i.e., Tabnabbing attack).
  • noreferrer: Prevent the browser from sending on the newly opened page.RefererHeader information, which is very useful in some privacy or security scenarios.

The modified code will look like this:

{# 修改后示例：调用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 %}

Make sure to apply this change for all tagscontactthat retrieve external social media links.

The 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 the social media links, and verify that they all open normally in new windows.

Whyrel="noopener noreferrer"So important?

Maybe you will be curious, why just addtarget="_blank"Isn't it enough? Why do we need to add it unnecessarilyrel="noopener noreferrer"What?

This is mainly for safety considerations. When a link is usedtarget="_blank"When a new page is opened, the new page can accesswindow.openerproperties of the original page.windowThis means that if the newly opened page is malicious, it can exploitwindow.opener.location.replace()Wait for JavaScript methods, which can redirect your original page to a phishing website without the user noticing.This attack method is called "Tabnabbing".

rel="noopener noreferrer"The addition of properties can effectively sever the connection between the new page and the original page:

• noopener: It eliminates the reference to the new page onwindow.opener, preventing the Tabnabbing attack mentioned above.
• noreferrer: Besidesnoopenerin addition to its function, it will also prevent the browser from sending in HTTP requestsRefererheader, it enhances user privacy protection.

Although AnQi CMS has already focused on security at the system level, but also follows these**practices in the front-end template, can 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 barrier to the website's security, showcasing your professional expertise as a website operator.

Frequently Asked Questions (FAQ)

Q1: I forgot to addrel="noopener noreferrer"the attribute, what impact will it have?A1: If only the attribute was addedtarget="_blank"withoutrel="noopener noreferrer"Your website is at risk of being attacked by 'Tabnabbing'.A malicious new page may use JavaScript to redirect your original page to a phishing website, thereby stealing your sensitive information or engaging in other fraudulent activities.Although this is a relatively concealed attack, it is strongly recommended that you always add it for user safetyrel="noopener noreferrer".

Q2: Besides social media links, through thecontactemail tag called (EmailOr phone (CellphoneLink should also be addedtarget="_blank"?A2: For email (mailto:And phone (tel:Link, usually not recommended to addtarget="_blank"These links often trigger local email clients or dial-up applications instead of browser behavior. For example, clickingmailto:[email protected]will open the user's default email application at this timetarget="_blank"The effect will be unclear, and may even cause unnecessary behavior. Therefore, the default behavior should be maintained for such non-HTTP/HTTPS links.

Q3: If a social media field in the background is not filled with a URL, will the template display an empty link?A3: If you use the link generation method suggested in the article before{% if 变量名 %}the corresponding value will be blank when the background field is empty<a>The tag will not be rendered. It is a good programming habit that can avoid the appearance of empty or invalid links on the page, keeping the page tidy and effective.