2012年9月29日 星期六

Blog中輸入Html程式碼


Google Blog中輸入Html程式碼,他會用htmlencode去轉碼,結果跑出來的變成編碼的資料,因此要自己先動手轉,最簡單的方是就是使用這個工具BloggerPaste,將程式碼轉過後直接貼上即可

但如果我們希望在Blog上顯示漂亮的程式碼,可以增加SyntaxHighlighter這個外掛,增加的方式如下

在設定中的版面配置編輯Html,搜尋<b:skin>,在這個Tag前加入以下代碼
<!-- SyntaxHighlighter  3.0.83-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script type='text/javascript'>
SyntaxHighlighter.all();
</script>

掛上以後不曉得什麼原因,要等一段時間CSS才能夠發生作用,過程中一直在等待csi.gstatic.com,這個似乎是google的統計程式,我去測試別人的網站跑起來卻不會等待那麼久,原本以為是直接使用官網的css跟js檔會比較慢,但我將他掛到自己的網站上也是相同的狀況,後來將Blog上的一些小工具移除,最後發現是我本來掛的這個記數器造成了這個問題flagcounter不過也不清楚為什麼這個會跟Google相衝

使用了SyntaxHighlighter會讓網頁速度下降,如果想要提升載入速度的話,可以參考下面這篇,不過我目前是沒有這樣用
http://dahao.blogspot.tw/2011/08/syntaxhighlighter.html

另外一個提升速度的是人工的去載入自己所需要的js檔即可(應該沒有人會他列表上全部的語言吧..)

如果不想用外掛元件的話,可以使用下面這個網站做簡單的程式碼Format
http://formatmysourcecode.blogspot.tw/

一切備妥後就可以開始使用,使用的方式如下
<pre class="brush: groovy">
<html></htm>
</pre>

這邊要注意所有tag都要進行轉換,使用文章一開始提到的BloggerPaste進行編碼,編碼時要注意,不要把pre也拿進去編碼了

關鍵字
google blog html 語法
blogspot 程式碼
syntaxhighlighter 顯示 速度

參考資料
http://cw1057.blogspot.tw/2011/01/google-html-tags.html
http://save-coco.blogspot.tw/2008/12/test_11.html
http://blog.lyhdev.com/2010/09/bloggersyntaxhighlighter.html
http://hougii.blogspot.tw/2012/05/blog-post_07.html

關於從客戶端中檢測到有潛在危險的 Request.Form 値」之問題

不曉得什麼原因,如果要讓Input可以輸入Html,只需要在頁面上輸入EnableEventValidation="false"即可讓使用者輸入Html
但今天卻碰到,只是輸入EnableEventValidation="false"無效,Google了一下發現,只是輸入這樣原本就是無效的,不曉得為什麼在MoneySave中這樣可以通過
正確的應該是要在頁面上輸入ValidateRequest='false' EnableEventValidation="false"

如下
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" ValidateRequest='false'  EnableEventValidation="false"%>


並且在WebConfig加上以下這段才行

  <system.web>
    <httpRuntime requestValidationMode="2.0" />
  </system.web> 


不過隨著這個打開,也就打開了網頁的被攻擊的大門
如果是搜尋的話,我們使用paramater的方式可以解決
如果是輸入的話,限制輸入的長度也可以避免一些簡單攻擊(還是可以透過proxy的方式來攻擊)
但如果是輸入的Note欄位,不限字數時,那們如果有人是輸入了

<p>test
<img src=""INVALID-IMAGE" onerror='location.href="http://www.yahoo.com.tw/"'>!</p>


(上面那段換行的原因,是因為程式碼的大於符號,在網址後面不曉得什麼原因會轉不回來)
則你會發現顯示那篇文章的頁面在進入後,就會直接轉向www.yahoo.com.tw
因此要更安全的作法就是要將輸入欄位加上
Server.HtmlEncode(edtNote.Text)
這樣使用者輸入html會被轉成文字型態呈現於頁面上
如果像可以輸入網址欄位的話加上上述措施,看起來似乎沒有問題,但實際上還不清楚是否會有漏洞產生
順道一題,如果是網址欄位,如果使用者沒有輸入http://的話,會無法正確連到想要的網址
必須多一道工去補上

string WebSite = "www.yahoo.com.tw";
 if (WebSite != "")
 {
         if (WebSite.IndexOf("http://") == -1)
         {
             WebSite = "http://" + WebSite;
         }
 }
 Label1.Text = WebSite;

關鍵字
限定 html EnableEventValidation="false"
requestValidationMode
偵測 textbox html

參考文章
http://www.coffnet.com/a/xy/20120514/957.html
http://www.cftea.com/c/2011/05/O7TRAOUPLFO8BQKB.asp
http://www.dotblogs.com.tw/jimmyyu/archive/2010/02/28/aspnet-40-extensible-request-validation.aspx
http://hi.baidu.com/sucheng1031/item/b3dc060c74a4107cbee97e58
http://demo.tc/Post/732
http://www.chen-qi.com/?p=331

補充說明
如果有時候使用者輸入了Html我們卻想得到不含Html的乾淨字串,可以用正則表達式做處理
可以參考以下文章
http://demo.tc/Post/281
http://demo.tc/Post/634