tedshd's DevNote

Develop & Design Note by Ted

JavaScript - get text from dom object not include wrap html tag in child

JavaScript - get text from dom object not include wrap html tag in child

Intro

Case 1
<div id="case_1">
    Hi, This is a <em>Apple</em>
</div>

I want to get Hi, This is a

Case 2
<div id="case_2">
    <p>I have a pen.</p>PPAP
</div>

I want to get PPAP

Case 3
<div id="case_3">
    Apple<span> and pen</span> and pineapple pen
</div>

I want to get Apple and and pineapple pen

Than you can use this

function parseText(dom) {
    if (dom.length) {
        console.warn('This is a domlist');
        return;
    }
    var dom = dom.childNodes,
        list = [];
    for(var x = 0;  x< dom.length;x++) {
        if (dom[x].nodeType === 3) {
            var textContent = dom[x].nodeValue,
                matchWrap = textContent.match(/\n +/);
            if (matchWrap) {
                textContent = textContent.replace(matchWrap, '');
            }
            if (textContent) {
                list.push(textContent);
            }
        }
    }
    return list;
}

You also can use filter handle for loop

demo

Refer - Array.prototype.filter()

Content Security Policy - 論一般網站放置的可行性

Content Security Policy - 論一般網站放置的可行性

前言

Content Security Policy 出來也有一段時間了

他的目的是為了從 header 下手去抵禦一些攻擊, 基本上遵循它的rule 就可以避掉一些 XSS 攻擊

但有時加入這功能會需要變動程式的架構或者某些性質的服務是根本就是設定到可以動的話安全係數會降低許多

這裏會稍微舉一些例子來說明

關於 Content Security Policy 以下有一些連結可以幫助瞭解這個 header

Refer - An Introduction to Content Security Policy

Refer - Content Security Policy 入门教程

Refer - Content-Security-Policy - HTTP Headers 的資安議題 (2)

Refer - Content Security Policy Reference

目前有只用的知名服務有 githubdropbox

簡介

簡單說就是會限制頁面上出現的東西

  • domain
  • inline style
  • inline script
  • iframe, frame
  • object
  • https

可以用 html <meta> 或用 http header 的方式使用, 所以純靜態網頁也是可以用的

但有個限制是用 <meta> 的方式就不能用 frame-ancestors

還有需注意的是 <body onload="console.log('load')"></div><a href="javascript:void(0);"></a> 這種也是 inline script

a 的例子可以在 click 時用 e.preventDefault(); 避掉

這裏會著重在 iframe 的限制, 因為其他的部分上面參考文章都有詳細的說明, 但關於 iframe 卻沒有較詳細的說明

且發現在實作上跟限制 iframe 有關的設定, 在不同 browser 也有差, 甚至與 Content Security Policy Reference 都還有差異

以下是用 chrome 52, safari 9.1.3, firefox 48.0.2 測試的結果

  1. frame-src 雖然被捨棄建議用 child-src 但 safari 不支援, 所以還是得用(把他跟 child-src 設定一樣即可)

  2. frame-ancestors 還沒支援很多 browser, 建議還是加上 X-Frame-Options 的方式來達到兼容(什麼是 X-Frame-Options?)

  3. 每個頁面是吃該頁面的 header 的 CSP 設定, 所以 iframe 是吃 iframe 自己 header 的設定

  4. 基本上放 Google 廣告聯播網的要另外處理因為程式碼如下圖, 但可以把它放到 iframe 隔離獨自處理(但曝光和點擊需測試一下 經測試是有計算到的

以下是範例可以玩玩看

github demo code

最後可能有人有疑問那用 browser 的 devtool 去操作 js 改動頁面或執行 js, CSP 可以擋得住嗎?

擋不住啊, 因為 CSP 是 header, 它在 response 時檢查 header 去了解之後進來的 content 必須符合 CSP 的設定, 不然就擋掉 ,當然沒辦法管已經載完的頁面你要怎麼用 devtool 玩頁面都無法阻擋

JavaScript - touch and click behavior in mobile browser

JavaScript - touch and click behavior in mobile browser

On mobile web

If you click it

And mobile browser can fire touchstart and click

Fire touchstart event and then fire click event has the difference in time.

the step is touchstart -> click

So if you has a popup and you use touchstart event bind close behavior.

You can find it fire click event.

Then some bug happened.

In this case(suggest use mobile browser)

https://tedshd.io/demo/touch_test.html

When you click close.

Then popup closed.

Because the difference in time.

Then click event fired the popup is closed.

So click event can click a link.

Because the click event is click that position and that position has a link.

So it can click a link.

Solution

  1. Use click bind.

  2. Use e.preventDefault() in touchstart event, but it also can stop fire touchmove and touchend event.

Reference - Ghost clicks in mobile browsers

Sublime Text - How to modify font size in sidebar

Sublime Text - How to modify font size in sidebar

In sublime text 3

If you want modify font size in sidebar

Follow step

  1. Preferences -> Browse Packages
  2. Open User directory
  3. Create a file
  4. File named your theme name
    • How to get it
    • Preferences -> Settings - User -> theme
    • Or default theme Default.sublime-theme
  5. Add content
    [
    {
        "class": "sidebar_label",
        "font.size": 18
    },
    ]
    

other

in Mac the path is

~/Library/Application Support/Sublime Text 3/Packages/User

Reference - Sublime Text 3 how to change the font size of the file sidebar?

gulp - One problem i found when i use CSS minify with some CSS library

gulp - One problem i found when i use CSS minify with some CSS library

When i use pure.

And i use gulp as my front-end build tool.

I used cssmin as my CSS minify tool.

By default it can extreme compress CSS file.

The one problem happen!

display not match

Because use CSS minify can remove inherited CSS property.

So in webkit browser doesn't has display: -webkit-flex; and layout will be an error.

But this is not a bug, it is a feature.

It can avoid inherited CSS property and it can decrease CSS file size.

But in this case, it is not good feature.

So i need add option in my gulp file.

cssmin({
    aggressiveMerging: false
})

It represent to aggressive merging of CSS properties.