실무 환경에서는 웹 개발자들이 이런 브라우저 보안 정책들(CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 등)을어느 정도 수준까지 직접 명시적으로 선언하고 관리하는지가 궁금합니다.예를 들어,어떤 정책들은 코드나 미들웨어에서 직접 작성하고,어떤 정책들은 서버나 CDN 레벨에서 일괄 설정되는지그 구분의 현실적 기준이 있다면 듣고 싶습니다.또한 이런 보안 헤더들을 설정할 때 자주 사용하는 라이브러리나 프레임워크 추천도 부탁드립니다.(예: Express helmet, Next.js next-safe, Nginx 보안 헤더 설정 등)

CSP, CORS, SRI, 쿠키 속성, Referrer-Policy 같은 HTTP 기반 보안정책들은서버가 응답 헤더로 내려주면 브라우저의 내부 policy layer에서 관리된다고 알고 있습니다.그런데 이때 브라우저가 이런 보안 정책들을 저장하고 적용하는 단위가Origin 단위(정확히 scheme + host + port)로 관리되는지,아니면 Site 단위(예: eTLD+1 기반, 쿠키 격리처럼 더 넓은 범위) 로 관리되는지도 궁금합니다.즉, 브라우저의 보안 정책(policy layer)은 어떤 기준 단위로 정책을 식별·적용하며,개발자가 설정한 CSP나 CORS 같은 정책들이 브라우저 내부에서어떤 스코프로 캐싱·격리되어 동작하는지 알고 싶습니다.

서버에서는 캐싱의 유무와 상관없이 매번 리소스에 대해 digest 를 하게 되는것 같은데요.그러면, 브라우저가 리소스를 캐싱한다고 해서 '서버성능에 도움이 되기보다는 네트워크 대역폭을 아낄수 있다' 정도의 이점이 있다고 보면 될까요?

react (client) + node.js (backend) 와 같은 구성에서는 SOP 에서 설명해주신 '동일 출처 정책' 으로 인해 'fetch' 등을 사용할때 막히는 경우가 종종 있었는데요. 그래서, 이전에는 fe 팀과 be 팀이 개발을 할때 CORS 작업을 항상 했었던걸로 기억합니다. 최근에 많이 사용하는 next.js 는 bff (backend for frontend) 가 중간에 있어서 SOP 로 인한 문제가 거의 없는것 같은데요. (SOP 는 설명해주신것처럼 브라우저 자체의 보안이기 때문에) 이렇게 이해하는게 맞을까요?

put, patch, delete 메서드의 경우 options (사전 요청) 을 보내게 된다고 하셨는데요. 물론, 설명 주신것처럼 "Access-Control-Max-Age" 를 통해서 캐싱을 하는 방법도 있겠지만, get 과 post 요청만 사용하는게 (사전 요청을 하지 않으니) 좀 더 효율적인 방법이 될수 있을까요?

예제에서 처럼 html 을 response 하지 않고 rest api 를 통해 fe 와 통신하는 경우에도 csrf 를 사용하는 경우가 있을까요? 만약 있다면 어떻게 사용하는지도 알고 싶습니다.

서버 구성해서 직접 만들고 있는데, 입력폼에서 스크립트가 안먹히더라고요. 쭉 강의 보고 실습필요한 부분 다시 보는데 일전에 브라우져 설정을 변경 했었었나요. 기억이 가물합니다! Content-Security-Policy-Report-Only 이 옵션 때문에 가능했던가요.   

수업에서 브라우저 인스펙터의 옵션에서 [캐시 사용안함] 를 off 후 테스트 하셨는데 캐시 사용 안함은 헤더와 상관없이 캐시를 아예 사용안하는 옵션인가요

querystring.decode(body)로 하시면 해결 가능합니다

request의 쿠키 부분 지우고 send 한 다음response의 set-cookie 옆 세션을 user 쿠키로 수정하려고 하는데 경고음만 울리고 수정이 안 됩니다어떻게 해야 응답의 세션 부분 수정이 가능할까요?

완강 후 책도 한번 읽어보려고 합니다추가로 강의자료 링크를 강의 아래에 달아주시면 좋을 것 같습니다.

 //auth.service.ts import { Injectable, UnprocessableEntityException } from '@nestjs/common'; import { UsersService } from '../users/users.service'; import * as bcrypt from 'bcrypt'; import { JwtService } from '@nestjs/jwt'; import { IAuthServiceGetAccessToken, IAuthServiceLogin, IAuthServiceSetRefreshToken, } from './interfaces/auth-service.interface'; @Injectable() export class AuthService { constructor( private readonly userService: UsersService, // private readonly jwtService: JwtService, ) {} async login({ email, password, context }: IAuthServiceLogin) { // 1. 이메일이 일치하는 유저를 DB에서 찾기 const user = await this.userService.findOneByEmail({ email }); // 2. 일치하는 유저가 없으면?! 에러 던지기!!! if (!user) throw new UnprocessableEntityException('존재하지 않는 이메일입니다.'); // 3. 일치하는 유저가 있지만, 비밀번호가 틀렸다면?! const isAuth = await bcrypt.compare(password, user.password); if (!isAuth) throw new UnprocessableEntityException('틀린 암호입니다.'); // 4. refreshToken(=JWT)을 만들어서 브라우저 쿠키에 저장해서 보내주기 this.setRefreshToken({ user, context }); // 5. 일치하는 유저도 있고, 비밀번호도 맞았다면?! // => accessToken(=JWT)을 만들어서 브라우저에 전달하기 return this.getAccessToken({ user }); } getAccessToken({ user }: IAuthServiceGetAccessToken): string { return this.jwtService.sign( { sub: user.id }, { secret: process.env.JWT_SECRET_KEY, expiresIn: process.env.JWT_ACCESS_TOKEN_EXPIRE, }, ); } setRefreshToken({ user, context }: IAuthServiceSetRefreshToken): void { const refreshToken = this.jwtService.sign( { sub: user.id }, { secret: process.env.JWT_REFRESH_SECRET_KEY, expiresIn: process.env.JWT_REFRESH_TOKEN_EXPIRE, }, ); //개발환경 context.res.setHeader( 'set-Cookie', `refreshToken=${refreshToken}; path=/;`, ); // 배포환경 // context.res.setHeader('set-Cookie', `refreshToken=${refreshToken}; path=/; domain=.mybacksite.com; SameSite=None; Secure; httpOnly`); // context.res.setHeader('Access-Control-Allow-Origin', 'https://myfrontsite.com'); } }  리프레쉬 토큰을 생성하는 과정에서 개발환경에 사용하는context.res.setHeader( 'set-Cookie', `refreshToken=${refreshToken}; path=/;`, );이 코드에 'refreshToken'의 이름을 <한글>로 사용하게되면 graphql로 API테스트를 할때 read에 대한 에러를 발생시키더라구요.쿠키의 이름을 바꿔서 생성하려고 했는데 한글로 생성이 되지 않는거는 nodejs의 기본 특성인걸까요!?참고이미지로 아래에 이미지를 붙여봅니다~궁금해요~~~ 이런내용들은 nodejs 공식문서에서 제가 잘 못찾는건지 궁금합니다. 공식문서에도 있을것 같아서 찾아보려고했는데 잘 못찾겠더라구요ㅠㅜ.. 

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.1. 강의 내용과 관련된 질문을 남겨주세요.2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.(자주 하는 질문 링크: https://bit.ly/3fX6ygx)3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.=========================================[질문 템플릿]1. 강의 내용과 관련된 질문인가요? (아니오)2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예)3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예)[질문 내용]쿠키에 대해서 알게 되었지만 궁금한점이 있습니다.구글에 검색하다 본 기억이 있는데 쿠키 & 세션을 REST 개발환경에서는 못쓴다고 본적이 있는거 같은데 스프링 부트로 rest형식으로 개발할 때는 쿠키 & 세션을 못쓰는게 맞나요? 만약, 못쓰는게 맞다면 그러면 로그인 유지나 광고 3일 동안 안보겠습니다 같은 쿠키를 사용해야 할 때는 어떤식으로 시켜줘야나요? 리액트와 협업하면 프론트에게 맡겨야 하나요?

indexRouter.get('/', (req: Request, res: Response, next: NextFunction) => { console.log(req.cookies); const {name, pwd} = req.cookies; if (!name || !pwd) { res.sendFile(path.join(__viewPath, 'index.html')); } else { res.send(`${name}님 환영합니다!`); }});indexRouter.get('/login', (req: Request, res: Response) => { const {name, pwd} = req.query; const expire = new Date(); expire.setSeconds(30); const cookieOptions = { httpOnly: true, expires: expire, path: '/', }; res.cookie('name', name, cookieOptions) .cookie('pwd', pwd, cookieOptions) .redirect('/');});기존 쿠키서버를 express서버로 적용해보는 과정인데요, /login에서 받은 정보를 쿠키에 담고, redirect로 홈을 호출하고 있는데요,문제는 홈에서 보시면 req.cookies에 쿠키가 담겨있을때가 있고, 없을때가 있습니다."(console.log에서 쿠키값이 없을때: "[Object: null prototype]{}" 쿠키값이 존재할때: "{test:"test"}") 혹시 쿠키가 클라이언트에게 전송되기전에 redirect가 먼저 발생하여 쿠키값이 없어, index.html을 내보내는걸까요?6번 정도 시도한다고 가정할때 두번정도 쿠키값이 정상으로 전송되고, 나머지 4번 정도가 쿠키값이 없는 상태로 index가 호출됩니다;(정상결과와 아닌것은 순서가 없습니다;; 운이 좋으면되고 안좋으면 안되는 느낌입니다...)혹시 비동기 작업이랑 관련이 있을까여?

get_cookie 를 통해서 어떠한 기능의 쿠키를 저장하고android와 ios에서 save_cookie로저장된 쿠키의 수가 10번 이상이면 모달화면을 띄우고 있어요cookie가 바르게 카운트 되지 않을 때는 어떻게 하면 좋을까요?!

  쿠키 강의에서 18:00 부분 질문있습니다  아래 코드에서 처음에는 login으로 들어가서 로그인창이나옵니다 그리고 서버에서는 set cookie로 응답을 보내겠죠? 그러고 끝이 나야하는데 왜 처음 로그인할때는 ~~님 환영합니다 까지 뜨는건가요? 요청은 제가 한번 보낸것 아닌가요? 요청(처음로그인) -> 응답(302,쿠키 보내기)  .. 여기서 재 요청을 하면 else if(cookies.name)이 작동해야하지만 왜 한번만 요청을 했는데 login , cookies.name 이렇게 2개가 작동하는건가요?     if (req.url.startsWith('/login')) {     const { query } = url.parse(req.url);     const { name } = qs.parse(query);     const expires = new Date();     // 쿠키 유효 시간을 현재시간 + 5분으로 설정     expires.setMinutes(expires.getMinutes() + 5);     res.writeHead(302, {       Location: '/',       'Set-Cookie': `name=${encodeURIComponent(name)}; Expires=${expires.toGMTString()}; HttpOnly; Path=/`,     });     res.end();   // name이라는 쿠키가 있는 경우   } else if (cookies.name) {     res.writeHead(200, { 'Content-Type': 'text/plain; charset=utf-8' });     res.end(`${cookies.name}님 안녕하세요`);   } else {        

안녕하세요, 제로초님 강의 잘 들었습니다. 강의를 듣고 혼자서 프로젝트를 진행하는데 너무 막히는점이 있어서 질문드립니다. 마이페이지에서 유저 정보를 불러오는 작업을 하고 있습니다. 토큰을 받아서 쿠키에 저장하여 사용하고 있는데.. 배포시에 저 말고 다른 사람도 저의 토큰으로 요청을 보내는 모습이 발견되었는데 해결을 못하고 있어요ㅠ 로초님 강의 후반부에서 보긴봤었는데 상황이 약간 다른거 같아서 질문드려요ㅠ saveCookies는 쿠키를 받아서 디스패치하여 스토어에 저장하는 함수이고 createCustomHeader는 Authorization : {`Bearer ${token}`}을 리턴하는 함수입니다. export const getServerSideProps = wrapper.getServerSideProps( (store) => async (context) => { saveCookies(store, context); const rootState: RootState = store.getState(); const user_id = rootState.loginState.user_id; axiosInstance.interceptors.request.use( async function (config) { try { config.headers = null; if (context.req && context.req.headers.cookie) { const allCookies = cookies(context); const accessToken = allCookies.accessToken; config.headers = createCustomHeader(accessToken); } return config; } catch (error) { console.log(error); } }, function (error) { return Promise.reject(error); }, ); store.dispatch(getUserInfoInMypageRequest(user_id)); store.dispatch(END); await store.sagaTask.toPromise(); return { props: {}, }; }, );

안녕하세요. 기초강의부터 Nuxt 강의까지 많이 도움을 받았습니다.   다름 아니라... Nuxt 에서 쿠키를 사용할려고 하는데 생각처럼 잘 안되네요...   로그인 구현후 인증값을 쿠키로 저장하고 store 의 state에 쿠키값이 존재시 state 의 데이터를 초기화 할려고 합니다. import Cookies from "js-cookie"; export const state = () => { userName = Cookies.get('userName') || ''; } store/index.js 에 위와 같이 state 값이 쿠키값을 초기화할려고 합니다. 하지만 userName 에 쿠키값이 초기화되지 않습니다.   nuxtServerInit 등 여러삽질을 해봤지만 해결점을 찾지 못했습니다.   Nuxt 에서 쿠키활용에 대해 설명해주시면 많은 도움이 될거같습니다.    

쿠키의 도메인을 naver.com이라고 지정했습니다. 쿠키는 blog.naver.com 과 www.naver.com 에서 모두 보내집니다. www.naver.com/some 하위 경로에만 쿠키를 보내고 싶어서 path는 /some이라고 지정했습니다. 이 때 blog.naver.com에는 /some이라는 패스가 없다면 쿠키가 쿠키가 무시되고 만약 /some이라는 패스가 존재한다면 보내지게 되나요?

안녕하세요. 현재 강의를 수강 중에 https 설정 후 발생하는 문제가 있어서 질문드립니다. 현재 모든 강의를 수강하고 SSL 인증서를 적용하는 제로초님 블로그의 글을 따라 하고 있는데로그인은 되지만 로그아웃이 되지 않는 현상이 발생합니다.개발자도구 - 네트워크에 응답으로 withcredential 예외 응답이 오는 걸로 봐서는 쿠키 설정에 문제가 있는 것으로 추측됩니다.(Nginx 설정은 블로그에 있는 설정에 도메인만 바꿔서 적용하였고 다른 부분은 바꾼 것이 없습니다.)Nginx 설정에 쿠키를 보낼 수 있도록 적용하면 될거 같은데 혹시 다른 문제이진 않은가 걱정이 되어 글을 남깁니다.또한 혹시 https를 적용하고 또 설정해줘야 하는 부분이 짐작되는 것이 있으시다면 조언해주시면 감사하겠습니다.