Question

我写了这段代码，在ASP页面上使用 TinyMCE （javascript＆＃34; richtext＆＃34;编辑器）。 ASP页面本身包含一个名为＆＃34; art_content ＆＃34;的文本框，它生成一个ClientID，如＆＃34; ctl00_hold_selectionblock_art_content ＆＃34;。

我遇到的一个问题是制作一个安全的＆＃34;我的应用程序存储的代码，当我转到客户端时加载回HTML，然后它返回到它的安全＆＃34;提交（或回发）之前的模式，以防止服务器端的HTML检查错误。

我的Javascript似乎工作正常，但我还是得到了错误。虽然功能正在触发，但它看起来似乎无法正常工作。

帮助！

tinymce.init
(
  {
    selector:'#ctl00_hold_selectionblock_art_content',
    plugins:
      ['table link image textcolor pagebreak code visualblocks charmap'],
    toolbar:
      'bold,italic,underline'
  }
);
function SafeCms(text,encode)
{
  if(encode)
  {
    text=text.replaceAll('<','{{');
    text=text.replaceAll('>','}}');
  }
  else
  {
    text=text.replaceAll('{{','<');
    text=text.replaceAll('}}','>');
  }
  return text;
}
$(document).ready
(
  function()
  {
$('#ctl00_hold_selectionblock_art_content').val(SafeCms($('#ctl00_hold_selectionblock_art_content').val(),false));
    $("form").submit
    (
      function()
      {
        tinymce.triggerSave();
        $('#ctl00_hold_selectionblock_art_content').val(SafeCms($('#ctl00_hold_selectionblock_art_content').val(),true));
      }
    );
  }
);

更新：服务器端（页面）显示错误

A potentially dangerous Request.Form value was detected from the client (ctl00$hold$selectionblock$art_content="<p>ab<em>acac</em>ac...").

CallStack:
[HttpRequestValidationException (0x80004005): Um valor possivelmente perigoso Request.Form foi detectado no cliente (ctl00$hold$selectionblock$art_content="<p>ab<em>acac</em>ac...").]
  System.Web.HttpRequest.ValidateString(String s, String valueName, String collectionName) +8818818
  System.Web.HttpRequest.ValidateNameValueCollection(NameValueCollection nvc, String collectionName) +111
  System.Web.HttpRequest.get_Form() +129
  System.Web.HttpRequest.get_HasForm() +8818919
  System.Web.UI.Page.GetCollectionBasedOnMethod(Boolean dontReturnNull) +97
  System.Web.UI.Page.DeterminePostBackMode() +63
  System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +6785
  System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +242
  System.Web.UI.Page.ProcessRequest() +80
  System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context) +21
  System.Web.UI.Page.ProcessRequest(HttpContext context) +49
  ASP.content_quality_knownledges_aspx.ProcessRequest(HttpContext context) in c:\Users\Sammuel\AppData\Local\Temp\Temporary ASP.NET Files\root\a3cdd555\dbee70c6\App_Web_e_7yzdu3.2.cs:0
  System.Web.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute() +181
  System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously) +75

Answer 1

根据this article的建议，您可以从SaveContent事件的编辑器内容中删除有问题的HTML字符。如有必要，您可以在BeforeSetContent事件中恢复它们。

对于TinyMCE 4，您可以使用以下代码：

tinymce.init({
    selector: '#ctl00_hold_selectionblock_art_content',
    plugins: ['table link image textcolor pagebreak code visualblocks charmap'],
    toolbar: 'bold,italic,underline',
    setup: function (editor) {
        editor.on("SaveContent", function (e) {
            e.content = SafeCms(e.content, true);
        });
        editor.on('BeforeSetContent', function (e) {
            e.content = SafeCms(e.content, false);
        });
    }
});

function SafeCms(text, encode) {
    if (encode) {
        return text.replace(/</g, '{{').replace(/>/g, '}}');
    }
    else {
        return text.replace(/{{/g, '<').replace(/}}/g, '>');
    }
}

我将replace与SafeCms中的正则表达式一起使用，而不是replaceAll（默认情况下在Javascript中不存在）。

Answer 2

我在web.config添加：

中遇到了这个问题

<system.web>
    <pages validateRequest="false" />
</system.web>

如果您使用.net 4.0，请务必在web.config

中添加此内容

<httpRuntime requestValidationMode="2.0" />

Answer 3

实际上，您不需要手动替换字符，因为安全问题，您可能总是会遇到您没有想到的特殊情况和ASP.NET阻止。

我认为最好的选择是对内容进行编码，然后对服务器端进行解码。

我将我的TinyMCE内容复制到一个不可见的文本框中（因此用户不会在他的HTML编辑器中看到编码的内容）

function encodeContent(copyToId, htmlContent) {
    var encodedHtml = encodeURIComponent(htmlContent);
    $('#' + copyToId).val(encodedHtml);
}

然后在服务器端，我只是获取此文本框的内容并对其进行解码

var decodedHtml = HttpUtility.UrlDecode(this.TextBoxNewContent.Text);

我不知道你是如何初始化你的TinyMCE的，但是我个人将它包装在我注册用Page_PreRender方法调用的JS函数中。实际上，我还有更多参数，这里有一个简化的代码：

protected void Page_PreRender(object sender, EventArgs e)
{
    var script = "createHtmlEditor('"
       + this.tinyMceEditor.ClientID + "','"
       + this.TextBoxNewContent.ClientID + "');";

    var scriptId = "createHtmlEditor_" + this.tinyMceEditor.ClientID;
    ScriptManager.RegisterStartupScript(this, this.GetType(), scriptId, script, true);
}

encodeURIComponent是本机JavaScript函数，HttpUtility静态类位于System.Web命名空间

注意：当我说＆＃34;隐形＆＃34; textbox我在谈论CSS隐形。因为在ASP.NET Visibility="false"中会导致您的HTML元素无法创建！

在ASP.NET页面中使用TinyMCE编辑器进行回发

3 个答案: