Support URLs with multiple query parameters

Created on 14 June 2023, about 1 year ago
Updated 24 January 2024, 5 months ago

Problem/Motivation

Thanks for this module!

URLs with multiple query parameters do not seem to be supported: the ampersand is escaped by the twig template.

Steps to reproduce

  1. Go to /admin/structure/block
  2. Create a "Social Media Links" block
  3. Provide a URL that includes multiple query string parameters e.g. https://www.youtube.com/watch?v=foobar&t=3s
  4. Save block
  5. View the block

Expected result: the block includes a youtube icon with link https://www.youtube.com/watch?v=foobar&t=3s

Actual result: the block includes a youtube icon with link https://www.youtube.com/watch?v=foobar&amp%3Bt=3s (note the ampersand is escaped)

Proposed resolution

The ampersand is escaped by the Twig template /templates/social-media-links-platforms.html.twig.

This can be fixed with this change:

-<a class="social-media-link-icon--{{ platform.id }}" href="{{ platform.url }}" {{ platform.attributes }} >
+<a class="social-media-link-icon--{{ platform.id }}" href="{{ platform.url | raw }}" {{ platform.attributes }} >

That being said the `raw` Twig filter is not a best practice as it would allow to insert arbitrary tags in the HTML. There must be a better way.

Similar issue: 🐛 URL formatter html-encodes ampersands in URLs Active

🐛 Bug report
Status

RTBC

Version

2.0

Component

Code

Created by

🇨🇦Canada fengtan Montreal, Canada

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @fengtan
  • 🇨🇦Canada fengtan Montreal, Canada
  • 🇦🇷Argentina tguerineau

    In order to address the issue "Support URLs with multiple query parameters" on the social_media_links module, a thorough investigation has been carried out.

    Problem Description:
    The issue with the social_media_links module was that it incorrectly handled URLs containing multiple query parameters, resulting in incorrectly formed links.

    Solution Implemented:
    A custom Twig filter has been created to handle this. The filter decodes the URL, checks if there are query parameters, and if found, re-encodes them. This ensures that the URL query parameters maintain their structure while being correctly encoded. Here is the code for the custom Twig filter:

    public function safeLinkFilter($url) {
        // Decode the URL first.
        $url = urldecode($url);
        $url_parts = parse_url($url);
    
        // If we don't have query parameters, just return the original URL
        if (!isset($url_parts['query'])) {
            return $url;
        }
    
        parse_str($url_parts['query'], $query_array);
    
        // Re-encode the query parameters.
        $safe_query = http_build_query($query_array);
    
        // Rebuild the URL.
        $safe_url = $url_parts['scheme'] . '://' . $url_parts['host'] . $url_parts['path'] . '?' . $safe_query;
    
        if (isset($url_parts['fragment'])) {
            // Encode the fragment.
            $safe_url .= '#' . urlencode($url_parts['fragment']);
        }
    
        return $safe_url;
    }
    

    Alternative Solutions:
    There has been a thorough search for alternative solutions, such as existing Drupal core or Twig filters that could achieve the same result. However, it appears that there is no built-in Drupal core solution or Twig filter that could solve this specific issue, hence the creation of the custom filter.

    I'm attaching the patch for review. I would appreciate any feedback or suggestions.

  • Status changed to Needs review 11 months ago
  • 🇦🇷Argentina tguerineau

    This is an updated patch that includes an additional change: adding the `safe_link` filter to the second anchor tag in the social-media-links-platforms.html.twig template.

    The `safe_link` filter ensures that the URLs of the social media links are safe and properly formatted, even when they contain multiple query parameters. Our previous patch (social_media_links-support-multiple-query-parameters-3366866-3.patch) did not apply this filter to all URLs in the template, which could potentially leave some URLs improperly formatted. This patch rectifies that oversight.

    Please review this updated patch.

  • Status changed to RTBC 5 months ago
  • 🇮🇳India divya.sejekan

    Verified the issue - with patch #5
    Issue is resolved , & is displayed in URL instead of &amp%3B

    Testing steps :
    1. Testing steps :
    1. Install the module - Social Media Links Block and Field
    2. Add the block in block layout
    3. Add link to youtube , using url with multiple query parameters
    4. Save

    Moving issue to RTBC++

Production build 0.69.0 2024