面試3

mttt發表於2018-12-11
面試

同源策略

協議+域名+埠完全相同才叫同源 以下三種行為受到限制: （1） 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB。

（2） 無法接觸非同源網頁的 DOM。

（3） 無法向非同源地址傳送 AJAX 請求（可以傳送，但瀏覽器會拒絕接受響應）。

解決： cookie 瀏覽器通過document.domain屬性來檢查是否同源。 A 網頁的網址是http://w1.example.com/a.html，B 網頁的網址是http://w2.example.com/b.html（一級域名一樣，二級不一樣）

// 兩個網頁都需要設定
document.domain = 'example.com';
複製程式碼

這時候a設定一個cookie，b就可以讀到這個cookie

AJAX: jsonp CORS（“跨域資源共享”）:Access-Control-Allow-Origin

Content-Type: text/html; charset=utf-8

安全

XSS

XSS（Cross-site scripting)即跨站點script 舉例

  1. 惡意使用者 A 在網站提交留言為<script>console.log(document.cookie)</script>，這段程式碼被上傳到伺服器。
  2. B訪問網站的留言，這段指令碼在 B 的瀏覽器直接執行，惡意使用者 H 的指令碼就可以任意操作 B 的 cookie。有了 cookie，惡意使用者 H 就可以偽造 B 的登入資訊。

產生原因： 前端的程式碼在顯示留言的時候，操作DOM的時候innerHTML方法，或者用了jQuery中的$p.html(content)方法。

解決辦法：

  1. 前端儘量使用innerText（jQuery就是用text()方法，不要自己）
  2. 將 < >'' ' 這些可疑的符號轉義，如<變成 &lt; （HTML實體）

CSRF攻擊

 （CSRF的全名為Cross-site request forgery）  偽造跨站請求 過程：

  1. 假設給使用者賺錢的請求連結是：www.game.com/Transfer.ph…
  2. 然後如果客戶端已經驗證並登陸www.game.com網站，此時客戶端瀏覽器儲存了遊戲網站的驗證cookie（已登入，並且瀏覽器儲存了需要登入的cookie）
  3. 客戶端再tab另一個頁面進行訪問惡意攻擊者的網站，並從惡意攻擊者的網站構造的連結（比如構造一個img標籤，url就是構造的虛假的連結，例如是http://www.game.com/Transfer.php?toUserId=100&vMoney=1000）來訪問遊戲網站（再開一個網頁，這個網頁裡有一個img標籤，url是假的）
  4. 瀏覽器將會攜帶該遊戲網站的cookie進行訪問，1000塊遊戲幣就轉給那個虛假的userid了（因為已經登入了，瀏覽器裡儲存了cookie，所以瀏覽器會帶著這個cookie訪問這個假的img的連結）

對於get請求可以很輕鬆的攻擊，對於post，攻擊者可誘導使用者進入帶 Form 表單可用POST方式提交引數的頁面。

解決方法：

  1. 服務端在收到路由請求時，生成一個隨機數，在渲染請求頁面時把隨機數埋入頁面（一般埋入 form 表單內，）
  2. 服務端設定setCookie，把該隨機數作為cookie或者session種入使用者瀏覽器
  3. 當使用者傳送 GET 或者 POST 請求時帶上_csrf_token引數（對於 Form 表單直接提交即可，因為會自動把當前表單內所有的 input 提交給後臺，包括_csrf_token）
  4. 後臺在接受到請求後解析請求的cookie獲取_csrf_token的值，然後和使用者請求提交的_csrf_token做個比較，如果相等表示請求是合法的。

解決方法： 一Token字串驗證。 總結：

  1. 伺服器請求的時候，生成一個隨機數
  2. 然後埋到要提交的form表單裡，方法是生成一個input標籤頁（）
  3. 服務端設定setCookie，把該隨機數作為cookie儲存到客戶端瀏覽器裡
  4. 在傳送請求的時候把cookie裡的token隨機數和form表單裡的隨機數進行比較，如果一致，就通過驗證

二讓使用者自己填寫驗證碼

效能優化

  1. HTTP快取
  2. CSS引用寫在<head></head>,script標籤寫在body閉合標籤前面，先載入內容與樣式。
  3. 圖：懶載入，雪碧圖。
  4. 壓縮程式碼：css去掉回車，空格。
  5. CDN：靜態檔案放在CDN。
  6. webpack，將幾個小檔案組成大檔案，減少請求次數。

地平線需要學習的：

webGL

three.js 封裝了webGL的API

陣列方法，快排，冒泡，陣列去重

陣列方法

Array.isArray() Array.isArray(arr) // true

2.例項方法 valueOf()，toString() arr.valueOf() // [1, 2, 3]返回本身 arr.toString() // "1,2,3,4,5,6"

push()，pop() shift()//刪除第一個元素

join()//變成一個字串

concat()//陣列合並

reverse()//顛倒陣列

slice(起始位置，終止位置)//[起始位置，終止位置)減下來一部分（一小片）陣列，一小片，返回一個新陣列，原陣列不變

splice方法用於刪除原陣列的一部分成員，並可以在刪除的位置新增新的陣列成員，返回值是被刪除的元素。注意，該方法會改變原陣列。(裁剪下來)

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]
複製程式碼

從下標4開始，往後刪2個

sort()//按字典序排序，可以傳入函式作為引數規定排序的方式。直接改變了原陣列

遍歷： map()//對映，並返回一個新陣列，裡面函式可以調整陣列的值

forEach()//forEach方法不返回新陣列，只用來遍歷資料

filter()//過濾一個陣列 [1, 2, 3, 4, 5].filter(function (elem) { return (elem > 3); }) // [4, 5]

indexOf()//indexOf方法返回給定元素在陣列中第一次出現的位置. 如果沒有出現則返回-1

String的方法

屬性：length

方法： var s = new String('abc'); s.charAt(1) // "b" 這個方法完全可以用陣列下標替代。 'abc'.charAt(1) // "b" 'abc'[1] // "b"

concat()

slice()減一小塊下來，返回新字串，[起始位置，結束位置) substring()一樣，優先使用slice() substr()一樣，優先使用slice()

indexOf() 用於確定一個字串在另一個字串中第一次出現的位置，返回結果是匹配開始的位置。如果返回-1，就表示不匹配

trim()去除字串兩端的空格，返回新字串

toLowerCase() toUpperCase() 變換大小寫

split()將字串分割為陣列 'a|b|c'.split('|') // ["a", "b", "c"]，與jion相對應

Math

Math.floor()，Math.ceil()地板值，天花板值，相對於數軸的。

Math.round()四捨五入

Math.random() [0,1)的隨機數

快排

let a = [1,1,1,2,2.2,12,14,23,443,5,5,435,45656768,4,6,7,5,8,33,67,86,2,86,67,845,4,24,5342,1,2]
function quickSort (arr){
  if(arr.length<=1) {return arr}
  //   let midIndex = Math.floor(arr.length/2)
  //   let midItem = arr.splice(0,1)[0]
  let midItem = arr[0]
  let left = []
  let right = [] 
  for(i = 0;i<arr.length;i++){
    if(i!==0){//跳過中間值
      if(arr[i]<midItem){
        left.push(arr[i])
      }else{
        right.push(arr[i])
      }
    }
  }
  return quickSort(left).concat([midItem],quickSort(right))
}
console.log(quickSort(a))
複製程式碼

jsbin.com/ravujoyopi/…

陣列去重

let a=[1,1,1,2,2,2,3,3,3,3,undefined,'xxx','xxx','3','3','undefined']

function f(array){
  let hash = {}
  let returnArr = []
  for(let i=0;i<array.length;i++){
    let arrItemStr = (typeof array[i]) + array[i] + ""//防止undefined和'undefined'轉換成字串然後衝突

    if(hash[arrItemStr]!==1){//說明未進入hash
      hash[arrItemStr]=1
      returnArr.push(array[i])
    }
  }
//   console.log(hash)
  return returnArr
}
console.log(f(a))


//2：
console.log(Array.from(new Set(a)))
複製程式碼

ES6

瞭解let const 解構賦值 箭頭函式 promise

canvas SVG

資料視覺化

d3.js echarts，2d的柱狀圖，折線圖，餅圖，3d的有3d地球模型，3d柱狀圖，3d地圖

video標籤

接下來的學習目標就是react

自我介紹

我是一名軟體工程專業的大四學生，因為對前端感興趣，所以自學前端半年多，對技術很有熱情，想找一份工作一遍工作一邊提升自己的技術能力。

Array的幾個用法一定要搞會，記下來

string.slice( array.join( indexOf()

網易面試

偽類，偽元素

偽類： :hover :focus :active :visited :link :first-child ，:last-child ，nth-child()用來選取不同狀態的元素 偽元素： ::before ::after ,實際存在的元素，用content：''來做小三角形，小圓點

html5標籤

html5標籤header footer main artical section aside nav，有點：如果都用div或者span來著，那麼不清楚每一部分的含義，語義化，結構清晰，提高可讀性。有利於seo，比如標題是h1，爬蟲爬取資料會優先爬取標題。

DOCTYPE 規定使用哪個版本的html 使用html5

元素

塊級元素：div p header footer main artical section aside nav 行內元素：span、a、b、i，strong 行內塊元素：img，input，button

this的題目

function f() {
		console.log(this.x);
	}
	f();
	var x = 2;
	var a = {x: 1};
	a.f = f;
	var b = a.f;
	a.f();
	b();
複製程式碼

undefined、1、2 this實質：當前函式所在作用域

typeof

Array.isarray()

原生ajax：1234的狀態分別是什麼

class用法

二面之前專案看一遍

相關文章