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>