javascript権威ガイド-第二十章(クライアントストア)

5270 ワード

layout:post title:javascript権威ガイド-第二十章date:2017-09-07 14:36 tags:読書ノート
概要
二十章ではクライアントストアについて説明します.よくあるいくつかのクライアントストアの方法を詳しく紹介しています.同源戦略に関するものがありますので、13章の安全性の問題を見てみたいです.記録してください
安全性
ソースポリシー:スクリプトは、サーバによって読み込まれた文書の内容を読み取ることができません.例えば、1ページのスクリプトは他のページのユーザの入力情報を傍受できません.これはソースポリシーです.このように同じソースポリシーを見る必要があります.そうでないと、他のページのすべての情報が公開されます.しかし、他のページの属性を読み取るシーンがあります.documentのdomain属性を使ってもいいです.domainはデフォルトではドキュメントを読み込むホスト名です.例えば、home.example.comはexample.comに設定できます.ホーム.exampleやample.comなどには設定できませんが、一つが必要です.2つのウィンドウのdomainが一致したら、同じソースの制限がありません.ドメイン間リソース共有:origgin、Access-Coontrol-Originの設定を要求します.
XSS(ざっと安全問題を説明しました)
urlに対して:http://www.example.com/greet.html?David

    let name = decodeURIComponent(window.location.search.substring(1)) // search    ？     （     query  ？？？），        David
    alert(name)

でも呼び出したらhttp://http.www.example.com/greet.html?name=%3Cscript src=siteB/evil.js%3 E/script%3 EこのようにsiteBからのスクリプトを注入します.シナリオはsideBにありますが、Aで操作できます.危険です.
XSS防止のために、信頼できないデータで来た場合は、中のHTMLタグ(scriptタグを含む)を外して、簡単にセキュリティ機能を実現します.

name = name.replace(/')

local Strageとsession Strageの違い
両者の違いは、保存の有効期間と作用領域が異なることであり、つまりどれぐらいの時間を記憶できるかとデータにアクセスできるかということである.storgeは、保存、取得、削除の方法を定義しています.
有効期限とスコープ
local Strageのスコープは文書ソースレベルです.文書のソースはプロトコルホストとポートが一致しています.つまり同じブラウザで複数のウィンドウを開いてページを開きます.しかし、ブラウザのサプライヤーによって制限されています.session Strageのスコープも文書ソースレベルですが、あまり同じではなく、ウィンドウに限定されています.異なるタブでは共有されません.session Strageはブラウザやタブページで閉じられます.session Strageに保存されているデータは削除されます.
記憶されているAPI

localStorage.setItem('x', 1)
localStorage.getItem('X')
///   
for(let i= 0; i< localStorage.length; i++ ){
    let name = localStorage.key(i)
    let value = localStorage.getItem(name)
}
localStorage.removeItem('X')    //  X 
localStorage.clear()            //

クッキー
cookie属性:有効期間とスコープ

cookie               。   sessionStorage   ，cookie           ，              。
  max-age          ，         path domain   ，         web    ，      。

パスが'/'に設定されていたら、locastrageと同じスコープです.
クッキーの保存

// cookie        、      ，      encodeURIComponent  
//     cookie  ，       
document.cookie = 'version=' + encodeURIComponent(document.lastModified)

//     max-age、path、domain、secure     
//     domain    cookie     
const setCookie = (name, value, daysTolive, path, path) = {
    let cookie = `${name}=${encodeURLComponent(value)}`
    if(typeOf daysToLive === 'number'){
        cookie += `; max-age=${daysToLive * 60 * 60 * 24}`
    }
    if(path){
        cookie += `; path=${path}`
    }
    if(domain){
        cookie += `; domain=${domain}`
    }
    document.cookie = cookie
}

クッキーの読み込み
document.co okieによって読み取られたのは文字列で、異なるキーペアはfセミコロンとスペースで区切られています.valueの復号方式は、前の記憶用の方法に依存し、例えば上で用いられたset Cookieで用いる方法はencodeURIComponent符号化である.

const getCookie = (){
    let cookieObj = {}
    let cookieStr = document.cookie
    if(cookieStr === ''){
        return cookieObj
    }
    let cookieArr = cookieStr.split('; ')
    for(let _cookie of cookieArr){
        let p = _cookie.indexOf('=')
        let name = _cookie.slice(0,p)
        let value = _cookie.slice(p+1)
        value = decodeURIComponent(value)
        cookieObj[name] = value
    }
    return cookieObj
}

クッキー関連の記憶
session Strageに似たgetItem、setItem、remove、deleteなどの機能を実現します.

const cookieStorage(maxage, path) {
    //          cookie  
    let cookie = (()=>{
        let cookieObj = {}
        let cookieStr = document.cookie
        if(cookieStr === ''){
        return cookieObj
        }
        let cookieArr = cookieStr.split('; ')
        for(let _cookie of cookieArr){
            let p = _cookie.indexOf('=')
            let name = _cookie.slice(0,p)
            let value = _cookie.slice(p+1)
            value = decodeURIComponent(value)
            cookieObj[name] = value
        }
        return cookieObj
    }())
    //      key
    let keys = Object.keys(cookie)
    //  API        
    this.length = keys.length
    //   n key   ， key  
    this.key = (n) => {
        if (n<0 || n >= keys.length) return null
        return keys[n]
    }
    //getItem  
    this.getItem = (name) => cookie[name] || null
    // setItem  
    this.setItem = (key,value) => {
        //        cookie   ,        keys length
        if(!(key in keys)){
            keys.push(key)
            this.length++
        }
        //   cookie      
        cookie[key] = value
        //              cookie
        let domCookie = `${key}=${encodeURIComponent(value)}`
        if(maxage) domCookie += `; max-age=${maxage}`
        if(path) domCookie += `; path=${path}`
        document.cookie = domCookie
    }
    // removeCookie
    this.removeItem = (key) => {
        if(!(key in cookie)) return
        delete cookie[key]
        this.length--
        let p = keys.indexOf(key)
        keys.splice(p,1)
        document.cookie = 
    }
    // clear
    this.clear = () => {
        for(let key of keys){
            document.cookie = `${key}=; max-age=0`
        }
        cookie = {}
        keys = []
        this.length = 0
    }
}

javascriptの関数(部分)