Block elements inside "a" tag (htmlpurifier)

Question

How I can prevent HTMLPURIFIER break this code:

<a target="_blank" href="http://www.example" class="link_normal opacity">
<blockquote url="http://www.example" class="big">
    <div class="center">
        <div class="table_cell"><img src="/images/imagenes_urls/4241.jpg" class="img_url"></div>
    </div>
    <p style="color:#3b5998" class="b">Desde los 80 hasta 2015, así ha sido la impresionante evolución de los móviles</p>
    <p>¿Cómo olvidarse de aquellos enormes objetos a los que llamábamos teléfonos móviles? Muchos de vosotros los recordar...</p>
    <span class="dominio">andro4all.com</span>
</blockquote></a>

When i use it turns into something like this:

<blockquote class="big">
<a class="link_normal opacity" href="http://www.example"></a>
<div class="center">
    <a class="link_normal opacity" href="http://www.example"></a>
    <div class="table_cell">
        <a class="link_normal opacity" href="http://www.example">
        <img alt="4241.jpg" class="img_url" src="/images/imagenes_urls/4241.jpg">
        </a>
    </div>
    <a class="link_normal opacity" href="http://www.example"></a>
</div>
<a class="link_normal opacity" href="http://www.example"></a>
<p class="b" style="color:#3b5998;">
<a class="link_normal opacity" href="http://www.example">Desde los 80 hasta 2015, asÃ ha sido la impresionante evoluciÃ³n de los mÃ³viles</a>
</p></blockquote>

read this: http://stackoverflow.com/questions/3379392/what-elements-can-be-contained-within-a-a-tag — Reagan Gallant, Jul 29 '15 at 12:23
I don't know/use htmlpurifier but as I see it it doesn't break it, it makes it standard compliant following HTML4 standards where no block-level element can be wrapped in the inline-level anchor tag. HTML 5 introduces this possibility (back?) as this is indeed a common usage and keeping it non-standard would imply developing some javascript which will most of the time be less functional or accessible than this rather clean solution. [this answer](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct) summarizes it well — Laurent S., Jul 29 '15 at 12:25
Also see http://stackoverflow.com/questions/5667857/html-filter-that-is-html5-compliant — Gordon, Jul 29 '15 at 12:27

score 0 · Answer 1 · answered Jul 29 '15 at 12:28

0

That is not valid to wrap grouping tag blockquote with inline a tag in HTML4.

Also you can find here good information over this tag http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-blockquote-element

answered Jul 29 '15 at 12:28

justtry

639
4
8

score 0 · Accepted Answer · answered Jul 29 '15 at 12:37

you can use a trick like adding JavaScript to your main tag like:

onclick="document.location='http://www.example'"

and you can add pointer style to cursor to make it look like a normal link:

style="cursor:pointer"

and that will be like this:

<blockquote url="http://www.example" class="big" onclick="document.location='http://www.example'" style="cursor:pointer">
    <div class="center">
        <div class="table_cell"><img src="/images/imagenes_urls/4241.jpg" class="img_url"></div>
    </div>
    <p style="color:#3b5998" class="b">Desde los 80 hasta 2015, así ha sido la impresionante evolución de los móviles</p>
    <p>¿Cómo olvidarse de aquellos enormes objetos a los que llamábamos teléfonos móviles? Muchos de vosotros los recordar...</p>
    <span class="dominio">andro4all.com</span>
</blockquote>

score 0 · Answer 3 · edited May 23 '17 at 12:29

After experimentation, I just discovered a slick answer to this specific question. You can customize HTMLPurifier's behavior, as described at http://htmlpurifier.org/docs/enduser-customize.html.

Specifically, you can overwrite the default behavior of the 'a' anchor element by defining the element again, like this:

include_once('HTMLPurifier.auto.php');
$config = HTMLPurifier_Config::createDefault();
$def = $config->getHTMLDefinition(true);

// here is the magic method that overwrites the default anchor definition
$def->addElement(
  'a', // element name
  'Inline', // the type of element: 'Block','Inline', or false, if it's a special case
  'Flow', // what type of child elements are permitted: 'Empty', 'Inline', or 'Flow', which includes block elements like div
  'Common' // permitted attributes
);

$purifier = new HTMLPurifier($config);

// $dirty_html is the html you want cleaned
echo $purifier->purify($dirty_html);

Now you can include block elements inside anchor tags, as allowed in the HTML5 specification (http://dev.w3.org/html5/markup/a.html).

For a more robust HTML5 solution, Christoffer Bubach offers a detailed HTMLPurifier configuration to allow newer HTML5 tags, though it doesn't redefine the anchor tag to permit block elements inside it. See his answer to this SO question: HTML filter that is HTML5 compliant

Block elements inside "a" tag (htmlpurifier)

3 Answers3