DD-WRT – 遮蔽網頁廣告 (使用 DNS 過濾)

Posted on 2018-12-13 by hoyo

Hoyo 的 Vigor2920Vn 掛了，之前移除 WiFi 模組又活了一陣子 (Vigor2920Vn 使用心得備註)，不過這幾天真的不行了，不到一小時就重新開機，只好換回 Buffalo WZR-600DHP2 (Buffalo WZR-600DHP2 韌體刷 dd-wrt)

不過原有的 600DHP2 和 2920Vn 功能上還是有一些落差，首先更新了韌體，接下來就是

IPv6 支援
廣告封鎖

本篇講的是阻擋廣告網址達到封鎖廣告目的

—

使用 DNSMasq 轉發 DNS

設定網址 DNS 對應無效 IP ，環境介紹

路由器型號 Buffalo WZR-600DHP2

韌體版本 DD-WRT v3.0-r36698M std (08/22/18)

Kernel VersionLinux 4.4.151-rc1 #3736 Wed Aug 22 10:05:10 CEST 2018 armv7l

進入 DD-WRT → 伺服器 → 伺服器，根據資料將廣告網址或網域對應到無效或是特殊 IP 即可達到不顯示廣告效果

address=/.googleadservices.com/192.168.0.3

address=/.doubleclick.net/192.168.0.3

address=/.googlesyndication.com/192.168.0.3

address=/vbtrax.com/192.168.0.3

最後必須空一行，編輯器不讓我多一個空白行，使用時多注意

輸入完成後點選「儲存重啟」即可

—

處理 DNS 轉發顯示處理

如果指定的 IP 是 127.0.0.1 那當然就不需要做這個動作，不過出現一個找不到網頁之類的錯誤訊息在原來廣告的區塊內，看了也不自在，所以 Hoyo 的處理是轉到自己的主機後給一個自定義的網頁

DocumentRoot "/WEBSite/192.168.0.3"

ServerName googleads.g.doubleclick.net

ServerAlias www.googleadservices.com

SSLEngine on

SSLProtocol all -SSLv2

SSLCipherSuite HIGH:MEDIUM:!aNULL:!MD5:!SEED:!IDEA

SSLCertificateFile /etc/letsencrypt/live/hoyo.idv.tw/cert.pem

SSLCertificateChainFile /etc/letsencrypt/live/hoyo.idv.tw/fullchain.pem

SSLCertificateKeyFile /etc/letsencrypt/live/hoyo.idv.tw/privkey.pem

AllowOverride All

Require all granted

</Directory>

</VirtualHost>

—

廣告遮蔽顯示的網頁

.htaccess

RewriteEngine on

ErrorDocument 404 /index.html

RewriteRule (.*) index.html [L]

RewriteRule ^(.*)/(.*)$ index.html [L]

index.html

<!DOCTYPE html>

<html>

<head>

<style>

*{height:100%;}

</style>

</head>

<div style="text-align: center;height:24px;">這裡是廣告</div>

</body>

</html>

完成圖

—

後記

注意選項陷阱避免被入侵

記得將 Allow Any Remote IP 關閉，並且設定成內部 IP

預設為啟用，並且 Telnet 管理為關閉，不過有興趣以及有環境的可以測試看看，很可怕 …

你也想要用！？

Supported Devices – DD-WRT Wiki

到這個頁面主要是因為已經把硬體規格列出，因為 firmware 是差不多的，所以決定效能、功能多寡的就是硬體了

例如 Hoyo 的 Buffalo WZR-600DHP2 就是一個性價比優秀的產品，雖然 Buffalo 和 DD-WRT 合作，可惜現在台灣已經不代理了

—

這裡有更進階的用法

可是使用 DNS 誤傷太大，而且只指定目錄名稱，話雖如此 Hoyo 還是設定這個下去了 ….

1	address=/pagead/192.168.0.3

—

Video.js – 基本播放以及字幕

Posted on 2018-10-17 by hoyo

水平居中、高度固定的播放器

Flex实现水平垂直居中.md

<!DOCTYPE html>

<html>

<head>

content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"/>

<style>

.flex{

display:flex;

align-items:center;

justify-content:center;

background-color:#000;

}

</style>

</head>

<body>

</video>

</div>

videojs('my-player', {

controls: true,

autoplay: false,

preload: 'auto',

width: 960,

height: 400

});

</script>

</body>

</html>

以下為完成意義圖

—

字幕

WebVTT Example

要讓影片加上字幕只須加上 <track> 即可，例如這樣

</video>

</div>

不過還需要注意字幕格式

原始的字幕

00:00:34,574 --> 00:00:40,305

片名：《終極面試》

翻譯：Blue

00:01:52,800 --> 00:01:54,879

這是你應得的

這個字幕是不能直接使用，必須做以下修改

WEBVTT

00:00:34.574 --> 00:00:40.305

片名：《終極面試》

翻譯：Blue

00:01:52.800 --> 00:01:54.879

這是你應得的

開頭加上 WEBVTT
將時間小數點的逗號改為小數點

—

自訂字幕格式

WebVTT: The Web Video Text Tracks Format

設定靠左對齊、黃色字

00:00:00.000 --> 00:00:40.305 line-left align:left

<c.yellow.bg_blue>片名：《終極面試》</c>

翻譯：Blue

CSS

.video-js .vjs-text-track-display .yellow{

color: yellow;

}

—

FFmpeg 將字幕檔和影片合併

Posted on 2018-10-16 by hoyo

FFmpeg 將影片合併字幕檔

HowToBurnSubtitlesIntoVideo

1	> ffmpeg -i a.mkv -vf subtitles=a.ass a.mp4

或使用 ass filter 指定 ass 字幕

1	> ffmpeg -i a.mkv -vf "ass=a.ass" a1.mp4

預設的字型因為原本是簡體字字幕對於正體字顯示效果不佳，所以需要調整設定

—

ass 字幕

SSA、ASS 參數-攻略

[V4+ Styles]

Format: Name, Fontname, Fontsize, PrimaryColour, SecondaryColour, OutlineColour, BackColour, Bold, Italic, Underline, StrikeOut, ScaleX, ScaleY, Spacing, Angle, BorderStyle, Outline, Shadow, Alignment, MarginL, MarginR, MarginV, Encoding

Style: ENG.雅黑,標楷體,20,&H00FFFFFF,&H00000000,&H00000000,&H00000000,0,0,0,0,100,100,0,0,1,1,1,2,5,5,10,1

設定關閉粗體、20 大小、標楷體字型

—

Docker – 網址轉 Port

Posted on 2018-10-12 by hoyo

使用 Docker 在一台主機上執行多 HTTP Service，因為需要 Port 對外，如果看不懂網路其他的設定不妨參考 Hoyo 的思路

Hoyo 的作法是使用一台 Docker container 安裝 Nginx 來提供 Proxy Pass 功能，將網址直接轉到 container。

此方法的好處是，新增子 HTTP Service 只須 docker run 不需要設定其他網路設定，對於 Nginx 只需要新增 conf 重新啟動 nginx service 後即可啟用，也不需要變更 container

—

Nginx container

Nginx 的主機選擇的是 Debian Linux ，所以須先 pull 一個 debian 環境，在此使用的是 debian:9 ，然後是安裝 nginx

How To Install Nginx on Debian 9

1	# apt install -y nginx

—

子 HTTP Service container

實際提供 HTTP 服務的容器，使用的也是 Debian:9 ，然後安裝的是 Apache 2.4 藉以和 Proxy Pass 區隔，當然使用 Nginx 也可以

—

子 WWW 啟動

子 WWW 啟動不需要啟動 port 對應

1	# docker run --name="www1" -d hoyo/httpd:v6

查詢 contriner IP address

# docker inspect www1 | grep IPAddress

"SecondaryIPAddresses": null,

"IPAddress": "172.17.0.2",

How to get a Docker container’s IP address from the host?

# docker inspect -f '{{.Name}} - {{.NetworkSettings.IPAddress }}' $(docker ps -aq)

/www2 - 172.17.0.4

/nginx - 172.17.0.3

/www1 - 172.17.0.2

—

使用 Nginx 將多 container WWW 服務轉到網址

How do I point my custom domain to my IP:Port (41.111.20.36:8080)?

1	# docker run --name="nginx" -p 80:80 -itd debian/nginx:v1 bash

vi /etc/nginx/sites-available/www1

server {

listen 80;

server_name www1.hoyo.idv.tw;

location / {

proxy_set_header Host $host;

proxy_pass http://172.17.0.2;

}

將需要啟動的網站連結到 sites-enabled

1	# ln -s /etc/nginx/sites-available/www1 /etc/nginx/sites-enabled/www1

重新啟動 Nginx

1	# nginx -s reload

—

使用 wkhtmltopdf 將 HTML 轉成 PDF

Posted on 2018-10-09 by hoyo

使用 wkhtmltopdf 相對 TCPDF 來說可大幅簡化 PDF 的轉換工作

—

CentOS 6 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos6.x86_64.rpm

# yum install -y libXext libXrender fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos6.x86_64.rpm

—

CentOS 7 安裝

# wget https://downloads.wkhtmltopdf.org/0.12/0.12.5/wkhtmltox-0.12.5-1.centos7.x86_64.rpm

# yum install -y fontconfig xorg-x11-fonts-75dpi xorg-x11-fonts-Type1

# rpm -Uvh wkhtmltox-0.12.5-1.centos7.x86_64.rpm

—

安裝中文字型及顯示

Hoyo 發生的情況是因為要產生 PDF 的 HTML，所以沒有給完整的結構，因此就少了編碼宣告才發生亂碼

1	<meta http-equiv="content-type" content="text/html;charset=utf-8">

如果是系統沒有中文字型請參考以下步驟

# mkdir /usr/share/fonts/simsun

# cp simsun.ttc /usr/share/fonts/simsun/

# fc-cache -fv

# fc-list

SimSun,宋体:style=Regular

—

開始使用

1	# wkhtmltopdf a.html a.pdf

以下是一個實際案例，此為從 Word 設計後轉貼到網頁編輯器 TinyMCE 上，然後再經過 PHP 套版最後的結果

原來使用 TCPDF 的結果，因為 TCPDF 有中文避頭尾功能，所以整體編排結果和網頁顯示不一，如果花時間調整應該也可以得到滿意的結果，不過 Hoyo 就先放棄了

—

設定其他字型 (楷體、黑體)

安裝完字型後，使用 fc-list 指令列出安裝完成字型

# fc-list :lang=zh

楷体,KaiTi:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

微软雅黑,Microsoft YaHei:style=Normal,obyčejné,Standard,Κανονικά,Regular,Normaali,Normál,Normale,Standaard,Normalny,Обычный,Normálne,Navadno,Arrunta

文泉驛正黑,WenQuanYi Zen Hei,文泉驿正黑:style=Regular

Microsoft YaHei Mono:style=Regular

教育部標準楷書,TW\-MOE\-Std\-Kai:style=Regular

文泉驛等寬正黑,WenQuanYi Zen Hei Mono,文泉驿等宽正黑:style=Regular

文泉驛點陣正黑,WenQuanYi Zen Hei Sharp,文泉驿点阵正黑:style=Regular

將列出的首個關鍵字設定為 HTML 的字型名稱，例如楷體必須設定為「楷体」，不是網路上說的 KaiTi 也不是楷體，更不是標楷體

HTML

<html>

<head>

<style>

font-family: "楷体", 'Microsoft YaHei', serif;

}

</style>

</head>

<body>

—

頁首、頁尾及大綱

—

紙本版面排版問題

关于wkhtmltopdf，你一定想知道这些

<style>

font-family: "Microsoft YaHei Mono", serif;

font-size: 18px;

letter-spacing: 0;

white-space: pre;

word-wrap: break-word;

}

</style>

—

Vigor2920Vn 使用心得備註

Posted on 2018-09-09 by hoyo

—

Content Security Management (CSM) – URL Content Filter Profile

Hoyo 的結論

只支援 HTTP 網址，不支援 HTTPS
使用 Hex 過濾內容關鍵字方式還需要再測試，因為 Vigor 不支援，只能轉換成 URL encode ，初次嘗試失敗收場
雖然如此 Vigor2920 + iPad 的組合還是可以成功阻隔網頁及 APP 廣告

—

Vigor2920Vn 變成 Vigor2920V

Hoyo 的 2920Vn 除了要當作 WiFi AP 外還要負責 Server 的防火牆，前陣子開始 WiFi 當機，加散熱片加風扇以及設定半夜重新開機皆沒用，最近還會整台當機。

所以決定將無線網路模組拆除，如此 Vigor 2920Vn 就會覺得自己變成了 Vigor 2920V 了，管理介面的 WiFi 功能也會消失

驗明正身 Vigor2920Vn

移除無線網卡

後台介面顯示 Modal

—

線上體驗

Vigor2920Vn http://eu.draytek.com:12920/
Vigor2830Vn http://eu.draytek.com:12830/
Vigor2120n+ http://eu.draytek.com:12120/
Vigor2133Vac http://eu.draytek.com:12133/
Vigor2925Ln http://eu.draytek.com:12925/
Vigor2926Lac http://eu.draytek.com:12926/
Vigor2952n http://eu.draytek.com:12952/
Vigor3220n http://eu.draytek.com:13220/

—

hoyo 學習紀錄

PHP 網頁應用 IOT 物聯網自動化

DD-WRT – 遮蔽網頁廣告 (使用 DNS 過濾)

使用 DNSMasq 轉發 DNS

處理 DNS 轉發顯示處理

廣告遮蔽顯示的網頁

後記

Video.js – 基本播放以及字幕

水平居中、高度固定的播放器

字幕

自訂字幕格式

FFmpeg 將字幕檔和影片合併

FFmpeg 將影片合併字幕檔

ass 字幕

Docker – 網址轉 Port

Nginx container

子 HTTP Service container

子 WWW 啟動

使用 Nginx 將多 container WWW 服務轉到網址

使用 wkhtmltopdf 將 HTML 轉成 PDF

CentOS 6 安裝

CentOS 7 安裝

安裝中文字型及顯示

開始使用

設定其他字型 (楷體、黑體)

頁首、頁尾及大綱

紙本版面排版問題

Vigor2920Vn 使用心得備註

Content Security Management (CSM) – URL Content Filter Profile

Vigor2920Vn 變成 Vigor2920V

線上體驗