深入理解 Websocket 協議，常見攻擊手法及防護策略

Websocket 是主流的即時通訊協定，在這裡將針對過去的一些經驗，介紹關於 Websocket 的一些內部網路技術原理，以及如何防禦攻擊的做法進行說明。

SRI (Subresource Integrity) 是一個透過瀏覽器驗證引用的第三方資源，確保內容沒有被串改。

例如，我們常會引用第三方的 CDN 來源，以加快請求的時間。但由於 CDN 來源分散，難以進行定位，若其中一個來源節點受到劫持，可能會發生隨機的劫持，並且難以重複呈現，用戶刷新頁面後，就無法再重現。

這裡針對即時通訊架構，即時連線心跳檢測原理是什麼？各種配置機制的好與壞？以及如何提供穩定的連線品質，針對過去一些經驗進行分享～

RESTful API 介紹及經驗分享

在現在系統開發，RESTful 無疑是 API 溝通的主流之一，在這裏，主要針對我個人對於 RESTful API 使用狀態及理解做一個分享。

REST 是一個設計風格，全名為 Representational State Transfer (表現層狀態轉換)是在 2000 年，由 Roy Thomas Fielding 所提出來的一種軟體架構風格，用於定義資源及管理資源。

RESTful 則是基於 REST 的一種設計風格，而不是原則！

一般API呼叫方式，主要可有兩部分：通訊協議及序列化

Vue - VSCode 基本配置 ESLine & Prettier 代碼自動風格化

這裡記錄 Vue 初始設定會用到的一些基本設定

包括語法亮潔以及代碼自動風格化設定．

另外會提到如何在 VSCode settings.json 設定儲存自動將語法進行整理，風格化

在這裡要探討關於 node 到底適不適合在正式環境運行，在一開場首先說明我**“過去”**對於這個問題的看法，答案是：不適合。

原因在於，過去有見過幾個專案是由 node 開發，最終都因為穩定性不佳造成極大的損失的案例

當然，這經驗確實是我常建議團隊不要輕易決定使用 node 的原因。

事實上，為什麼 node 不適合在正式環境運行。針對這個問題其實真的探討過的人很少。

這裡參考 Burke Holland 所彙整的一些方法，進行來聊聊這個議題：

首先，關於造成 node 不適合的一些狀況進行探討：

如果透過 Express server 直接運行主機環境

CSS 限制內容字數寬度或行數，超過顯示刪節號…

簡單記錄透過 CSS 來限制字數寬度或行數做法，可以將長篇的文章進行截斷，並且結尾以點點點方式呈現

在版面需要對其實，是相當好用的方式。

Electron forge 啟動安裝

Electron 可以用來將 HTML, CSS, Javascript 建構成桌面應用軟體

並且可以支援不同的平台，像是 windows, Mac, Linux….

在運行過程，主要透過 Chromium 及 NodeJS 來讓 HTML, CSS, JS 運作

如果，是透過原生的 Electron ，想要結合目前流行的前端框架，像是 Vue, React, Angular

Json Hijacking 簡介

Json Hijacking 是一項已經存在多年的安全漏洞，目前各大主流瀏覽器都已經修補

這裡進行說明，什麼是 Json Hijacking 以及防範方式：

前端 vue 開發準則

為了讓其他開發者也能理解你每一行程式碼的涵義及作用 在建構程式時，盡力打造清晰直觀的架構，讓程式更容易維護及重構 有關傳遞相關的參數，應該避免過度複雜，避免我們無法直覺看出它的功能

方法一、更新 nodejs 至最新版

更新方式

sudo npm cache clean -f
sudo npm install -g n
sudo n stable

手機瀏覽器開啟APP ，或者導向App Store or Google Play下載

若使用者有安裝APP，則自動啟用，若無安裝，則導向下載頁面。

在 iOS 之前，如果要從各種瀏覽器啟動APP，都必須透過 URI Scheme

在 iOS9 之後的版本，只要你的應用程式支援 Universal Links(通用連結)，就可以直接透過HTTP來啟動APP (在此不討論Universal Links)

下表格分別比較幾種瀏覽器啟動APP的方式:

(來源: http://harttle.land)

Best way

Use mobile-detect.js to check iOS, device… is recommended.

But, if you wanna a easy way to detect mobile and iOS, you can start with :

Detect Mobile Device

推薦的方式

判斷移動裝置或版本的最佳方式，還是建議使用完整的 Library

mobile-detect.js

若你需要一個快速可以套用在現成專案的作法，則可以參考下方:

判斷移動裝置

雖然這個判斷無法完全涵蓋所有移動裝置，仍適用於各主流的裝置

Highcharts Error #15 原因 發生這個錯誤的原因是因為 Highcharts 預期資料應該已排序過 若輸入的資料中， x 軸沒有進行由小到大(asc)排序 就會出現Error #15 解決方式 (1) 若 Highcharts 需要倒序顯示 Highcharts 倒序 order desc 的方式顯示資料 在 xAxis 或 yAxis 只要加上 reversed: true 就可以倒序顯示

var myObject = Data.toJSON(); console.log(myObject); If we just right click and save console object, something will wrong as fellowing script.js:393 (64805) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …] Just stringify your object, console and save again

Browsing the Chrome Application Location Change directory to Chrome and Press Enter cd c:\Program Files (x86)\Google\Chrome\Application Enable logging Type in the following and Press Enter This will open a new browser page, and open your site to create console.

Whem Ionic error happened: Error: connect ETIMEDOUT 34.196.18.91:443 at Object._errnoException (util.js:1022:11) at _exceptionWithHostPort (util.js:1044:20) at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1198:14) Try Fellowing solution: PROXY=http://proxy.yourcompany.com:8080 ionic start Whem running command, will auto detect some package should be installed

npm ERR! network If you are behind a proxy This is a problem related to network connectivity. In most cases you are behind a proxy or have bad network settings. If you are behind a proxy, please make sure that the ‘proxy’ config is set properly.

CSS Grid 是一個 layout framework，

雖然多數新屬性僅有主流瀏覽器版本才有支援，但是具有未來性的東西，還是值得學，將陸續整理一些相關介紹及用法

這裡Grid建構原型相關圖片及範例主要參考自 Per Harald Borgen 這篇，有興趣的話，可以看看原始全文內容，介紹會更加詳細

接下來，開始介紹如何使用 Grid 建構原型