如何在不影响asp.net默认安全性的前提下使用ckeditor/fckeditor?

asp.net默认情况下,不允许提交包含html源代码的表单,这在很大程度上防止了跨站(提交)攻击,但是ckeditor/fckeditor之类的富文本编辑器肯定是要生成html源代码的,如何解决这个矛盾?

通常的办法是修改web.config

asp.net2.0/3/3.5时可以这样做:

<pages validateRequest="false"></pages>

asp.net4.0下,这样还不够,必须写成这样:

<pages validateRequest="false"></pages>
<httpRuntime requestValidationMode="2.0"/>

这样虽然解决了问题,但是同时也降低了安全性,如何在不降低asp.net默认安全性的前提下使用ckeditor/fckeditor?

思路: 客户端--表单中增加一个隐藏域,提交时先把ckeditor/fck的内容用url编码后,赋值给该隐藏域,然后清空ckeditor/fck,再提交,这样提交过去的内容就不包含html源代码了。

服务端--接收该隐藏域的值做为ckeditor的内容,同时接收时先url解码

代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ckeditor_demo.Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="js/sample.js"></script>
    <link type="text/css" rel="stylesheet" href="css/sample.css" />
</head>
<body>
    <form id="form1" runat="server">
    <div id="alerts">
        <noscript>
            <p>
                <strong>CKEditor需要JavaScript支持才能运行!</strong>如果您的浏览器不支持或禁止运行Javascript,您只能用常规方式在普通文本输入框里编辑html代码
            </p>
        </noscript>
    </div>
    <textarea class="ckeditor" cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="http://ckeditor.com/">CKEditor</a>.</p></textarea>
    <input type="hidden" id="_editor1" name="_editor1" value="" />
    <br />
    <input type="button" value="获取编辑器html内容" onclick="getData()" />
    <input type="button" value="设置编辑器html内容" onclick="setData()" />
    <input type="button" value="设置焦点" onclick="setFocus()" />
    <input type="submit" value=" 提 交 " onclick="return onSubmit(this)" />
    <hr/>
    <asp:Label runat="server" ID="lblMsg"></asp:Label>
    </form>
    <script type="text/javascript">
        //获取ckeditor内容
        function getData() {
            var editor = CKEDITOR.instances.editor1;
            alert(editor.getData());
        }

        //设置ckeditor内容
        function setData() {
            var editor = CKEDITOR.instances.editor1;
            var _content = "<div style='color:red'>红色字体</div>";
            editor.setData(CKEDITOR.tools.htmlEncode(_content));//这里调用了ckeditor工具库的htmlEncode方法
        }

        //设置ckeditor的焦点,并高亮背景显示
        function setFocus() {
            var editor = CKEDITOR.instances.editor1;
            editor.focus();
            editor.document.$.body.style.cssText = "background-color:#ff9";
        }

        //点击提交时
        function onSubmit(btn) {
            var editor = CKEDITOR.instances.editor1;
            var editor1 = document.getElementById("editor1");

            if (editor.getData().length == 0) {
                alert("请输入详细介绍!");
                editor.focus();
                editor.document.$.body.style.cssText = "background-color:#ff9";
                return false;
            }
            else {
                var _editor1 = document.getElementById("_editor1");
                _editor1.value = encodeURIComponent(editor.getData());
                editor.setData("");//清空ckeditor
                setTimeout(doSubmit, 200); //延时0.2秒再提交,否则ckeditor会报js出错,原因不明(估计是ckeditor设置内容后,还要执行其它回调函数代码,所以这时马上提交的话,某些代码还没完成,延时等待代码执行完成后,再提交就可以了)
                btn.disabled = true;//提交按钮设置为不可用,防止重复提交               
            }
            return false;
        }

        function doSubmit() {            
            document.forms[0].submit();            
        }

    </script>
</body>
</html>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏BestSDK

开发微信小程序,必知的40个小技巧

微信小程序开发者和开发需求者必读的40条技巧分享: Q:为什么脚本内不能使用window等对象 A:页面的脚本逻辑是在JsCore中运行,JsCore是一个没有...

63430
来自专栏极乐技术社区

极乐问答No.2 | 微信小程序开发40问

导语 微信小程序开发者和开发需求者必读,内容涵盖小程序开发实战需要注意的40个技术点,供大家参考: ? 问答 Q Q1:为什么脚本内不能使用window等对象 ...

31580
来自专栏Python攻城狮

Django教程(二)- Django视图与网址进阶1. HTML表单2.CSRF3.代码操作

HTML 表单用于搜集不同类型的用户输入。 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、...

10740
来自专栏向治洪

webpack+react环境搭建

前言 我们知道前端的框架纷繁复杂,各有各的优点。而我们选择使用React作为开发框架的时候,往往会选择Webpack+Babel+React来开始我们的项目。之...

23470
来自专栏葡萄城控件技术团队

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2)...

22360
来自专栏Python小屋

Python批量导入图片生成PowerPoint 2007+文件

使用方法:安装扩展库python-pptx,然后把上文中抓取的图片和本程序放在同一个文件夹。 import os import pptx from pptx.u...

33630
来自专栏源码之家

DEDEcms 采集规则批量修改替换

2、从phpmyadmin中导出表dede_co_note,导出格式可选为CSV。

26610
来自专栏GIS讲堂

Arcgis Server服务中rest服务和wms服务的对应关系

我们在用Arcgis Server发布服务时,会发布Mapserver的同时发布Wmsserver服务,但是,调用的图层的顺序却相反,本文从几个例子详细介绍下r...

22440
来自专栏HaHack

学习 React Native for Android:环境搭建

11920
来自专栏SDNLAB

【每日播报】如何升级Mininet的Open vSwitch版本

因为Mininet的方便且易用,以及实验条件及真实设备的不足,它已经被越来越多的SDN学习者使用。但在Mininet使用中,安装使用的内置Open vSwitc...

40450

扫码关注云+社区

领取腾讯云代金券