search

contao / contao

Contao Open Source CMS
https://contao.org
GNU Lesser General Public License v3.0
351 stars 159 forks source link

Content elements cannot be copied in the backend if <form> in template #7355

Open berecont opened 3 months ago

berecont commented 3 months ago

Affected version(s)

5.3.11

Description

Backend actions Customized template.html.twig as CE with <form> tags in it: example:

{% extends "@Contao/content_element/template.html.twig" %}

{% block content %}

<form></form>

{% endblock %}

or

{% extends "@Contao/content_element/template.html.twig" %}

{% block content %}

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i-like" />
  <button>Submit</button>
</form>

{% endblock %}

» no action can be performed with 'edit multiple'. No copy, no move, ...

neither as templates/content_element/template.html.twig nor templates/content_element/template/mytemplate.html.twig

fritzmg commented 3 months ago

» no action can be performed with 'edit multiple'. No copy, no move, ...

What do you mean? What exactly happens?

fritzmg commented 3 months ago

Ah, I guess it's because it's then a <form> within a <form>. This is something that you will need to adjust in your own template (via as_editor_view). Your content element must not output a <form> in the back end.

fritzmg commented 3 months ago

@contao/developers or should we automatically filter any <form> tags in the default child_record_callback, wdyt?

Toflar commented 3 months ago

Nah, imho this is not something we have to worry about.

m-vo commented 3 months ago

We could in theorey render the previews in an iframe and set srcdoc to make them independent of the backend dom.

Something like this:

<iframe>
<script>
{
  const scripts = document.getElementsByTagName('script');
  scripts[scripts.length - 1].previousSibling.srcdoc = `<html of the preview>`; }
}
</script>
berecont commented 3 months ago

Nah, imho this is not something we have to worry about.

Which user would think that a customized template could cause such an error and then search for the issue? I didn't know why copying wasn't working and had to search for and identify the error. Only then could I realize that I might need to adjust the template for the backend.

Toflar commented 3 months ago

Every developer should worry about that. It's their job. It's not like <form> is the only issue. JavaScript could be problematic, inline styles could be problematic, huge images could be problematic, autoplay videos could be problematic, iframes could lead to issues. Everything might have unwanted side effects in the back end.

That's why we provide a way for developers so they can make sure they output a useful and valid alternative view of their elements for the back end.

ausi commented 3 months ago

or should we automatically filter any <form>

At first I thought that this might be feasible, but filtering <form> alone would not be enough as all <input> (and similar) elements inside the form would still cause issues. So there are many different issues that could arise which makes it impracticable to filter them.

I didn't know why copying wasn't working and had to search for and identify the error. Only then could I realize that I might need to adjust the template for the backend.

I agree that this is not optimal, but I don’t see a good robust solution to fix this.

We could in theorey render the previews in an iframe and set srcdoc to make them independent of the backend dom.

<iframe srcdoc='…'> might be the only way to achieve real isolation, but it is also complicated to implement as we would have to manage the height of all the iframes to scale with the content and add styles to every iframe.

leofeyer commented 2 months ago

Isn‘t that exactly what as_editor_view is for?

zoglo commented 2 months ago

Either the editor view or making sure that you output a different template on a backend request