程式學習

2021年4月13日星期二

xss

XSS game: https://xss-game.appspot.com/level2

解答: https://sls.weco.net/node/28009

google講解: https://www.google.com/about/appsecurity/learning/xss/index.html

...看到Spooky, huh? In this example, an evil JavaScript file was retrieved and embedded via XSS.

https://autoposter.pixnet.net/blog/post/116075291

http://evuln.com/tools/xss-encoder/

http://www.qa-knowhow.com/?p=2992

test my website xss Vulnerability: https://security.stackexchange.com/questions/163588/software-for-testing-xss-and-other-web-sites-vulnerabilities

Example tools include Burp Proxy and ratproxy.

https://www.zaproxy.org/

1. <script>alert("hi")</script> -- reflected" XSS

2. 找一個element加alert

<a href="#" onclick="alert('hi')">test</a> -- stored XSS

3. 研究程式碼，他用了html解析可以利用

https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event

https://developer.cdn.mozilla.net/en-US/docs/Web/API/Window/postMessage

https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/696792/

4. 研究程式碼，他用了html解析可以利用要處理escaping data

5.<a href="javascript:alert(1)">Next >></a>

6. 利用load載入含有惡意程式的另一支js，如https://www.gstatic.com/charts/loader.js?callback=alert載入後會alert

ex:

        document.head.appendChild(scriptEl);
        scriptEl.src ="https://www.gstatic.com/charts/loader.js?callback=alert"
        document.head.appendChild(scriptEl);

結論: 只要是user-suppied data的就要注意被插入攻擊

補充知識:

window(窗口)可以top, parent, self, this替代，

this等於self
Top表示最頂層的一個窗口頁面
最頂層頁面===》父頁面===》子頁面，self.top就代表其中的最頂層頁面，相當於子頁面的祖父。
self.top 等於self.parent.parent
Parent在進行父頁面訪問時使用
parent用於在iframe框架頁中,frame框架頁中生成的子頁面中訪問父頁面的對象。例如：A頁面中有一個iframe或frame，那麼iframe或frame中的頁面就可以通過parent對象來引用A頁面中的對象。這樣就可以獲取或返回值到A頁面中。
Opener在進行父頁面引用時使用
opener用於在window.open打開的頁面引用執行window.open方法的的上級頁面的對象。例如：A頁面通過window.open()方
法彈出了B頁面，在B頁面中就可以通過opener來引用A頁面，這樣就可以通過這個對象來對A頁面進行操作。

window.opener.location.reload(); //子窗口刷新父窗口
window.opener.location.href //獲取父窗口href
window.opener.locaiton.pathname //獲取父窗口路徑名
parent與opener的區別：
parent是相對於框架來說父窗口對象
opener是針對於用window.open打開的窗口來說的父窗口，前提是window.open打開的才有。

取父窗口的元素方法：window.parent.document.getElementByIdx_x("父窗口元素ID")；

localhost壞掉，但正式機是好的，因為資料undefined，可能是時序的關係，localhost跑得比較快

2021年4月12日星期一

online, offline do something

window.addEventListener('online', this.refreshOnlineStatus)

window.addEventListener('offline', this.refreshOnlineStatus)

refreshOnlineStatus () {

if (process.client) {

if (typeof window.navigator.onLine === 'undefined') {

// If the browser doesn't support connection status reports

// assume that we are online because most apps' only react

// when they now that the connection has been interrupted

this.isOnline = true

} else {

this.isOnline = window.navigator.onLine

}

one file for ltr and second for rtl

https://www.npmjs.com/package/postcss-apply

https://stackoverflow.com/questions/56580681/generate-two-different-index-files-for-rtl-and-ltr-support-using-webpack

2021年4月8日星期四

seo title 在302不會發送

https://awoo.ai/zh-hant/blog/301-redirection-for-seo/

https://seo.whoops.com.tw/301-vs-302-redirects/

301: 永久轉址，將舊網址的所有流量與排名一併的轉移到新的網址
*注意：舊網址與新網址的內容一定要一樣或是高度相關，否則也算是黑帽SEO的一種，會遭到搜尋引擎的懲罰。
在移轉的過程中，你可能會多多少少失去一點SEO的排名，影響的程度視你重定向做的完善與否有關，做的越完善，失去排名的衝擊越低。
302: 將網址臨時的移動到新的URL，常用於A/B測試或是有短期的活動頁面而使用的。

舉例來說，我們網站的網址是：https://seo.whoops.com.tw/，而我們今天做了兩個不同的主網站頁面，想要測試哪一個的轉化率與停留率較佳，因此分別做了：https://seo.whoops.com.tw/home1與https://seo.whoops.com.tw/home2做測試，此時就能利用302重定向轉址，當使用者訪問https://seo.whoops.com.tw時，能夠分別看到https://seo.whoops.com.tw/home1或https://seo.whoops.com.tw/home2，而不失去https:/seo.whoops.com.tw的排名。

當我們測試完後，只要取消302重定向的設定，https://seo.whoops.com.tw/網址的排名與效果並不會受到影響。

有時，網站管理員會使用302重定向網址來替代301重定向網址進行永久的網址轉移，雖然302重定向網址是短期臨時性的轉址，但當你長期使用302重定向網址後，沒有在短時間內取消設定，那麼長期下來你仍然會失去原始的排名，因為此時Google已經被你搞混了。
黑帽SEO
白帽SEO

2021年4月6日星期二

Promise 中會吞掉(隱藏)throw 例外的錯誤輸出，改用catch來作錯誤處理

https://eyesofkids.gitbooks.io/javascript-start-es6-promise/content/contents/ch5_flow_n_error.html

// 用throw語句取代reject
const p1 = new Promise((resolve, reject) => {
  throw new Error('rejected!') // 用throw語句

  //相當於用以下的語句
  //reject(new Error('rejected!'))
})

p1.then(val => {
  console.log(val)
  return val + 2
})
  .then(val => console.log(val))
  .catch(err => console.log('error:', err.message))
  .then(val => console.log('done'))

//最後結果:
//error: rejected!
//done

OOCSS, SMACSS

OOCSS容器與內容分離
https://www.youtube.com/watch?v=SAW4UosA-4o
SMACSS
a. Base Rules -- 通常會先清掉瀏覽器預設樣式(用reset.css或normalize.css)，在寫入自己想要的預設樣式

*{
text-decoration: none;
}

b. Layout Rules -- 在每頁都有的共通的區塊算做為佈局，佈局樣式還可以根據重用分為主要樣式和次要樣式。用命名區分出針對的樣式(非內容)，用 > 限定影響範圍

.l-grid > li { display: inline-block; margin: 0 0 10px 10px; /* IE7 hack to mimic inline-block on block elements */ *display: inline; *zoom: 1; }
c. Module Rules -- 每個模塊都應設計為作為獨立組件存在。如果操作正確，則可以輕鬆地將模塊移動到佈局的不同部分，而不會錯誤。

<div class="fld"> <span class="fld-name">Folder Name</span> // 獨立組件 <span class="fld-items">(32 items)</span> // 獨立組件
<span>123</span> // 可以保有原本span的特性 </div>
當我們在不同部分中具有相同的模塊時，可以分類class去達成共用
<div class="pod pod-constrained">...</div> <div class="pod pod-callout">...</div>
pod-constrained, pod-callout是pop的擴充，且可以重複用在不同的地方

不建議用html tag或id來做選擇器，因為html tag不好獨立開，id會有跟php衝突與只能唯一的情況

https://www.youtube.com/watch?v=7HQg94jxTwM
d. State Rules -- 通常由js觸發，用作開關
class="is-hidden"
class="is-error"

id 權重會比自命名的class要高，所以建議state rules 使用時加上!important。

https://www.youtube.com/watch?v=77SiAoekmeo
e. Theme Rules

http://smacss.com/book/type-theme

https://cythilya.github.io/2018/06/05/css-methodologies/

文章加密

2021年4月13日 星期二

2021年4月12日 星期一

2021年4月8日 星期四

2021年4月6日 星期二

2021年4月13日星期二

2021年4月12日星期一

2021年4月8日星期四

2021年4月6日星期二