#8836: Adding configurable script tag sanitization by adding valid elements as a configurable site setting for TinyMCE (Lombiq Technologies: ORCH-307) (#8872)

* Adding valid elements site setting for TinyMCE, we would like to configure script tag sanitization

* Adding better hint text for valid elements site setting in TinyMCE

* Code styling for TinyMCE

* Fixing alphabet for TinyMCE

* A bit of rewording in Valid Elements hints [skip ci]

---------

Co-authored-by: Benedek Farkas <benedek.farkas@lombiq.com>

src/Orchard.Web/Modules/TinyMce/Handlers/TinyMceSettingsPartHandler.cs

@@ -0,0 +1,27 @@
+using Orchard.ContentManagement;
+using Orchard.ContentManagement.Handlers;
+using Orchard.Localization;
+using TinyMce.Models;
+
+namespace TinyMce.Handlers
+{
+    public class TinyMceSettingsPartHandler : ContentHandler
+    {
+        public TinyMceSettingsPartHandler()
+        {
+            T = NullLocalizer.Instance;
+            Filters.Add(new ActivatingFilter<TinyMceSettingsPart>("Site"));
+            Filters.Add(new TemplateFilterForPart<TinyMceSettingsPart>("TinyMceSettings", "Parts.TinyMce.TinyMceSettings", "TinyMCE"));
+        }
+
+        public Localizer T { get; set; }
+
+        protected override void GetItemMetadata(GetContentItemMetadataContext context)
+        {
+            if (context.ContentItem.ContentType != "Site")
+                return;
+            base.GetItemMetadata(context);
+            context.Metadata.EditorGroupInfo.Add(new GroupInfo(T("TinyMCE")));
+        }
+    }
+}

src/Orchard.Web/Modules/TinyMce/Models/TinyMceSettingsPart.cs

@@ -0,0 +1,13 @@
+using Orchard.ContentManagement;
+
+namespace TinyMce.Models
+{
+    public class TinyMceSettingsPart : ContentPart
+    {
+        public string ValidElements
+        {
+            get { return this.Retrieve(x => x.ValidElements); }
+            set { this.Store(x => x.ValidElements, value); }
+        }
+    }
+}

src/Orchard.Web/Modules/TinyMce/Scripts/orchard-tinymce.js

@@ -24,9 +24,7 @@ tinyMCE.init({
     ],
     toolbar: "undo redo cut copy paste | bold italic | bullist numlist outdent indent formatselect | alignleft aligncenter alignright alignjustify ltr rtl | " + mediaPlugins + " link " + contentPickerButtons + " unlink charmap | code htmlsnippetsbutton fullscreen",
     convert_urls: false,
-    valid_elements: "*[*]",
-    // Shouldn't be needed due to the valid_elements setting, but TinyMCE would strip script.src without it.
-    extended_valid_elements: "script[type|defer|src|language]",
+    valid_elements: validElements,
     //menubar: false,
     //statusbar: false,
     skin: "orchardlightgray",

src/Orchard.Web/Modules/TinyMce/TinyMce.csproj

@@ -313,6 +313,8 @@
     <Content Include="Scripts\tinymce.min.js" />
   </ItemGroup>
   <ItemGroup>
+    <Compile Include="Handlers\TinyMceSettingsPartHandler.cs" />
+    <Compile Include="Models\TinyMceSettingsPart.cs" />
     <Compile Include="ResourceManifest.cs" />
     <Compile Include="Properties\AssemblyInfo.cs" />
     <Compile Include="Services\TinyMceShapeDisplayEvent.cs" />
@@ -381,6 +383,7 @@
   <ItemGroup>
     <None Include="packages.config" />
     <Content Include="Views\DefinitionTemplates\ContentLinksSettings.cshtml" />
+    <Content Include="Views\EditorTemplates\Parts.TinyMce.TinyMceSettings.cshtml" />
   </ItemGroup>
   <ItemGroup />
   <PropertyGroup>

src/Orchard.Web/Modules/TinyMce/Views/Body-Html.Editor.cshtml

@@ -3,11 +3,13 @@
 @using Orchard.Environment.Descriptor.Models
 @using Orchard.Localization
 @using Orchard.Mvc.Extensions
+@using TinyMce.Models
 @using TinyMce.Settings
 @{
     var propertyName = Model.PropertyName != null ? (string)Model.PropertyName : "Text";
     var shellDescriptor = WorkContext.Resolve<ShellDescriptor>();
     var urlPrefix = WorkContext.Resolve<ShellSettings>().RequestUrlPrefix;
+    var validElements = WorkContext.CurrentSite.As<TinyMceSettingsPart>().ValidElements;
     if (!string.IsNullOrWhiteSpace(urlPrefix)) {
         urlPrefix += "/";
     }
@@ -33,6 +35,7 @@
     var mediaLibraryEnabled = @(shellDescriptor.Features.Any(x => x.Name == "Orchard.MediaLibrary") ? "true" : "false");
     var contenPickerEnabled= @(shellDescriptor.Features.Any(x => x.Name == "Orchard.ContentPicker") ? "true" : "false");
     var tokensHtmlFilterEnabled= @(shellDescriptor.Features.Any(x => x.Name == "Orchard.Tokens.HtmlFilter") ? "true" : "false");
+    var validElements = "@validElements";
     var directionality = "@WorkContext.GetTextDirection((IContent)Model.ContentItem)";
     var language = "@Model.Language";
     var autofocus = "@(Model.AutoFocus == true ? ViewData.TemplateInfo.GetFullHtmlFieldId(propertyName) : null)";

src/Orchard.Web/Modules/TinyMce/Views/EditorTemplates/Parts.TinyMce.TinyMceSettings.cshtml

@@ -0,0 +1,12 @@
+@model TinyMce.Models.TinyMceSettingsPart
+
+<fieldset>
+    <legend>@T("TinyMCE")</legend>
+    <div>
+        <label for="@Html.IdFor(m => m.ValidElements)">@T("Valid Elements")</label>
+        @Html.TextBoxFor(m => m.ValidElements, new { @class = "text large" })
+        <span class="hint">@T("Refer to the <a href=\"https://www.tiny.cloud/docs/tinymce/6/content-filtering/#valid_elements\">TinyMCE documentation</a> on configuring allowed elements.")</span>
+        <span class="hint">@T("<br/>By default, TinyMCE sanitizes input and removes all script tags for security. To restore the same behavior as prior to Orchard 1.11 instead, set this value to \"*[*],script[type|defer|src|language]\".")</span>
+        <span class="hint">@T("NOTE: This will allow every element with every attribute, and explicitly adds support for script tags, including the type, defer, src, and language attributes. Be aware that this completely disables HTML sanitization and should only be used in trusted environments.")</span>
+    </div>
+</fieldset>