[{"data":1,"prerenderedAt":687},["ShallowReactive",2],{"content-query-K4OYq1gsXc":3},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"category":5,"createdAt":10,"updatedAt":10,"body":11,"_type":681,"_id":682,"_source":683,"_file":684,"_stem":685,"_extension":686},"/article/coding/vue-nuxt-content-security-policy","coding",false,"","Vue Nuxt 內容安全策略 CSP 資安設定","被弱掃工具掃出前端專案有資安風險，之前因為知道前端資安這水很深阿，想說要處理起來會很難很麻煩，但其實不會，一起來看看吧！","2024-02-04",{"type":12,"children":13,"toc":678},"root",[14,21,28,66,632,645,672],{"type":15,"tag":16,"props":17,"children":18},"element","p",{},[19],{"type":20,"value":9},"text",{"type":15,"tag":22,"props":23,"children":25},"h2",{"id":24},"nuxt-2-設定",[26],{"type":20,"value":27},"Nuxt 2 設定",{"type":15,"tag":16,"props":29,"children":30},{},[31,33,40,42,48,50,56,58,64],{"type":20,"value":32},"內容安全策略 Content-Security-Policy(CSP) 可用來防禦 XSS 攻擊，在 Nuxt 2 中的 ",{"type":15,"tag":34,"props":35,"children":37},"code",{"className":36},[],[38],{"type":20,"value":39},"nuxt.config.js",{"type":20,"value":41}," 確保 ",{"type":15,"tag":34,"props":43,"children":45},{"className":44},[],[46],{"type":20,"value":47},"target",{"type":20,"value":49}," 值為 ",{"type":15,"tag":34,"props":51,"children":53},{"className":52},[],[54],{"type":20,"value":55},"server",{"type":20,"value":57},"，然後在 ",{"type":15,"tag":34,"props":59,"children":61},{"className":60},[],[62],{"type":20,"value":63},"csp",{"type":20,"value":65}," 新增內容如下:",{"type":15,"tag":67,"props":68,"children":72},"pre",{"className":69,"code":70,"language":71,"meta":7,"style":7},"language-js shiki shiki-themes material-theme-palenight","export default {\n  render: {\n    csp: {\n      reportOnly: false,\n      policies: {\n        'default-src': [\"'self'\", 'cdnjs.cloudflare.com', '*.your-domain.com', 'www.google-analytics.com', 'stats.g.doubleclick.net'],\n        'img-src': [\"'self'\", 'www.w3.org', 'data:', 'www.google-analytics.com'],\n        'style-src': [\"'self'\", 'cdnjs.cloudflare.com', \"'unsafe-inline'\"],\n        'script-src': [\"'self'\", 'www.google-analytics.com', 'www.googletagmanager.com'],\n        'frame-ancestors': [\"'self'\"],\n      }\n    }\n  },\n};\n\n","js",[73],{"type":15,"tag":34,"props":74,"children":75},{"__ignoreMap":7},[76,99,118,135,159,176,299,394,473,551,596,605,614,623],{"type":15,"tag":77,"props":78,"children":81},"span",{"class":79,"line":80},"line",1,[82,88,93],{"type":15,"tag":77,"props":83,"children":85},{"style":84},"--shiki-default:#89DDFF;--shiki-default-font-style:italic",[86],{"type":20,"value":87},"export",{"type":15,"tag":77,"props":89,"children":90},{"style":84},[91],{"type":20,"value":92}," default",{"type":15,"tag":77,"props":94,"children":96},{"style":95},"--shiki-default:#89DDFF",[97],{"type":20,"value":98}," {\n",{"type":15,"tag":77,"props":100,"children":102},{"class":79,"line":101},2,[103,109,114],{"type":15,"tag":77,"props":104,"children":106},{"style":105},"--shiki-default:#F07178",[107],{"type":20,"value":108},"  render",{"type":15,"tag":77,"props":110,"children":111},{"style":95},[112],{"type":20,"value":113},":",{"type":15,"tag":77,"props":115,"children":116},{"style":95},[117],{"type":20,"value":98},{"type":15,"tag":77,"props":119,"children":121},{"class":79,"line":120},3,[122,127,131],{"type":15,"tag":77,"props":123,"children":124},{"style":105},[125],{"type":20,"value":126},"    csp",{"type":15,"tag":77,"props":128,"children":129},{"style":95},[130],{"type":20,"value":113},{"type":15,"tag":77,"props":132,"children":133},{"style":95},[134],{"type":20,"value":98},{"type":15,"tag":77,"props":136,"children":138},{"class":79,"line":137},4,[139,144,148,154],{"type":15,"tag":77,"props":140,"children":141},{"style":105},[142],{"type":20,"value":143},"      reportOnly",{"type":15,"tag":77,"props":145,"children":146},{"style":95},[147],{"type":20,"value":113},{"type":15,"tag":77,"props":149,"children":151},{"style":150},"--shiki-default:#FF9CAC",[152],{"type":20,"value":153}," false",{"type":15,"tag":77,"props":155,"children":156},{"style":95},[157],{"type":20,"value":158},",\n",{"type":15,"tag":77,"props":160,"children":162},{"class":79,"line":161},5,[163,168,172],{"type":15,"tag":77,"props":164,"children":165},{"style":105},[166],{"type":20,"value":167},"      policies",{"type":15,"tag":77,"props":169,"children":170},{"style":95},[171],{"type":20,"value":113},{"type":15,"tag":77,"props":173,"children":174},{"style":95},[175],{"type":20,"value":98},{"type":15,"tag":77,"props":177,"children":179},{"class":79,"line":178},6,[180,185,190,195,199,205,210,216,220,225,230,235,239,243,247,252,256,260,264,269,273,277,281,286,290,295],{"type":15,"tag":77,"props":181,"children":182},{"style":95},[183],{"type":20,"value":184},"        '",{"type":15,"tag":77,"props":186,"children":187},{"style":105},[188],{"type":20,"value":189},"default-src",{"type":15,"tag":77,"props":191,"children":192},{"style":95},[193],{"type":20,"value":194},"'",{"type":15,"tag":77,"props":196,"children":197},{"style":95},[198],{"type":20,"value":113},{"type":15,"tag":77,"props":200,"children":202},{"style":201},"--shiki-default:#BABED8",[203],{"type":20,"value":204}," [",{"type":15,"tag":77,"props":206,"children":207},{"style":95},[208],{"type":20,"value":209},"\"",{"type":15,"tag":77,"props":211,"children":213},{"style":212},"--shiki-default:#C3E88D",[214],{"type":20,"value":215},"'self'",{"type":15,"tag":77,"props":217,"children":218},{"style":95},[219],{"type":20,"value":209},{"type":15,"tag":77,"props":221,"children":222},{"style":95},[223],{"type":20,"value":224},",",{"type":15,"tag":77,"props":226,"children":227},{"style":95},[228],{"type":20,"value":229}," '",{"type":15,"tag":77,"props":231,"children":232},{"style":212},[233],{"type":20,"value":234},"cdnjs.cloudflare.com",{"type":15,"tag":77,"props":236,"children":237},{"style":95},[238],{"type":20,"value":194},{"type":15,"tag":77,"props":240,"children":241},{"style":95},[242],{"type":20,"value":224},{"type":15,"tag":77,"props":244,"children":245},{"style":95},[246],{"type":20,"value":229},{"type":15,"tag":77,"props":248,"children":249},{"style":212},[250],{"type":20,"value":251},"*.your-domain.com",{"type":15,"tag":77,"props":253,"children":254},{"style":95},[255],{"type":20,"value":194},{"type":15,"tag":77,"props":257,"children":258},{"style":95},[259],{"type":20,"value":224},{"type":15,"tag":77,"props":261,"children":262},{"style":95},[263],{"type":20,"value":229},{"type":15,"tag":77,"props":265,"children":266},{"style":212},[267],{"type":20,"value":268},"www.google-analytics.com",{"type":15,"tag":77,"props":270,"children":271},{"style":95},[272],{"type":20,"value":194},{"type":15,"tag":77,"props":274,"children":275},{"style":95},[276],{"type":20,"value":224},{"type":15,"tag":77,"props":278,"children":279},{"style":95},[280],{"type":20,"value":229},{"type":15,"tag":77,"props":282,"children":283},{"style":212},[284],{"type":20,"value":285},"stats.g.doubleclick.net",{"type":15,"tag":77,"props":287,"children":288},{"style":95},[289],{"type":20,"value":194},{"type":15,"tag":77,"props":291,"children":292},{"style":201},[293],{"type":20,"value":294},"]",{"type":15,"tag":77,"props":296,"children":297},{"style":95},[298],{"type":20,"value":158},{"type":15,"tag":77,"props":300,"children":302},{"class":79,"line":301},7,[303,307,312,316,320,324,328,332,336,340,344,349,353,357,361,366,370,374,378,382,386,390],{"type":15,"tag":77,"props":304,"children":305},{"style":95},[306],{"type":20,"value":184},{"type":15,"tag":77,"props":308,"children":309},{"style":105},[310],{"type":20,"value":311},"img-src",{"type":15,"tag":77,"props":313,"children":314},{"style":95},[315],{"type":20,"value":194},{"type":15,"tag":77,"props":317,"children":318},{"style":95},[319],{"type":20,"value":113},{"type":15,"tag":77,"props":321,"children":322},{"style":201},[323],{"type":20,"value":204},{"type":15,"tag":77,"props":325,"children":326},{"style":95},[327],{"type":20,"value":209},{"type":15,"tag":77,"props":329,"children":330},{"style":212},[331],{"type":20,"value":215},{"type":15,"tag":77,"props":333,"children":334},{"style":95},[335],{"type":20,"value":209},{"type":15,"tag":77,"props":337,"children":338},{"style":95},[339],{"type":20,"value":224},{"type":15,"tag":77,"props":341,"children":342},{"style":95},[343],{"type":20,"value":229},{"type":15,"tag":77,"props":345,"children":346},{"style":212},[347],{"type":20,"value":348},"www.w3.org",{"type":15,"tag":77,"props":350,"children":351},{"style":95},[352],{"type":20,"value":194},{"type":15,"tag":77,"props":354,"children":355},{"style":95},[356],{"type":20,"value":224},{"type":15,"tag":77,"props":358,"children":359},{"style":95},[360],{"type":20,"value":229},{"type":15,"tag":77,"props":362,"children":363},{"style":212},[364],{"type":20,"value":365},"data:",{"type":15,"tag":77,"props":367,"children":368},{"style":95},[369],{"type":20,"value":194},{"type":15,"tag":77,"props":371,"children":372},{"style":95},[373],{"type":20,"value":224},{"type":15,"tag":77,"props":375,"children":376},{"style":95},[377],{"type":20,"value":229},{"type":15,"tag":77,"props":379,"children":380},{"style":212},[381],{"type":20,"value":268},{"type":15,"tag":77,"props":383,"children":384},{"style":95},[385],{"type":20,"value":194},{"type":15,"tag":77,"props":387,"children":388},{"style":201},[389],{"type":20,"value":294},{"type":15,"tag":77,"props":391,"children":392},{"style":95},[393],{"type":20,"value":158},{"type":15,"tag":77,"props":395,"children":397},{"class":79,"line":396},8,[398,402,407,411,415,419,423,427,431,435,439,443,447,451,456,461,465,469],{"type":15,"tag":77,"props":399,"children":400},{"style":95},[401],{"type":20,"value":184},{"type":15,"tag":77,"props":403,"children":404},{"style":105},[405],{"type":20,"value":406},"style-src",{"type":15,"tag":77,"props":408,"children":409},{"style":95},[410],{"type":20,"value":194},{"type":15,"tag":77,"props":412,"children":413},{"style":95},[414],{"type":20,"value":113},{"type":15,"tag":77,"props":416,"children":417},{"style":201},[418],{"type":20,"value":204},{"type":15,"tag":77,"props":420,"children":421},{"style":95},[422],{"type":20,"value":209},{"type":15,"tag":77,"props":424,"children":425},{"style":212},[426],{"type":20,"value":215},{"type":15,"tag":77,"props":428,"children":429},{"style":95},[430],{"type":20,"value":209},{"type":15,"tag":77,"props":432,"children":433},{"style":95},[434],{"type":20,"value":224},{"type":15,"tag":77,"props":436,"children":437},{"style":95},[438],{"type":20,"value":229},{"type":15,"tag":77,"props":440,"children":441},{"style":212},[442],{"type":20,"value":234},{"type":15,"tag":77,"props":444,"children":445},{"style":95},[446],{"type":20,"value":194},{"type":15,"tag":77,"props":448,"children":449},{"style":95},[450],{"type":20,"value":224},{"type":15,"tag":77,"props":452,"children":453},{"style":95},[454],{"type":20,"value":455}," \"",{"type":15,"tag":77,"props":457,"children":458},{"style":212},[459],{"type":20,"value":460},"'unsafe-inline'",{"type":15,"tag":77,"props":462,"children":463},{"style":95},[464],{"type":20,"value":209},{"type":15,"tag":77,"props":466,"children":467},{"style":201},[468],{"type":20,"value":294},{"type":15,"tag":77,"props":470,"children":471},{"style":95},[472],{"type":20,"value":158},{"type":15,"tag":77,"props":474,"children":476},{"class":79,"line":475},9,[477,481,486,490,494,498,502,506,510,514,518,522,526,530,534,539,543,547],{"type":15,"tag":77,"props":478,"children":479},{"style":95},[480],{"type":20,"value":184},{"type":15,"tag":77,"props":482,"children":483},{"style":105},[484],{"type":20,"value":485},"script-src",{"type":15,"tag":77,"props":487,"children":488},{"style":95},[489],{"type":20,"value":194},{"type":15,"tag":77,"props":491,"children":492},{"style":95},[493],{"type":20,"value":113},{"type":15,"tag":77,"props":495,"children":496},{"style":201},[497],{"type":20,"value":204},{"type":15,"tag":77,"props":499,"children":500},{"style":95},[501],{"type":20,"value":209},{"type":15,"tag":77,"props":503,"children":504},{"style":212},[505],{"type":20,"value":215},{"type":15,"tag":77,"props":507,"children":508},{"style":95},[509],{"type":20,"value":209},{"type":15,"tag":77,"props":511,"children":512},{"style":95},[513],{"type":20,"value":224},{"type":15,"tag":77,"props":515,"children":516},{"style":95},[517],{"type":20,"value":229},{"type":15,"tag":77,"props":519,"children":520},{"style":212},[521],{"type":20,"value":268},{"type":15,"tag":77,"props":523,"children":524},{"style":95},[525],{"type":20,"value":194},{"type":15,"tag":77,"props":527,"children":528},{"style":95},[529],{"type":20,"value":224},{"type":15,"tag":77,"props":531,"children":532},{"style":95},[533],{"type":20,"value":229},{"type":15,"tag":77,"props":535,"children":536},{"style":212},[537],{"type":20,"value":538},"www.googletagmanager.com",{"type":15,"tag":77,"props":540,"children":541},{"style":95},[542],{"type":20,"value":194},{"type":15,"tag":77,"props":544,"children":545},{"style":201},[546],{"type":20,"value":294},{"type":15,"tag":77,"props":548,"children":549},{"style":95},[550],{"type":20,"value":158},{"type":15,"tag":77,"props":552,"children":554},{"class":79,"line":553},10,[555,559,564,568,572,576,580,584,588,592],{"type":15,"tag":77,"props":556,"children":557},{"style":95},[558],{"type":20,"value":184},{"type":15,"tag":77,"props":560,"children":561},{"style":105},[562],{"type":20,"value":563},"frame-ancestors",{"type":15,"tag":77,"props":565,"children":566},{"style":95},[567],{"type":20,"value":194},{"type":15,"tag":77,"props":569,"children":570},{"style":95},[571],{"type":20,"value":113},{"type":15,"tag":77,"props":573,"children":574},{"style":201},[575],{"type":20,"value":204},{"type":15,"tag":77,"props":577,"children":578},{"style":95},[579],{"type":20,"value":209},{"type":15,"tag":77,"props":581,"children":582},{"style":212},[583],{"type":20,"value":215},{"type":15,"tag":77,"props":585,"children":586},{"style":95},[587],{"type":20,"value":209},{"type":15,"tag":77,"props":589,"children":590},{"style":201},[591],{"type":20,"value":294},{"type":15,"tag":77,"props":593,"children":594},{"style":95},[595],{"type":20,"value":158},{"type":15,"tag":77,"props":597,"children":599},{"class":79,"line":598},11,[600],{"type":15,"tag":77,"props":601,"children":602},{"style":95},[603],{"type":20,"value":604},"      }\n",{"type":15,"tag":77,"props":606,"children":608},{"class":79,"line":607},12,[609],{"type":15,"tag":77,"props":610,"children":611},{"style":95},[612],{"type":20,"value":613},"    }\n",{"type":15,"tag":77,"props":615,"children":617},{"class":79,"line":616},13,[618],{"type":15,"tag":77,"props":619,"children":620},{"style":95},[621],{"type":20,"value":622},"  },\n",{"type":15,"tag":77,"props":624,"children":626},{"class":79,"line":625},14,[627],{"type":15,"tag":77,"props":628,"children":629},{"style":95},[630],{"type":20,"value":631},"};\n",{"type":15,"tag":16,"props":633,"children":634},{},[635,637,643],{"type":20,"value":636},"這裡示範網站有使用第三方服務(ex: CDN、GA、...)的相關設定，將 ",{"type":15,"tag":34,"props":638,"children":640},{"className":639},[],[641],{"type":20,"value":642},"your-domain.com",{"type":20,"value":644}," 替換成前端網站的 domain。",{"type":15,"tag":16,"props":646,"children":647},{},[648,654,656,662,664,670],{"type":15,"tag":34,"props":649,"children":651},{"className":650},[],[652],{"type":20,"value":653},"reportOnly",{"type":20,"value":655}," 設定為 ",{"type":15,"tag":34,"props":657,"children":659},{"className":658},[],[660],{"type":20,"value":661},"false",{"type":20,"value":663}," 使不合規定的檔案忽略不載入，適合用在正式環境；設定為 ",{"type":15,"tag":34,"props":665,"children":667},{"className":666},[],[668],{"type":20,"value":669},"true",{"type":20,"value":671}," 時檔案依然會載入，但會將資源載入警告列在 console log 內，用在測試環境 debug 用。",{"type":15,"tag":673,"props":674,"children":675},"style",{},[676],{"type":20,"value":677},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":101,"depth":101,"links":679},[680],{"id":24,"depth":101,"text":27},"markdown","content:article:coding:vue-nuxt-content-security-policy.md","content","article/coding/vue-nuxt-content-security-policy.md","article/coding/vue-nuxt-content-security-policy","md",1766375573986]