Javascript

Browserify 入門

本文是依據 Browserify 官網及網路參考資料逐步學習記錄的內容

Browserify 讓我們可以在瀏覽器中使用Node.js 風格的模組,不管是 AMD / CMD / ES6 …..風格的模塊化,它都能認識,並且編譯成瀏覽器認識的JS。

Browserify 運作的方式,會先在代碼中以靜態分析(static analysis)搜尋有調用 require()的內容,彙整出調用依賴關係圖(dependency graph),並且將關鍵字解析成路徑,然後根據路徑找到檔案, 接著,檔案會被打包(bundle)成單一獨立的 javascript 檔案,讓你可以直接在網頁中直接使用。 並且,打包的檔案預設都會使用嚴格模式 ```use

接下來,開始介紹 Browserify 安裝方式及用法說明:

Continue Reading

nodejs Cannot find module xxx 解法

在使用 nodejs ,時常遇到版本無法支援的狀況,導致會出現找不到相關模組的情況

例如: Cannot find module ‘github-url-from-git’

處理的方式分別有以下幾種

Continue Reading

單頁應用程式的登入權限驗證 - 開源標準規範 JSON Web Tokens

在一頁式網頁架設登入系統通常是一件非常麻煩棘手的事情,

在一開始要思考的是該挑選哪個主流框架 Angular、React或Vue…

然後開始建立一個前後端分離的架構,只透過RESTful API來進行溝通,

在這樣的架構下,搭建CMS相當容易,前端通常只需要取得資料後,進行render出來即可,

##SESSION BASE 無用武之地 如果要建設會員或管理者權限功能,傳統 session-based 的權限登入方式相當簡單,

但是在透過 RESTful API 應用的框架中,session-based的方式則行不通,

此外,單純使用SESSION的情況,也必須解決資料跨 Server 的問題

Token

Token是一串加密字串,並儲存在前端, 當使用者再次操作時,就能在後端從資料庫中比對token, 檢查是否為有效的使用者, 但是這樣的查詢也會產生伺服器的負擔

Continue Reading

瀏覽器語言偵測

Language of the browser: zh-TW

var x = "Language of the browser: " + navigator.language;

var txt = "";
txt += "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt += "<p>Browser Name: " + navigator.appName + "</p>";
txt += "<p>Browser Version: " + navigator.appVersion + "</p>";
txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt += "<p>Browser Language: " + navigator.language + "</p>";
txt += "<p>Browser Online: " + navigator.onLine + "</p>";
txt += "<p>Platform: " + navigator.platform + "</p>";
txt += "<p>User-agent header: " + navigator.userAgent + "</p>";
<script type=text/javascript>
        // if( (/http\:\/\/t\.smartisan\.com\/smartisan\/modules\/index\/\#\/$/g).test(location.href)) {
        if( (/http\:\/\/www\.smartisan\.com.$/g).test(location.href) || (/http\:\/\/www\.smartisan\.com\/\#\/$/g).test(location.href)) {
            // ['ja', 'en-GB', 'en', 'en-US', 'fr', 'es', 'ko', 'de'];
            // 首页,如果是英文环境,则跳到 en
            if((/en/gi).test(navigator.language)) {
                location.href = 'http://www.smartisan.com/en/';
            }
            // 首页,如果是日文环境,则跳到 jp
            else if((/(jp|ja)/gi).test(navigator.language)){
                location.href = 'http://www.smartisan.com/jp/';
            }
        }
    </script>

Continue Reading

基本型態 Typescript - Basic Types [中文]

安裝typescript

npm install -g typescript

接著測試看看是否能正常運作 先建立一個 helloworld.ts 內容寫入

let hi: string = "helloworld";

接著在下指令

tsc helloworld.ts

如果有產生一個對應的helloworld.js 那就代表能正常運作

var hi = "helloworld";

#Basic Types 紀錄一些Typescipt基本型態用法,主要參考自Typescript官網 Basic Types https://www.typescriptlang.org/docs/handbook/basic-types.html

##Boolean

let isDone: boolean = false;

##Number 在typescirpt中,所有numbers都是以符點數來表示,因此可以支援十六進位、十進位、八進位、二進位數值格式。

let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;

Continue Reading

Content Security Policy 內容安全策略

https://www.smashingmagazine.com/2016/09/content-security-policy-your-future-best-friend/ http://www.ruanyifeng.com/blog/2016/09/csp.html

Content Security Policy - 簡稱 CSP,是一個瀏覽器安全保護使用者的策略。

主要用於降低 cross-site scripting (XSS) 的風險。

網站傳送Header時﹑夾帶 CSP header 告訴瀏覽器哪些是合法的內容,哪些是不合法的。

在基本的規則中,Header meta name 命名為 Content-Security-Policy 接下來就可以定義規則 定義的方式可以依照你使用的環境及語法而定 首先可以直接使用HTML meta的方式來定義 例如:

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

也可以透過 HTTP 的header訊息 : Content-Security-Policy 這裡主要會針對PHP header的方式來定義 這裡是一個PHP範例:

<?php
    header("Content-Security-Policy: <your directives>");
?>

通常,在定義CSP規則時,可以定義合法的圖片來源、script 來源、css來源、iframe來源 當然,也可以直接讓本文的script合法,但不建議這樣處理。例如,我們會再本頁HTML中用