12

Does anyone have any information or details on the following warning that I am seeing in the 2.4.2 CMS and Block content areas on saving?

Temporarily allowed to save HTML value that contains restricted elements. Allowed HTML tags are: div, a, p, span, em, strong, ul, li, ol, h5, h4, h3, h2, h1, table, tbody, tr, td, th, tfoot, img, hr, figure, button, i, u, br, b

It appears to be produced by saving content with Html that contains things like data toggles, iFrame embeds, etc. I've got WYSIWYG turned off globally, but the warning still gets produced.

I believe it has shown up after my Magento 2.4.1 - 2.4.2 upgrade, but can't seem to find any information online in regards to the warning, so I'm wondering if anyone has any info here.

A few questions, in hopes that someone can answer or link to an official doc:

Are data-toggles, iframes, and such going to be eliminated in a future release of Magento?

How soon do we have? Next version? Magento 2.5?

Will we be able to whitelist some/all of these items for use in admin content areas?

Thanks for any insight or help. R

Improve this question

4 Answers 4

Reset to default
9

I experienced this error too this morning and I dug a little :

Magento\Cms\Model\Wysiwyg\Validator is responsible of this notification. ATM, it seems that it just shoot a message with no repercussion.

Based on the code, there is a boolean from Magento configuration, that allows us to decide if we do accept or block html content with restricted html tags. Depending on this YES/NO option, the code will shoot a notification or throw an Exception.

The configuration key is cms/wysiwyg/force_valid.

It is defined in vendor/magento/module-cms/etc/config.xml (value = false), but does not appear in vendor/magento/module-cms/etc/adminhtml/system.xml. So there is no way to change that value from the admin panel ATM.

I guess it could be easy to add it if needed. IMO, Magento would probably do it on their own if they decided to switch the default value to true in the future.

Improve this answer
4
  • It seems like Magento is going to get rid of the wysiwyg functionality in future. They even have a new console command for the ability to change the cms/wysiwyg/force_valid config - php bin/magento cms:wysiwyg:restrict
    – Dmytro Lukachuk
    Jul 29, 2021 at 12:47
  • 1
    @rou6e could you please let me know how can I disable to chack these tags.
    – Manish Goswami
    Dec 9, 2021 at 15:05
  • 1
    @ManishGoswami : I believe that Magento will check for those no matter what option you choose. By default, Magento is just displaying a warning. The command provided by @Dmytro allows you to change the default behaviour and force the restriction. bin/magento cms:wysiwyg:restrict y; will ouput : "HTML user content validation is now enforced". bin/magento cms:wysiwyg:restrict n; will output : "HTML user content validation is now suggested". If you absolutely want to remove this warning, you would have to override the class Magento\Cms\Model\Wysiwyg\Validator with a preference for example.
    – rou6e
    Dec 9, 2021 at 19:39
  • Hi @rou6e got it, Thanks for the great description.
    – Manish Goswami
    Dec 11, 2021 at 6:28
2

I have fixed this issue for magento community version 2.4.3. You need to create a custom module

Create registration.php file, Vendor/Module/registration.php

<?php
/**
 * Copyright ©2021 s All rights reserved.
 * See COPYING.txt for license details.
 */
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__);

Create module.xml file, Vendor/Module/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Vendor_Module"/>
</config>

Create di.xml file here Vendor/Module/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/e†c/config.xsd">
    
    <virtualType name="DefaultWYSIWYGValidator" type="Magento\Framework\Validator\HTML\ConfigurableWYSIWYGValidator">
        <arguments>
            <argument name="allowedTags" xsi:type="array">
                <item name="iframe" xsi:type="string">iframe</item>
                <item name="style" xsi:type="string">style</item>
                <item name="pre" xsi:type="string">pre</item>
                <item name="figcaption" xsi:type="string">figcaption</item>
                <item name="caption" xsi:type="string">caption</item>
                <item name="strong" xsi:type="string">strong</item>
                <item name="table" xsi:type="string">table</item>
                <item name="thead" xsi:type="string">thead</item>
                <item name="tr" xsi:type="string">tr</item>
                <item name="th" xsi:type="string">th</item>
                <item name="tbody" xsi:type="string">tbody</item>
                <item name="tfoot" xsi:type="string">tfoot</item>
                <item name="small" xsi:type="string">small</item>
                <item name="abbr" xsi:type="string">abbr</item>
                <item name="address" xsi:type="string">address</item>
               <item name="area" xsi:type="string">area</item>
               <item name="aside" xsi:type="string">aside</item>
               <item name="article" xsi:type="string">article</item>
               <item name="canvas" xsi:type="string">canvas</item>
               <item name="code" xsi:type="string">code</item>
               <item name="dl" xsi:type="string">dl</item>
               <item name="dt" xsi:type="string">dt</item>
               <item name="dd" xsi:type="string">dd</item>
               <item name="em" xsi:type="string">em</item>
               <item name="embed" xsi:type="string">embed</item>
               <item name="fieldset" xsi:type="string">fieldset</item>
               <item name="legend" xsi:type="string">legend</item>
               <item name="link" xsi:type="string">link</item>
               <item name="picture" xsi:type="string">picture</item>
               <item name="q" xsi:type="string">q</item>
               <item name="section" xsi:type="string">section</item>
               <item name="sub" xsi:type="string">sub</item>
               <item name="sup" xsi:type="string">sup</item>
               <item name="ul" xsi:type="string">ul</item>
               <item name="ol" xsi:type="string">ol</item>
               <item name="li" xsi:type="string">li</item>
               <item name="optgroup" xsi:type="string">optgroup</item>
               <item name="option" xsi:type="string">option</item>
            </argument>
            <argument name="allowedAttributes" xsi:type="array">
                <item name="alt" xsi:type="string">alt</item>
                <item name="class" xsi:type="string">class</item>
                <item name="data-active-tab" xsi:type="string">data-active-tab</item>
                <item name="data-appearance" xsi:type="string">data-appearance</item>
                <item name="data-autoplay" xsi:type="string">data-autoplay</item>
                <item name="data-autoplay-speed" xsi:type="string">data-autoplay-speed</item>
                <item name="data-background-images" xsi:type="string">data-background-images</item>
                <item name="data-background-type" xsi:type="string">data-background-type</item>
                <item name="data-carousel-mode" xsi:type="string">data-carousel-mode</item>
                <item name="data-center-padding" xsi:type="string">data-center-padding</item>
                <item name="data-content-type" xsi:type="string">data-content-type</item>
                <item name="data-element" xsi:type="string">data-element</item>
                <item name="data-enable-parallax" xsi:type="string">data-enable-parallax</item>
                <item name="data-fade" xsi:type="string">data-fade</item>
                <item name="data-grid-size" xsi:type="string">data-grid-size</item>
                <item name="data-infinite-loop" xsi:type="string">data-infinite-loop</item>
                <item name="data-link-type" xsi:type="string">data-link-type</item>
                <item name="data-locations" xsi:type="string">data-locations</item>
                <item name="data-overlay-color" xsi:type="string">data-overlay-color</item>
                <item name="data-parallax-speed" xsi:type="string">data-parallax-speed</item>
                <item name="data-pb-style" xsi:type="string">data-pb-style</item>
                <item name="data-same-width" xsi:type="string">data-same-width</item>
                <item name="data-show-arrows" xsi:type="string">data-show-arrows</item>
                <item name="data-show-button" xsi:type="string">data-show-button</item>
                <item name="data-show-controls" xsi:type="string">data-show-controls</item>
                <item name="data-show-dots" xsi:type="string">data-show-dots</item>
                <item name="data-show-overlay" xsi:type="string">data-show-overlay</item>
                <item name="data-slide-name" xsi:type="string">data-slide-name</item>
                <item name="data-slick-index" xsi:type="string">data-slick-index</item>
                <item name="data-role" xsi:type="string">data-role</item>
                <item name="data-product-id" xsi:type="string"> data-product-id</item>
                <item name="data-price-box" xsi:type="string">data-price-box</item>
                <item name="aria-hidden" xsi:type="string">aria-hidden</item>
                <item name="data-tab-name" xsi:type="string">data-tab-name</item>
                <item name="data-video-fallback-src" xsi:type="string">data-video-fallback-src</item>
                <item name="data-video-lazy-load" xsi:type="string">data-video-lazy-load</item>
                <item name="data-video-loop" xsi:type="string">data-video-loop</item>
                <item name="data-video-overlay-color" xsi:type="string">data-video-overlay-color</item>
                <item name="data-video-play-only-visible" xsi:type="string">data-video-play-only-visible</item>
                <item name="data-video-src" xsi:type="string">data-video-src</item>
                <item name="href" xsi:type="string">href</item>
                <item name="id" xsi:type="string">id</item>
                <item name="role" xsi:type="string">role</item>
                <item name="style" xsi:type="string">style</item>
                <item name="target" xsi:type="string">target</item>
                <item name="title" xsi:type="string">title</item>
                <item name="img_width" xsi:type="string">img_width</item>
                <item name="img_height" xsi:type="string">img_height</item>
                <item name="img_format" xsi:type="string">img_format</item>
                <item name="img_auto" xsi:type="string">img_auto</item>
                <item name="img_crop" xsi:type="string">img_crop</item>
                <item name="href" xsi:type="string">href</item>
                <item name="download" xsi:type="string">download</item>
                <item name="hreflang" xsi:type="string">hreflang</item>
                <item name="referrerpolicy" xsi:type="string">referrerpolicy</item>
                <item name="ping" xsi:type="string">ping</item>
                <item name="media" xsi:type="string">media</item>
                <item name="data-mage-init" xsi:type="string">data-mage-init</item>
            </argument>
            <argument name="attributesAllowedByTags" xsi:type="array">
                <item name="a" xsi:type="array">
                    <item name="tabindex" xsi:type="string">tabindex</item>
                    <item name="target" xsi:type="string">target</item>
                    <item name="rel" xsi:type="string">rel</item>
                    <item name="href" xsi:type="string">href</item>
                    <item name="download" xsi:type="string">download</item>
                    <item name="hreflang" xsi:type="string">hreflang</item>
                    <item name="referrerpolicy" xsi:type="string">referrerpolicy</item>
                    <item name="ping" xsi:type="string">ping</item>
                    <item name="media" xsi:type="string">media</item>
                </item>
                <item name="img" xsi:type="array">
                    <item name="src" xsi:type="string">src</item>
                    <item name="alt" xsi:type="string">alt</item>
                    <item name="title" xsi:type="string">title</item>
                    <item name="img_width" xsi:type="string">imgix_width</item>
                    <item name="img_height" xsi:type="string">imgix_height</item>
                    <item name="img_format" xsi:type="string">imgix_format</item>
                    <item name="img_auto" xsi:type="string">imgix_auto</item>
                    <item name="img_crop" xsi:type="string">imgix_crop</item>
                </item>
                <item name="iframe" xsi:type="array">
                    <item name="allowfullscreen" xsi:type="string">allowfullscreen</item>
                    <item name="autoplay" xsi:type="string">autoplay</item>
                    <item name="frameborder" xsi:type="string">frameborder</item>
                    <item name="muted" xsi:type="string">muted</item>
                    <item name="src" xsi:type="string">src</item>
                </item>
                <item name="style" xsi:type="array">
                    <item name="data-style-id" xsi:type="string">data-style-id</item>
                </item>
                <item name="div" xsi:type="array">
                  <item name="html" xsi:type="object">Magento\PageBuilder\Model\Validator\InnerHtmlValidator</item>
                <item name="data-mage-init" xsi:type="string">data-mage-init</item>
            </item>
                <item name="ul" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            <item name="ol" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            <item name="li" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            <item name="dl" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            <item name="dd" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            <item name="dt" xsi:type="array">
                <item name="id" xsi:type="string">id</item>
                <item name="class" xsi:type="string">class</item>
            </item>
            </argument>
            <argument name="attributeValidators" xsi:type="array">
                <item name="src" xsi:type="array">
                    <item name="iframe-src" xsi:type="object">Magento\PageBuilder\Model\Validator\IframeSrcAttributeValidator</item>
                </item>
            </argument>
            <argument name="tagValidators" xsi:type="array">
                <item name="div" xsi:type="array">
                    <item name="html" xsi:type="object">Magento\PageBuilder\Model\Validator\InnerHtmlValidator</item>            
                    <item name="data-mage-init" xsi:type="string">data-mage-init</item>
                </item>
             </argument>
        </arguments>
    </virtualType>
</config>

in di.xml file, I have added <item name="figcaption" xsi:type="string">figcaption</item> to allowedTags attribute. You can add tag attribute which you want.

Also you can add extraa image tag attributes. Like <img src="example.jpg" custom_width="150" custom_height="150"/> to attributesAllowedByTags for img tag.

Improve this answer
3
  • The di.xml generates an "Class Magento\PageBuilder\Model\Validator\InnerHtmlValidator does not exist" exception. And when commented out it gives a similar exception for IframeSrcAttributeValidator. (Working on a 2.3.7 version shop.)
    – Sl4rtib4rtf4st
    Feb 8 at 10:08
  • @Sl4rtib4rtf4st, It's working on magento 2.4.3 instance
    – Dipak Prajapati
    Feb 9 at 6:06
  • So you mean that the difference between 2.3.7 and 2.4.3 are enough to make this not a viable solution in a 2.3.7 shop? If so what would be the 2.3.7 equivalent of this solution?
    – Sl4rtib4rtf4st
    Feb 10 at 19:19
0

I have to give a quick and dirty answer, so I apologize ahead of time. I believe you are correct about it showing up after you upgraded Magento. The editor in the new version probably does not allow some Html elements you have from the previous version. For me, the TinyMCE text editor no longer has superscript formatting and does not allow <sup> tags. I would drill down in the content to find your specific element. In case, I will extend the editor to add superscript and allow this element:

https://devdocs.magento.com/guides/v2.4/ui_comp_guide/components/wysiwyg/configure-tinymce-editor.html

Improve this answer
0

I am using 2.4.3 version of magento open source and I am getting above error as below:

Content HTML contains restricted elements. Allowed HTML tags are: div, a, p, span, em, strong, ul, li, ol, h5, h4, h3, h2, h1, table, tbody, tr, td, th, tfoot, img, hr, figure, button, i, u, br, b, iframe, style, pre

Please help me to fix this.

Improve this answer
2

Not the answer you're looking for? Browse other questions tagged or ask your own question.