How to allow google fonts in htmlpurifier?

Question

I am having problem with allowing google fonts by url, I allowed fonts CSS.AllowedProperties and set $config->set('CSS.MaxImgLength', NULL);

added link to: $config->set('HTML.Allowed', 'link[href|rel]);

added stylesheet to: $config->set('CSS.AllowedProperties', 'stylesheet);

added to defination: $def->addAttribute('iframe','allowfullscreen','link', 'Bool');

I have tried many other solutions over 3 hours but couldnt make is work. Getting error :

Cannot retrieve undefined attribute type link

These are the urls I want to allow :

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700&display=swap&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">

<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&display=swap" rel="stylesheet">

Here is my full setup

  function strTrim($dirty_html, $config = FALSE){
     require_once('ThirdParty/HTMLPurifier/library/HTMLPurifier.auto.php');
     if (is_array($dirty_html)) {
        foreach ($dirty_html as $key => $val) {
            $clean_html[$key] = strTrim($val, $config);
        }
     } else {
        $config = HTMLPurifier_Config::createDefault();
        $config->set('Core.Encoding', 'utf-8');
        $config->set("AutoFormat.AutoParagraph", false);
        $config->set("Core.NormalizeNewlines", true);
        $config->set('HTML.Allowed', 'link[href|rel],iframe[src|title|frameborder|allowfullscreen|class|width|height],p,b,strong,a[href|title],abbr[title],blockquote[cite],code,pre[class],em,i,strike,u,s,sub,sup,ol,ul,li,hr,img[title|alt|src|class|style],h1,h2,h3,h4,h5,h6,object[width|height|data],param[name|value],embed[src|type|allowscriptaccess|width|height],br,*[style]');
        $config->set('CSS.AllowedProperties', 'font,font-size,font-weight,font-style,font-family,text-decoration,margin-left,margin-right,float,color,background-color,text-align,width,max-width,padding-left,border,stylesheet');
        $config->set('HTML.MaxImgLength', NULL);
        $config->set('CSS.MaxImgLength', NULL);
        $config->set('HTML.SafeObject', true);
        $config->set('HTML.SafeEmbed', true);
        $config->set('Output.FlashCompat', true);
        $config->set('AutoFormat.RemoveEmpty', true);
        $config->set('AutoFormat.RemoveEmpty.RemoveNbsp', true);
        $config->set('HTML.SafeIframe', true);
        $config->set('URI.SafeIframeRegexp', '%^//(www.youtube(?:-nocookie)?.com/embed/|player.vimeo.com/video/)%');
        $def = $config->getHTMLDefinition(true);
        $def->addAttribute('iframe','allowfullscreen','link', 'Bool');
        $purifier = new HTMLPurifier($config);
        $clean_html = $purifier->purify($dirty_html);
     }
     return $clean_html;
  }

Thanks for any help.

Answer 1

I'm admittedly very confused about the configuration you've got. I do understand why you'd want to try to add link[href|rel] to HTML.Allowed, but I don't understand why you're setting CSS.MaxImgLength at all, or why you're adding stylesheet to CSS.AllowedProperties (to my knowledge, there's no such CSS property), and link is not a valid AttrType (third argument of addAttribute). Could you explain your motivation for those, or link to the guides you're following?

Unfortunately, you can't use <link> because it's part of the page header, whereas HTML Purifier is only for HTML body fragments. From what I understand of your usecase, the closest configuration setting you could use is Filter.ExtractStyleBlocks, but it's still a miss, not a hit, since it only considers <style> blocks, not <link>.

You might be interested in https://stackoverflow.com/a/41510846/245790 for an explanation why <link> isn't supported and how you can handle that.