JavaScript:URL encode vs HTML escape

前一陣子遇到一個狀況是在 HTML 丟入 url
例如:

<li data-url="http://www.example.com/....">

那次有點被混淆
為什麼是處理 URL 卻要用 類似 PHP htmlspecialchars() 的方法呢?

題外話: JavaScript 沒有類似 PHP htmlspecialchars() 的方法,必須自己實做 escapeHtml function

function escapeHtml(text) {
    return text
        .replace(/&/g, "&amp;")
        .replace(/"/g, "&quot;")
        .replace(/'/g, "'")
        .replace(/</g, "&lt;")
        .replace(/>/g, "&gt;")
}

HTML 需要跳脫特殊字元是因為它本身會去解析  & " ' < >  這五種字元
所以要用在 HTML 裡面就必須經過這個處理(不確定會輸入什麼的地方最好都處理避免意外發生)

URL 的編碼則是為了安全性考量,
ASCII 的控制字元、非 ASCII 字元(例如中文)、保留字都會被編碼成 %HEXHEX 的形式
例如:

http://www.example.com/index.php?u=http://www.example.com/

這樣一個參數 u 也傳了一個 url 的狀況如果不 encode 可能就會造成錯誤

http://www.example.com/index.php?u==http%3A%2F%2Fwww.example.com%2F

所以在一些比較必須的狀況就會看到一堆的 %XX  囉

URL encode 的部分
JavaScript 有三個相關的 function - escape() , encodeURI(), encodeURIComponent()
escape() :不要用,ECMAScript v3 漸漸在淘汰了
不編碼:@*/+

encodeURI() :編碼整條 URL 的話不會連前面 http://www.example.com 的部分都編掉
不編碼:~!@#$&*()=:/,;?+'

encodeURIComponent() :編碼 URL 參數
不編碼:~!*()'

一般的用法應該是要

var myUrl = "http://example.com/index.html?param=1&anotherParam=2";
var myOtherUrl = "http://example.com/index.html?url=" + encodeURIComponent(myUrl);

詳細看這篇 stackoverflow :
http://stackoverflow.com/questions/75980/best-practice-escape-or-encodeuri-encodeuricomponent

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s