# 如何製作一套 JavaScript 的熱點圖 library - Kewang

{%hackmd rG6pzIawQKe5cHU4rycgYg %}

> 從這開始

## keyword
- iframe
- Expressjs
leaftlet 比例是10:1將比例放上去就知道怎麼顯示（較難被爬蟲爬出來）
- CORS
少了讓Access control allow origin會比較難被用到 所以就fail掉了
解：1.let all source can access api.js
2.api key外流 同一把api key>會影響到原始網站會花一堆錢 （燒ＲＲＲＲＲ
解：check refere 在req.headers.referer;
add frame
add allow list
- HSTS
-
HTTP網域偽造
會影響到原始網站會花一堆錢
解：1.add allow list only HTTPS
create self-signed
解:
browser >server -會先打get http://example.com(用8080run)
server <retuen -回301 redirect to http://example.com
browser >server -get http://example.com
browser <server -return page &HSTS header
hsts preload list:
hsts preload submission requirements
Strict-Transport-Security:max-age=63072000; includeSubDomians;perload
hsts preload url(https://hstspreload.org/?domain=aikq.de)
hsts preload 花至少半年時間才能更新到其他瀏覽器上面

## Conclusion
應用端
申請api key
增加允許網域名單
十行程式碼結束
使用SemVer更新更方便
開發端
解決CORS:使用Access-control-Allow_Origin
解決網域偽造：HSTS
用 https 取代 http

SVCB/HTTPS
GSLIN 文章url(https://blog.gslin.org/archives/2020/10/04/9737/%E8%AE%93%E7%80%8F%E8%A6%BD%E5%99%A8%E7%9B%B4%E6%8E%A5%E9%80%A3-https-%E7%9A%84-svcb-https/)

最後還會 return 回去沒拍到 orz

## 聊天區
> 還有兩場啊！！睡意速速走

> 這場筆記完全不知到怎麼寫QQ
> 全部都截圖
> 這場聽完=沒聽的感覺
> 有截重點的話還好說 不過截整段有點尬
>> 這我覺得還好，像是有幾場是現場 demo 的也是要自己歸納筆記
>> 整場demo！？這麼硬漢！！

> 這其實簡單說就是做一個給第三方用的 iframe api
> 這在廣告的領域還滿常用的(不過在廣告領域在 CORS 會比較寬鬆, 和可以知道 referrer 可以追蹤有效瀏覽和點擊)
>> 了解，感謝大大
>> 原來

> 我快被haiyaa洗腦了
> 太haiyaaa啦
> 
> 

> haiyaa 有 github 喔 XD
>> 感覺不是他github id是haiya嗎
>窩勁量寫ㄌ ＱＱ

###### tags: `MOPCON 2020`