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

歡迎來到 MOPCON 2020 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@mopcon/2020
手機版請點選上方 按鈕展開議程列表。

從這開始

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/讓瀏覽器直接連-https-的-svcb-https/)




最後還會 return 回去沒拍到 orz

聊天區

還有兩場啊！！睡意速速走

這場筆記完全不知到怎麼寫QQ
全部都截圖
這場聽完=沒聽的感覺
有截重點的話還好說 不過截整段有點尬

這我覺得還好，像是有幾場是現場 demo 的也是要自己歸納筆記
整場demo！？這麼硬漢！！

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

了解，感謝大大
原來

我快被haiyaa洗腦了
太haiyaaa啦
haiyaa

haiyaa 有 github 喔 XD

感覺不是他github id是haiya嗎
窩勁量寫ㄌ ＱＱ

tags: MOPCON 2020
Select a repo